Chakra UI is a component system for building products with speed

import { defineTokens } from "@chakra-ui/react"

export const tokens = defineTokens({
 colors: {
 primary: { value: "#0FEE0F" },
 secondary: { value: "#EE0F0F" },
 },
 fonts: {
 body: { value: "system-ui, sans-serif" },
 },
 animations: {
 "slide-in-right": { value: "slide-in-right 0.5s ease-in-out" },
 },
})

import { defineTextStyles } from "@chakra-ui/react"

export const textStyles = defineTextStyles({
 headline: {
 value: {
 fontSize: "4xl",
 fontWeight: "bold",
 },
 },
 subheadline: {
 value: {
 fontSize: "2xl",
 fontWeight: "semibold",
 },
 },
})

import { defineRecipe } from "@chakra-ui/react"

export const cardRecipe = defineRecipe({
 base: {
 display: "flex",
 flexDirection: "column",
 },
 variants: {
 variant: {
 primary: {
 bg: "teal.600",
 color: "white",
 },
 },
 },
})