Design System
The visual foundation of your website — colors, typography, spacing, and components all in one place.
Your brand colors used consistently across every page.
Espresso
#1B1612
bg-espresso
Navy
#0E1C44
bg-navy
Pine Needles
#718364
bg-pineNeedles
Sand
#F4EEE1
bg-sand
White
#FBF9F9
bg-white
Every text style — headings, body, buttons, and more.
H1
H2
H3
H4
H5
H6
Overline
OVERLINE TEXT
Subheading
This is a subheading for additional context
Paragraph
This is body text for longer paragraphs and general content. It is designed for readability and comfortable reading at various screen sizes.
Caption
This is caption text for small details
Button Text
Call-to-action styles on both light and dark backgrounds.
Consistent spacing keeps layouts clean and professional.
Space 0
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
0
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