Style guide
Colors
Primary
Primary trans-10
Primary trans-20
Primary trans-30
Primary trans-40
Primary trans-50
Primary trans-60
Primary trans-70
Primary trans-80
Primary trans-90
Primary dark
Primary light
Secondary
Secondary trans-10
Secondary trans-20
Secondary trans-30
Secondary trans-40
Secondary trans-50
Secondary trans-60
Secondary trans-70
Secondary trans-80
Secondary trans-90
Secondary dark
Secondary light
Base
Base trans-10
Base trans-20
Base trans-30
Base trans-40
Base trans-50
Base trans-60
Base trans-70
Base trans-80
Base trans-90
Base dark
Base light
Accent
Accent trans-10
Accent trans-20
Accent trans-30
Accent trans-40
Accent trans-50
Accent trans-60
Accent trans-70
Accent trans-80
Accent trans-90
Accent dark
Accent light
Neutral
Neutral trans-10
Neutral trans-20
Neutral trans-30
Neutral trans-40
Neutral trans-50
Neutral trans-60
Neutral trans-70
Neutral trans-80
Neutral trans-90
Neutral dark
Neutral light
Black
Black trans-10
Black trans-20
Black trans-30
Black trans-40
Black trans-50
Black trans-60
Black trans-70
Black trans-80
Black trans-90
White
White trans-10
White trans-20
White trans-30
White trans-40
White trans-50
White trans-60
White trans-70
White trans-80
White trans-90
Semantic Colors
Success
Success trans-10
Success trans-20
Success trans-30
Success trans-40
Success trans-50
Success trans-60
Success trans-70
Success trans-80
Success trans-90
Info
Info trans-10
Info trans-20
Info trans-30
Info trans-40
Info trans-50
Info trans-60
Info trans-70
Info trans-80
Info trans-90
Warning
Warning trans-10
Warning trans-20
Warning trans-30
Warning trans-40
Warning trans-50
Warning trans-60
Warning trans-70
Warning trans-80
Warning trans-90
Danger
Danger trans-10
Danger trans-20
Danger trans-30
Danger trans-40
Danger trans-50
Danger trans-60
Danger trans-70
Danger trans-80
Danger trans-90
Typography
I am a heading H1
I am a heading H2
I am a heading H3
I am a heading H4
I am a heading H5
I am a heading H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tortor odio, aliquam eget pellentesque et, tincidunt quis enim. Ut ultrices congue lacus non convallis. Etiam hendrerit nulla efficitur purus cursus feugiat. Phasellus ut venenatis enim, quis scelerisque diam. Nunc in venenatis diam. In quis tristique metus.
Radius
Radius-xs
Radius-s
Radius-m
Radius-l
Radius-xl
Radius-full
Spaces
space-4xs
space-3xs
space-2xs
space-xs
space-s
space-m
space-l
space-xl
space-2xl
space-3xl
space-4xl
Shadows
Shadow-default (dynamic)
Shadow-ultra-light (dynamic)
Shadow-light (dynamic)
Shadow-medium (dynamic)
Shadow-dark (dynamic)
Shadow-brutalist (dynamic)