Color palette
background
#FFFFFF
background
on-background
#000000
on-background
on-surface-variant
#08090A99
on-surface-variant
outline
#0000000A
outline
on-primary
#FFFFFF
on-primary
secondary
#0C8C5E
secondary
on-secondary
#000000
on-secondary
Typography
The quick brown fox
Body sample at 14px. The quick brown fox jumps over the lazy dog. 0123456789
Primary font
inter
Secondary font
paperMono
Heading scale
50px44px36px
Body scale
16px14px
Weights
400500
Components
button-primary
backgroundColor: #08090a
textColor: #ffffff
typography: {typography.label-sm}
rounded: {rounded.md}
padding: 8px
height: 34px
button-secondary
backgroundColor: transparent
typography: {typography.label-sm}
rounded: 0px
padding: 20px
height: 64px
card
backgroundColor: {colors.surface}
rounded: {rounded.lg}
Buttons
Background: #08090a
Text color: #ffffff
Corner radius: 4px
Height: 34px
Padding: 8px 14px 8px 14px
Font: 14px, weight 500
Sampled from: <a> labelled Contact sales
Cards
Background: #faf8f5
Corner radius: 6px
Padding: 0px 0px 0px 0px
Layout tokens
Spacing scale
16px4px6px8px10px12px
Border radii
2px4px6px12px9999px
Guidelines
Do
- Do use a 4px grid for spacing
- Do use
#08090a for primary actions and CTAs - Do stick to 2 font weights: 400, 500
- Do use
inter as the primary typeface
Don't
- Don't introduce colors outside the palette above
- Don't mix fonts beyond inter and arizonaFlare
- Don't use border-radius values outside: 2px, 4px, 6px, 12px, 12px 12px 0px 0px, 23.5px 23.5px 0px 0px, 9999px (pill)