Styleguide

Tokens

Sizing Units

Base size 20px @ 1.5 ratio.

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

Old Colors

Green

green 10

green 20

green 30

green 40

green 50

green 60

green 70

green 80

green 90

Gray

gray 10

gray 20

gray 30

gray 40

gray 50

gray 60

gray 70

gray 80

gray 90

Typography

Header 1 Display

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

This is a lead-in paragraph. Used in intro. Synergize scalable paradigms to empower seamless innovation. Leverage agile frameworks to provide a robust synopsis for high-level overviews. Iterate approaches to corporate strategy fostering collaborative thinking to further the overall value proposition.

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!

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

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

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

Links

Default link