Colors

Contrast CheckerXX% Shade Used

Each color has two tokens, one for color and one for background. Be sure to change both of them.

Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Placeholder X00

Links & Buttons

button-group

ButtonButton SecondaryButton
Link text you can edit

Layout

container
section
max-width-s
max-width-m

Text

View Typescale

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat mi sit amet eros commodo dapibus. Morbi interdum congue lacus, et semper sem finibus vel. Mauris pharetra fermentum felis. Donec non consequat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultricies lectus et rutrum ullamcorper. Cras vestibulum ornare orci, eu feugiat velit consectetur a. Duis id luctus erat. Curabitur vitae libero quis augue tempor gravida et ac nisi. In tincidunt odio est, a tincidunt elit egestas sed.

This is text-large

This is text-small

This is Title-Huge

This is an H1
Second Line Test

This is an H2
Second Line Test

This is an H3
Second Line Test

This is an H4
Second Line Test

This is an H5
Second Line Test
This is an H6
Second Line Test
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat mi sit amet eros commodo dapibus. Morbi interdum congue lacus, et semper sem finibus vel.

Spacing

margin-lr-auto
padding-small
padding-medium
padding-large
margin-small
margin-medium
margin-large

Misc

flex-gap-s
flex-gap-m
flex-gap-l
border
radius-large
radius-medium
radius-small

Adding highlights draws attention.

  • This is good
  • This is bad
shadow

Page Wrapper, Nav, Footer

Copy the following Page Wrapper and paste it on new pages as a starting point.