Design System Tokens

Brand Colors

bg-brand-red
bg-brand-blue
bg-brand-green
bg-brand-yellow
bg-brand-orange
bg-brand-purple
bg-brand-navy
bg-brand-pink
bg-brand-cream
bg-brand-dark-gray
bg-brand-warm-gray
bg-brand-warm-white

Light Variants

bg-brand-light-blue
bg-brand-light-green
bg-brand-light-orange
bg-brand-light-yellow

Dark Variants

bg-brand-dark-red
bg-brand-dark-green
bg-brand-dark-purple

Feedback Colors

bg-feedback-error-base
bg-feedback-success-base
bg-feedback-warning-base
bg-feedback-info-base

UI State Colors

bg-primary-base
bg-secondary-base
bg-disabled-base
bg-focus

Border Radius

rounded-none
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl

Fonts

Headings

Chick-fil-A Heading 1

Chick-fil-A Heading 2

Chick-fil-A Heading 3

Chick-fil-A Heading 4

Font Styles

text-body-1

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-body-2

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-subtitle-1

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-subtitle-2

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-subtitle-3

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-caption-1

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-caption-2

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-overline-1

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-overline-2

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

text-overline-3

Chick-fil-a Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quo, vitae commodi quis odit recusandae quas exercitationem animi odio ullam earum? Magnam obcaecati reprehenderit iure ad nisi? Vero beatae molestias, ducimus commodi voluptatum dolor temporibus consectetur dicta, ab nesciunt id.

Font Sizes

Base Text

10px Text

12px Text

14px Text

16px Text

20px Text

24px Text

32px Text

48px Text

Tailwind Container Sizing

max-w-xs
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-2xl
max-w-3xl
max-w-4xl
max-w-5xl
max-w-6xl