Typography

Display 1

Display 2

H1

Headline

H2

Title 1

H3

Subhead 1

H4

Title 2

Subhead 2

Caption

Regular paragraph with bold or strong text.

Buttons



Colors & Shadows

  • $apron-green $primary
  • $red
  • $natural-grey
  • $ceramic
  • $cream
  • $gold
  • $warm-black
  • $warmer-black
  • $white $white-1
  • $white-2
  • $white-3
  • $white-4
  • $white-5
  • $black $black-1
  • $black-2
  • $black-3
  • $black-4
  • $black-5
  • $black-6
  • $black-7
  • $shadow
  • $shadow-frap
  • $shadow-frap-pressed
  • $shadow-card
  • $shadow-card-hover
  • $shadow-card-pressed
  • $shadow-dialog

Dialog

Dialog

This is a dialog. It may have actions in the footer like so: This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:This is a dialog. It may have actions in the footer like so:

Overlay

This is an overlay. It can have all kinds of elements in it; forms, actions, content, menu...

Snackbar

This is a snackbar. It's used to communicate states (errors, successes, validation).

Forms

Valid message (e.g. valid input)
Error message (e.g. invalid input)

Cards

This is a simple card.

This is a collapsible card

Content of the collapsible card.

This can include any type of content; form, media...


This is a collapsible card with "teasing" content

Content of the collapsible card.

This can include any type of content; form, media...

Boxes

This is a box

Content of the box.

This can include any type of content; form, media...

This is a dark box

Content of the box.

This can include any type of content; form, media...

This is a green box

Content of the box.

This can include any type of content; form, media...

Grids

2 columns grid

First element
Second element

3 columns grid

First element
Second element
Third element
Fourth element
Fifth element
Sixth element

4 columns grid

First element
Second element
Third element
Fourth element
Fifth element
Sixth element
Seventh element
Eighth element

Tables

First column Second column Third column
Something Something else Another thing
Something Something else Another thing

Messages

This is a default message.
This is a successful message.
This is an error message.

Loading

Waiting