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.
Primary
#025088
bg-primary
Secondary
#35B3E4
bg-secondary
Tertiary
bg-tertiary
Accent
#DAEAEF
bg-accent
Dark
#001A2C
bg-dark
Light
#F1F1F1
bg-light
Every text style — headings, body, buttons, and more.
Hero Title
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