Styleguide

Colors

Primary

Secondary

Border Primary

Border

Shadow

Shadow Rounded

Dark

Gray 500

Gray 400

Gray 300

Gray 200

Gray 100

Buttons

Primary

Button Primary

Primary Outline

Button Outline

Button Link

Button Link

Paragraph Link

Lorem ipsum

Badges

Primary

Primary

Secondary

Secondary

Dark

Dark
Typography

Headline H1

Display 1

Headline H1

Headline H2

Display 2

Headline H2

Headline H3

Display 3

Headline H3

Headline H4

Headline H5

Paragraph Lead. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Excepteur sint occaecat ea cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph Normal. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim epos veniam, quis nostrud exercit ation mi ullamco laboris nisi ut aliquip ex eare commodo consequat. Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat null pariatur. Excepteur sint occaecat ea cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Media
Placeholder
Image 3:2 Caption
Placeholder
Image 16:9 Caption
Placeholder
Image 21:9 Caption
Placeholder
Image 1:1 Caption
Placeholder
Image 2:3 Caption
Forms

Empty

Filled

Placeholder

Helper Text.

Disabled

Valid

Invalid

Invalid Text.

Password

Select

Search

Default

Checked

Indeterminate

Disabled

Default

Checked

Disabled

Default

Tables

Templates

Table Head Dark Table Head Dark Table Head Dark
Table Head Cell Cell
Table Head Cell Cell