Use the variables below for the available colors in light mode and dark mode to use on the web.
| Colors | Light Mode | Dark Mode |
|---|---|---|
| --background-color | $ui-01 |
$ui-07 |
| --background-color-inverse | $ui-01 |
$ui-01-10 |
| --background-color-negative | $ui-07 |
$ui-01 |
| --background-color-light | $ui-05 |
$ui-06 |
| --background-color-muted-alpha | rgba($ui-03,.5) |
$ui-01-50 |
| --background-color-contrast | $ui-05 |
$ui-07 |
| --background-color-dark | $ui-02 |
|
| --background-color-gray | $ui-05 |
$ui-01-10 |
| --background-color-gray-dark | $ui-05 |
$ui-08 |
| --background-color-gray-darker | $ui-02 |
$ui-03 |
| --background-faq | $ui-05 |
$ui-01-10 |
| --background-color-darker | #bfbfbf |
#3e3d3d |
| --background-color-reverse | $ui-02 |
$ui-01 |
| --divider-color | $ui-04 |
$ui-06 |
| --divider-color-light | $ui-05 |
$ui-07 |
| --body-color | $text-01 |
$inverse-02 |
| --body-color-inverse | $inverse-01 |
$text-01 |
| --body-color-negative | $inverse-01 |
$text-03 |
| --body-color-reverse | $inverse-01 |
$text-01 |
| --body-secondary-color | $text-03 |
$text-04 |
| --item-bg-inverse | $ui-07 |
$ui-01 |
| --link-color | $link-03 |
$link-01 |
| --link-color-dark | $link-02 |
$link-01 |
| --link-color-primary | $interactive-01 |
|
| --link-heading-color | $link-02 |
$link-01 |
| --icon-color | $ui-02 |
$ui-01 |
| --nav-active-bg | $ui-02 |
$inverse-01 |
| -nav-active-bg-hover | $ui-04 |
$ui-06 |
| --btn-default-color | $ui-02 |
$ui-01 |
| --btn-default-label | $text-01 |
$inverse-01 |
| --btn-primary-color | $interactive-01 |
|
| --btn-primary-label | $inverse-01 |
|
| --btn-secondary-color | $ui-02 |
$ui-01 |
| --btn-secondary-label | $inverse-01 |
$text-01 |
| --btn-secondary-color-hover | $hover-02 |
$hover-04 |
| --form-control-bg | $ui-01 |
$ui-01-10 |
| --form-control-hover | $ui-02 |
$ui-01 |
| --form-control-disabled | $disabled-02 |
$disabled-03 |
| --global-shadow | .3rem .3rem 1rem 0 #{rgba($ui-02, .2)} |
.3rem .3rem 1rem 0 #{rgba($ui-02, 1)} |
| --global-shadow-bottom | 0 .3rem .3rem 0 #{rgba($ui-02, .2)} |
0 .3rem .3rem 0 #{rgba($ui-02, 1)} |
| --kicker-bg | $ui-03 |
$ui-03 |
| --title-border | $inverse-01 |
|
| --title-text | $inverse-01 |
|
| --img-invert |
invert(0) |
invert(.8) |
Use the tokens below for the available typography to use on the web.
| Class | Feautured | Preview |
|---|---|---|
| u-heading-01 |
|
Heading-01 |
| u-heading-02 |
|
Heading-02 |
| u-heading-03 |
|
Heading-03 |
| u-heading-04 |
|
Heading-04 |
| u-heading-05 |
|
Heading-05 |
| u-heading-06 |
|
Heading-06 |
| u-heading-07 |
|
Heading-07 |
| u-heading-08 |
|
Heading-08 |
| u-heading-09 |
|
Heading-09 |
| u-heading-10 |
|
Heading-10 |
| u-nav-01 |
|
Nav-01 |
| u-nav-02 |
|
Nav-02 |
| u-nav-03 |
|
Nav-03 |
| u-nav-04 |
|
Nav-04 |
| u-nav-05 |
|
Nav-05 |
| u-nav-06 |
|
Nav-06 |
| u-title-01 |
|
Title-01 |
| u-title-02 |
|
Title-02 |
| u-title-03 |
|
Title-03 |
| u-title-04 |
|
Title-04 |
| u-title-05 |
|
Title-05 |
| u-title-06 |
|
Title-06 |
| u-title-07 |
|
Title-07 |
| u-title-08 |
|
Title-08 |
| u-label-01 |
|
Label-01 |
| u-label-02 |
|
Label-02 |
| u-label-03 |
|
Label-03 |
| u-label-04 |
|
Label-04 |
| u-label-05 |
|
Label-05 |
| u-label-06 |
|
Label-06 |
| u-label-07 |
|
Label-07 |
| u-label-08 |
|
Label-08 |
| u-label-09 |
|
Label-09 |
| u-label-11 |
|
Label-11 |
| u-body-01 |
|
Body-01 |
| u-body-02 |
|
Body-02 |
| u-body-03 |
|
Body-03 |
| u-body-04 |
|
Body-04 |
| u-body-05 |
|
Body-05 |
| u-caption-01 |
|
Caption-01 |
| u-caption-02 |
|
Caption-02 |
Use the tokens below for the available spacing units to use on the web.
| Spacings | Example | Values |
|---|---|---|
| xxxlarge | 64px (4rem) | |
| xxlarge | 56px (3.5rem) | |
| xlarge | 48px (3rem) | |
| large | 32px (2rem) | |
| medium | 24px (1.5rem) | |
| base | 16px (1rem) | |
| small | 12px (0.75rem) | |
| xsmall | 8px (0.5rem) | |
| xxsmall | 4px (0.25rem) | |
| xxxsmall | 2px (0.125rem) | |
| none | 0px |