Color

Neutrals

Colors

Typography

Fonts

AaBbCc123

Obviously Narrow
.font-sans

AaBbCc123

Obviously (default)
.font-sans

AaBbCc123

Obviously Wide
.font-sans-wide

Display heading sizes

Display XX-Large
.display-xxl

Display

Display X-Large
.display-xl

Display

Display Large
.display-lg

Display Large

Display Medium
.display-md

Display Medium

Display Small
.display-sm

Display Small

Display X-Small
.display-xs

Display Extra Small

Heading text sizes

Heading 1
.heading-1

Heading 1

Heading 2
.heading-2

Heading 2

Heading 3
.heading-3

Heading 3

Heading 4
.heading-4

Heading 4

Body text sizes

Body Large
.body-large
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body Medium
.body-medium
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body Small
.body-small
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body X-Small
.body-xs
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Buttons

Layout

Fit (default)
.button
Square
.button
.button-square
Fluid
.button
.button-fluid

Sizes

Medium (default)
.button
Small
.button
.button-small

Appearance

Dark (default)

Filled (default)
.button
Outlined
.button
.button-outlined
Ghost
.button
.button-ghost

Light

Filled (default)
.button
.button-light
Outlined
.button
.button-light
.button-outlined
Ghost
.button
.button-light
.button-ghost

Yellow

Filled (default)
.button
.button-yellow
Outlined
.button
.button-yellow
.button-outlined
Ghost
.button
.button-yellow
.button-ghost

Green

Filled (default)
.button
.button-dark-green
Outlined
.button
.button-dark-green
.button-outlined
Ghost
.button
.button-dark-green
.button-ghost

Sand

Filled (default)
.button
.button-red
Outlined
.button
.button-red
.button-outlined
Ghost
.button
.button-red
.button-ghost