Styleguide

Tokens

Sizing Units

• 3px | 0.1875rem
• 4px | 0.25rem
• 6px | 0.375rem
• 9px | 0.5625rem
• 12px | 0.75rem
• 20px | 1.25rem
• 24px | 1.5rem
• 27px | 1.6875rem
• 30px | 1.875rem
• 45px | 2.8125rem
• 72px | 4.5rem
• 75px | 4.6875rem
• 120px | 7.5rem

A blockquote.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque rerum obcaecati sapiente, magni architecto labore sunt nostrum doloremque provident consectetur?

Base size 20px @ 1.5 ratio.

Colors

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

This is a lead-in paragraph. Used in intro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, eligendi.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, et pariatur. Architecto aperiam suscipit, provident, repellat accusamus aut alias amet numquam ut et enim laborum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia sunt, autem numquam ad quae, eius provident voluptate nisi voluptates repellat facere commodi molestiae possimus error expedita! Reprehenderit neque modi voluptatum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam et eius possimus impedit voluptatem praesentium non modi tempora, eum ut incidunt quis libero facilis iure itaque eveniet ab cum quibusdam.

• Unordered item 1
• Unordered item 2
• Unordered item 3
  • Nested item 1
  • Nested item 2
  • Nested item 3
• Unordered item 4
• Unordered item 5
• Unordered item 6

1. Ordered item 1
2. Ordered item 2
3. Ordered item 3
4. Ordered item 4
   1. Nested item 1
   2. Nested item 2
   3. Nested item 3
5. Ordered item 5
6. Ordered item 6

Links

Default link

Buttons

Default Button Inverse variant