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.
Black
#3A3A3A
bg-black
Moss Green
#414D30
bg-mossGreen
Tan
#C4B9A8
bg-tan
Cream
#DDD1B8
bg-cream
White
#EDEDED
bg-white
Every text style — headings, body, buttons, and more.
Hero Title
H1
H2
H3
H4
H5
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