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.
Navy
#0D1B2A
bg-navy
Crimson Red
#9D1C1B
bg-crimsonRed
Gold
#C9A84C
bg-gold
Steel
#E4E4E4
bg-steel
White
#FFFDF9
bg-white
Every text style — headings, body, buttons, and more.
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 1.75
1.75rem
p-1.75 or m-1.75
Space 2.25
2.25rem
p-2.25 or m-2.25
Space 2.5
2.5rem
p-2.5 or m-2.5
Space 3.25
3.25rem
p-3.25 or m-3.25
Space 3.5
3.5rem
p-3.5 or m-3.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