Textstyles
| display-1 700 3.5em/1.2em "Bricolage Grotesque" |
Ipsum Dolor Sit Amet |
| display-2 700 2.5em/1.3em "Bricolage Grotesque" |
Ipsum Dolor Sit Amet |
| heading-1 700 2em/1.3em "Bricolage Grotesque" |
Ipsum Dolor Sit Amet |
| heading-2 700 1.5em/1.5em "Bricolage Grotesque" |
Ipsum Dolor Sit Amet |
| heading-3 700 1.25em/1.5em Bricolage Grotesque |
Ipsum Dolor Sit Amet |
| body-regular-large 300 1.5em/1.5em "Inter" |
Ipsum Dolor Sit Amet |
| body-bold 700 1em/1.5em "Inter" |
Ipsum Dolor Sit Amet |
| body-regular 300 1em/1.5em "Inter" |
Ipsum Dolor Sit Amet |
| label-button 500 1em/1em "Inter" |
Ipsum Dolor Sit Amet |
| label 700 1em/1em "Bricolage Grotesque" |
IPSUM DOLOR SIT AMET |
| caption 300 0.875em/1.25em "Inter" |
Ipsum Dolor Sit Amet |
Colors
Brand Primary colors
brand-primary-light
brand-primary
brand-primary-dark
Brand Accent colors
brand-accent-light
brand-accent
brand-accent-dark
Status/Semantic colors
status-info
status-warning
status-critical
Background colors
background-light
background-dark
Text colors
This is text-primary on neutral-0 background
This is text-secondary on neutral-0 background
This is text-inverted on neutral-900 background
Neutral Scale
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
Interactive colors
interactive-default
interactive-hover
Navigation colors
nav-default
nav-hover
Border Radius
small
medium
large
xlarge
circle
Border colors
border-lighter
border-light
border
border-dark
border-darker
Spacing
Core spacing
space-xs
space-s
space-m
space-l
space-xl
space-xxl
space-48
space-72
space-xxxl
Semantic spacing
space-section