Immune To Failure
Design System
Every color, type size, spacing step and preset that drives this site, in one reference.
brand
pri
SEC
heading
text
Link
hover
PRIMARY scale
50
100
200
300
400
500
600
700
800
900
secondary scale
50
100
200
300
400
500
600
700
800
900
neutral scale
50
100
200
300
400
500
600
700
800
900
buttons
Pri
Pri outline
sec
sec outline
neutral
Neutral outline
ghost
ghost
headings
Aa
ABCDEFGHIJKLMNOPQWRXYZ
Body
Aa
ABCDEFGHIJKLMNOPQWRXYZ
Display lg
Display LG
Display md
Display MD
Display sm
Display SM
h1
Heading One
h2
Heading Two
h3
Heading Three
h4
Heading Three
h5
Heading Three
h6
Heading Six
body text large
Tokens keep every page on the same scale, so spacing and type stay consistent as the site grows.
body text
Tokens keep every page on the same scale, so spacing and type stay consistent as the site grows.
body small
Tokens keep every page on the same scale, so spacing and type stay consistent as the site grows.
body x-small
Tokens keep every page on the same scale, so spacing and type stay consistent as the site grows.
eyebrow
Quisque volutpat mattis
labels
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
badges
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
Volutpat Mattis
Notices
Info: Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
success: Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Warning! Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Error! Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
icons
Blurbs
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Quisque volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
padding
padding all sm
padding all sm
padding all mD
padding all lg
row layouts
container text
container wide text
container content
container content lg
Section Xsmall
Section small
Section md
Section lg
Section Xl
Section full