Design System

Brand & Design Tokens

The visual foundation of your website — colors, typography, spacing, and components all in one place.

Color Palette

Your brand colors used consistently across every page.

Color Palette

Dark

#1A1A1A

bg-dark

Cream

#F5EFEC

bg-cream

Gold

#D3A76A

bg-gold

Gold Dark

#695334

bg-goldDark

Pookie Pink

#F9C7DC

bg-pookiePink

White

#ffffff

bg-white

Typography

Every text style — headings, body, buttons, and more.

Heading 1

H1 — Cursive

Heading Cursive

Heading 2

H2 — Cursive

Heading 2 Cursive

Heading 3

H3 — Cursive

Heading 3 Cursive

Heading 4

Heading 5

Subheading

This is a subheading for additional context

Paragraph Default

This is body text for longer paragraphs and general content. It is designed for readability and comfortable reading at various screen sizes.

Paragraph Small

This is smaller body text for captions, footnotes, and secondary content.

Link Text

Button Text

Overline

Overline Text

Inline Cursive Usage

You need better marketing.

Buttons

Call-to-action styles on both light and dark backgrounds.

Primary on Light Secondary on Light Tertiary on Light

Primary on Dark Secondary on Dark Tertiary on Dark

Spacing Scale

Consistent spacing keeps layouts clean and professional.

Spacing Scale

Space 0

p-0 or m-0

Space 1

1rem

p-1 or m-1

Space 2

2rem

p-2 or m-2

Space 3

3rem

p-3 or m-3

Space 4

4rem

p-4 or m-4

Space 5

5rem

p-5 or m-5

Space 6

6rem

p-6 or m-6

Space 8

8rem

p-8 or m-8

Space 10

10rem

p-10 or m-10

Space 12

12rem

p-12 or m-12

Space 16

16rem

p-16 or m-16

Space 22

22rem

p-22 or m-22

Space 24

24rem

p-24 or m-24

Space 32

32rem

p-32 or m-32

Space 0.25

0.25rem

p-0.25 or m-0.25

Space 0.5

0.5rem

p-0.5 or m-0.5

Space 0.75

0.75rem

p-0.75 or m-0.75

Space 1.25

1.25rem

p-1.25 or m-1.25

Space 1.5

1.5rem

p-1.5 or m-1.5

Space 2.5

2.5rem

p-2.5 or m-2.5

Space 3.75

3.75rem

p-3.75 or m-3.75

Space 5.5

5.5rem

p-5.5 or m-5.5

Space 7.5

7.5rem

p-7.5 or m-7.5

Space 8.75

8.75rem

p-8.75 or m-8.75

Space none

p-none or m-none

Space xxs

1rem

p-xxs or m-xxs

Space xs

1.5rem

p-xs or m-xs

Space sm

2rem

p-sm or m-sm

Space md

2.5rem

p-md or m-md

Space lg

4rem

p-lg or m-lg

Space xl

5rem

p-xl or m-xl

Space xxl

8.75rem

p-xxl or m-xxl