Design Token Reference
Decisions
Variable follows a naming convention of: --{namespace}-{property}-{role}-{usage}. These have tailwind utilities, use these when building things yourself.
| Token Name | CSS Variable | Utility Class | Light | Dark |
|---|---|---|---|---|
accent-bg | --f-colors-accent-background | bg-fun-accent | ||
action-bg | --f-colors-action-background | bg-fun-action | ||
default-bd | --f-colors-default-border | border-fun-default | ||
default-fg | --f-colors-default-foreground | text-fun-default | ||
disabled-bd | --f-colors-disabled-border | border-fun-disabled | ||
disabled-bg | --f-colors-disabled-background | bg-fun-disabled | ||
disabled-fg | --f-colors-disabled-foreground | text-fun-disabled | ||
error-bd | --f-colors-error-border | border-fun-error | ||
error-fg | --f-colors-error-foreground | text-fun-error | ||
focus-bd | --f-colors-focus-border | border-fun-focus | ||
hover-bg | --f-colors-hover-background | bg-fun-hover | ||
inverse-bg | --f-colors-inverse-background | bg-fun-inverse | ||
inverse-fg | --f-colors-inverse-foreground | text-fun-inverse | ||
muted-bd | --f-colors-muted-border | border-fun-muted | ||
muted-fg | --f-colors-muted-foreground | text-fun-muted | ||
selected-bg | --f-colors-selected-background | bg-fun-selected | ||
success-fg | --f-colors-success-foreground | text-fun-success | ||
surface-bg | --f-colors-surface-background | bg-fun-surface | ||
warning-fg | --f-colors-warning-foreground | text-fun-warning |
Components
Variable follows a naming convention of: --{namespace}-{component}-{property}-{state}-{usage}
pane
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
pane/corner | --f-pane-sizes-corner | lg-corner | - |
pane/default-bg | --f-pane-colors-default-background | surface-bg | surface-bg |
pane/gap | --f-pane-sizes-gap | lg-gap | - |
pane/padding | --f-pane-sizes-padding | 21 | - |
page
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
page/default-bg | --f-page-colors-default-background | grey/75 | grey/900 |
page/gap | --f-page-sizes-gap | lg-gap | - |
button
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
button/corner | --f-button-sizes-corner | sm-corner | - |
button/danger/active-bg | --f-button-colors-danger-active-background | red/800 | red/300 |
button/danger/default-bg | --f-button-colors-danger-default-background | red/600 | red/500 |
button/danger/hover-bg | --f-button-colors-danger-hover-background | red/700 | red/400 |
button/danger/inverse-icon | --f-button-colors-danger-inverse-icon | inverse-fg | inverse-fg |
button/danger/inverse-txt | --f-button-colors-danger-inverse-text | inverse-fg | inverse-fg |
button/lg-gap | --f-button-sizes-lg-gap | 6 | - |
button/lg-height | --f-button-sizes-lg-height | lg-height | - |
button/lg-padding | --f-button-sizes-lg-padding | 11 | - |
button/md-gap | --f-button-sizes-md-gap | 5 | - |
button/md-height | --f-button-sizes-md-height | md-height | - |
button/md-padding | --f-button-sizes-md-padding | 10 | - |
button/primary/active-bg | --f-button-colors-primary-active-background | blue/800 | blue/300 |
button/primary/default-bg | --f-button-colors-primary-default-background | action-bg | action-bg |
button/primary/default-icon | --f-button-colors-primary-default-icon | action-bg | action-bg |
button/primary/default-txt | --f-button-colors-primary-default-text | action-bg | action-bg |
button/primary/hover-bg | --f-button-colors-primary-hover-background | blue/700 | blue/400 |
button/primary/inverse-icon | --f-button-colors-primary-inverse-icon | inverse-fg | inverse-fg |
button/primary/inverse-txt | --f-button-colors-primary-inverse-text | inverse-fg | inverse-fg |
button/secondary/active-bd | --f-button-colors-secondary-active-border | grey/800 | grey/100 |
button/secondary/active-bg | --f-button-colors-secondary-active-background | grey/200 | grey/700 |
button/secondary/default-bd | --f-button-colors-secondary-default-border | grey/600 | grey/300 |
button/secondary/default-bg | --f-button-colors-secondary-default-background | ||
button/secondary/default-icon | --f-button-colors-secondary-default-icon | muted-fg | muted-fg |
button/secondary/default-txt | --f-button-colors-secondary-default-text | default-fg | default-fg |
button/secondary/hover-bd | --f-button-colors-secondary-hover-border | grey/700 | grey/200 |
button/secondary/hover-bg | --f-button-colors-secondary-hover-background | grey/100 | grey/800 |
button/sm-gap | --f-button-sizes-sm-gap | 4 | - |
button/sm-height | --f-button-sizes-sm-height | sm-height | - |
button/sm-padding | --f-button-sizes-sm-padding | 0,5rem | - |
link
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
link/default-icon | --f-link-colors-default-icon | muted-fg | muted-fg |
link/default-txt | --f-link-colors-default-text | default-fg | default-fg |
link/hover-txt | --f-link-colors-hover-text | muted-fg | muted-fg |
link/underline-txt | --f-link-colors-underline-text | button/secondary/default-bd | button/secondary/default-bd |
input
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
input/active-bd | --f-input-colors-active-border | grey/700 | grey/300 |
input/corner | --f-input-sizes-corner | sm-corner | - |
input/default-bd | --f-input-colors-default-border | grey/500 | grey/500 |
input/default-bg | --f-input-colors-default-background | surface-bg | surface-bg |
input/default-icon | --f-input-colors-default-icon | default-fg | default-fg |
input/default-txt | --f-input-colors-default-text | default-fg | default-fg |
input/error-bd | --f-input-colors-error-border | red/600 | red/200 |
input/error-txt | --f-input-colors-error-text | red/600 | red/200 |
input/hover-bd | --f-input-colors-hover-border | grey/600 | grey/400 |
input/lg-gap | --f-input-sizes-lg-gap | 6 | - |
input/lg-height | --f-input-sizes-lg-height | 40 | - |
input/lg-padding | --f-input-sizes-lg-padding | 11 | - |
input/md-gap | --f-input-sizes-md-gap | 5 | - |
input/md-height | --f-input-sizes-md-height | 36 | - |
input/md-padding | --f-input-sizes-md-padding | 10 | - |
input/placeholder-txt | --f-input-colors-placeholder-text | disabled-fg | disabled-fg |
input/selected-bg | --f-input-colors-selected-background | selected-bg | selected-bg |
input/sm-gap | --f-input-sizes-sm-gap | 4 | - |
input/sm-height | --f-input-sizes-sm-height | 26 | - |
input/sm-padding | --f-input-sizes-sm-padding | 0,5rem | - |
input/success-bd | --f-input-colors-success-border | green/600 | green/100 |
input/success-txt | --f-input-colors-success-text | green/600 | green/100 |
selection
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
selection/active-bd | --f-selection-colors-active-border | blue/800 | blue/300 |
selection/default-bd | --f-selection-colors-default-border | grey/600 | grey/300 |
selection/default-bg | --f-selection-colors-default-background | white | grey/850 |
selection/default-icon | --f-selection-colors-default-icon | muted-fg | muted-fg |
selection/default-txt | --f-selection-colors-default-text | default-fg | default-fg |
selection/hover-bd | --f-selection-colors-hover-border | blue/700 | blue/400 |
selection/hover-bg | --f-selection-colors-hover-background | blue/700 | blue/400 |
selection/hover-txt | --f-selection-colors-hover-text | blue/700 | blue/400 |
selection/lg-height | --f-selection-sizes-lg-height | xs-height | - |
selection/md-height | --f-selection-sizes-md-height | xxs-height | - |
selection/selected-bd | --f-selection-colors-selected-border | action-bg | action-bg |
selection/selected-bg | --f-selection-colors-selected-background | action-bg | action-bg |
selection/selected-icon | --f-selection-colors-selected-icon | inverse-fg | inverse-fg |
filter
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
filter/active-bd | --f-filter-colors-active-border | grey/600 | grey/400 |
filter/active-bg | --f-filter-colors-active-background | grey/200 | grey/700 |
filter/corner | --f-filter-sizes-corner | xxl-corner | - |
filter/default-bd | --f-filter-colors-default-border | grey/400 | grey/600 |
filter/default-bg | --f-filter-colors-default-background | surface-bg | surface-bg |
filter/default-icon | --f-filter-colors-default-icon | muted-fg | muted-fg |
filter/default-txt | --f-filter-colors-default-text | grey/900 | grey/50 |
filter/hover-bd | --f-filter-colors-hover-border | grey/500 | grey/500 |
filter/hover-bg | --f-filter-colors-hover-background | hover-bg | hover-bg |
filter/md-gap | --f-filter-sizes-md-gap | xs-padding | - |
filter/md-height | --f-filter-sizes-md-height | sm-height | - |
filter/md-padding | --f-filter-sizes-md-padding | md-padding | - |
filter/placeholder-txt | --f-filter-colors-placeholder-text | disabled-fg | disabled-fg |
filter/selected-bg | --f-filter-colors-selected-background | selected-bg | selected-bg |
card
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
card/active-bd | --f-card-colors-active-border | blue/800 | blue/300 |
card/active-bg | --f-card-colors-active-background | selected-bg | blue/700 |
card/card-corner | --f-card-sizes-card-corner | md-corner | - |
card/default-bd | --f-card-colors-default-border | surface-bg | surface-bg |
card/default-bg | --f-card-colors-default-background | surface-bg | surface-bg |
card/default-icon | --f-card-colors-default-icon | muted-fg | muted-fg |
card/default-txt | --f-card-colors-default-text | default-fg | default-fg |
card/hover-bd | --f-card-colors-hover-border | action-bg | action-bg |
card/selected-bd | --f-card-colors-selected-border | action-bg | action-bg |
card/selected-bg | --f-card-colors-selected-background | blue/50 | blue/900 |
dropdown-menu
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
dropdown-menu/active-bd | --f-dropdown-menu-colors-active-border | blue/800 | blue/300 |
dropdown-menu/active-bg | --f-dropdown-menu-colors-active-background | blue/100 | blue/700 |
dropdown-menu/corner | --f-dropdown-menu-sizes-corner | sm-corner | - |
dropdown-menu/default-bd | --f-dropdown-menu-colors-default-border | muted-bd | muted-bd |
dropdown-menu/default-bg | --f-dropdown-menu-colors-default-background | surface-bg | surface-bg |
dropdown-menu/default-icon | --f-dropdown-menu-colors-default-icon | default-fg | default-fg |
dropdown-menu/default-txt | --f-dropdown-menu-colors-default-text | default-fg | default-fg |
dropdown-menu/hover-bd | --f-dropdown-menu-colors-hover-border | action-bg | action-bg |
dropdown-menu/hover-bg | --f-dropdown-menu-colors-hover-background | hover-bg | hover-bg |
dropdown-menu/padding | --f-dropdown-menu-sizes-padding | sm-padding | - |
dropdown-menu/selected-bd | --f-dropdown-menu-colors-selected-border | action-bg | action-bg |
dropdown-menu/selected-bg | --f-dropdown-menu-colors-selected-background | selected-bg | selected-bg |
tooltip
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
tooltip/corner | --f-tooltip-sizes-corner | sm-corner | - |
tooltip/default-bg | --f-tooltip-colors-default-background | inverse-bg | inverse-bg |
tooltip/default-txt | --f-tooltip-colors-default-text | inverse-fg | inverse-fg |
tooltip/padding | --f-tooltip-sizes-padding | sm-padding | - |
modal
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
modal/backdrop-bg | --f-modal-colors-backdrop-background | grey/900 | grey/700 |
modal/brand-bg | --f-modal-colors-brand-background | brand/900 | brand/400 |
modal/corner | --f-modal-sizes-corner | lg-corner | - |
modal/default-bg | --f-modal-colors-default-background | surface-bg | surface-bg |
modal/info-bg | --f-modal-colors-info-background | blue/800 | blue/100 |
modal/inverse-txt | --f-modal-colors-inverse-text | inverse-fg | inverse-fg |
modal/neutral-bg | --f-modal-colors-neutral-background | alert/neutral/bg | alert/neutral/bg |
modal/padding | --f-modal-sizes-padding | lg-padding | - |
alert
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
alert/corner | --f-alert-sizes-corner | sm-corner | - |
alert/danger/bd | --f-alert-colors-danger-border | red/300 | red/600 |
alert/danger/bg | --f-alert-colors-danger-background | red/100 | red/800 |
alert/danger/icon | --f-alert-colors-danger-icon | red/600 | red/100 |
alert/danger/txt | --f-alert-colors-danger-text | red/600 | red/100 |
alert/info/bd | --f-alert-colors-info-border | blue/300 | blue/600 |
alert/info/bg | --f-alert-colors-info-background | blue/100 | blue/800 |
alert/info/icon | --f-alert-colors-info-icon | blue/600 | blue/100 |
alert/info/txt | --f-alert-colors-info-text | blue/600 | blue/100 |
alert/neutral/bd | --f-alert-colors-neutral-border | grey/300 | grey/600 |
alert/neutral/bg | --f-alert-colors-neutral-background | grey/200 | grey/700 |
alert/neutral/icon | --f-alert-colors-neutral-icon | grey/700 | grey/100 |
alert/neutral/txt | --f-alert-colors-neutral-text | grey/700 | grey/100 |
alert/padding | --f-alert-sizes-padding | md-padding | - |
alert/success/bd | --f-alert-colors-success-border | green/300 | green/600 |
alert/success/bg | --f-alert-colors-success-background | green/100 | green/800 |
alert/success/icon | --f-alert-colors-success-icon | green/600 | green/100 |
alert/success/txt | --f-alert-colors-success-text | green/600 | green/100 |
alert/warning/bd | --f-alert-colors-warning-border | yellow/400 | yellow/600 |
alert/warning/bg | --f-alert-colors-warning-background | yellow/100 | yellow/800 |
alert/warning/icon | --f-alert-colors-warning-icon | yellow/700 | yellow/100 |
alert/warning/txt | --f-alert-colors-warning-text | yellow/700 | yellow/100 |
badge
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
badge/corner | --f-badge-sizes-corner | xxl-corner | - |
badge/danger/bd | --f-badge-colors-danger-border | red/300 | red/600 |
badge/danger/bg | --f-badge-colors-danger-background | red/100 | red/800 |
badge/danger/icon | --f-badge-colors-danger-icon | red/600 | red/200 |
badge/danger/txt | --f-badge-colors-danger-text | red/600 | red/200 |
badge/height | --f-badge-sizes-height | xs-height | - |
badge/info/bd | --f-badge-colors-info-border | blue/300 | blue/600 |
badge/info/bg | --f-badge-colors-info-background | blue/100 | blue/800 |
badge/info/icon | --f-badge-colors-info-icon | blue/600 | blue/100 |
badge/info/txt | --f-badge-colors-info-text | blue/600 | blue/100 |
badge/neutral/bd | --f-badge-colors-neutral-border | grey/300 | grey/600 |
badge/neutral/bg | --f-badge-colors-neutral-background | grey/200 | grey/700 |
badge/neutral/icon | --f-badge-colors-neutral-icon | grey/700 | grey/100 |
badge/neutral/txt | --f-badge-colors-neutral-text | grey/700 | grey/100 |
badge/success/bd | --f-badge-colors-success-border | green/300 | green/600 |
badge/success/bg | --f-badge-colors-success-background | green/100 | green/800 |
badge/success/icon | --f-badge-colors-success-icon | green/600 | green/200 |
badge/success/txt | --f-badge-colors-success-text | green/600 | green/200 |
badge/upsell/bd | --f-badge-colors-upsell-border | pink/200 | pink/600 |
badge/upsell/bg | --f-badge-colors-upsell-background | pink/300 | pink/700 |
badge/upsell/icon | --f-badge-colors-upsell-icon | pink/900 | pink/100 |
badge/upsell/txt | --f-badge-colors-upsell-text | pink/900 | pink/100 |
badge/warning/bd | --f-badge-colors-warning-border | yellow/400 | yellow/600 |
badge/warning/bg | --f-badge-colors-warning-background | yellow/100 | yellow/800 |
badge/warning/icon | --f-badge-colors-warning-icon | yellow/600 | yellow/200 |
badge/warning/txt | --f-badge-colors-warning-text | yellow/600 | yellow/200 |
tag
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
tag/corner | --f-tag-sizes-corner | 0,1rem | - |
tag/info/bd | --f-tag-colors-info-border | blue/300 | blue/600 |
tag/info/bg | --f-tag-colors-info-background | blue/100 | blue/800 |
tag/info/icon | --f-tag-colors-info-icon | blue/600 | blue/100 |
tag/info/txt | --f-tag-colors-info-text | blue/600 | blue/100 |
tag/lg-height | --f-tag-sizes-lg-height | sm-height | - |
tag/md-height | --f-tag-sizes-md-height | xs-height | - |
tag/neutral/bd | --f-tag-colors-neutral-border | grey/300 | grey/600 |
tag/neutral/bg | --f-tag-colors-neutral-background | grey/200 | grey/700 |
tag/neutral/icon | --f-tag-colors-neutral-icon | grey/700 | grey/100 |
tag/neutral/txt | --f-tag-colors-neutral-text | grey/700 | grey/100 |
tag/padding | --f-tag-sizes-padding | 0,25rem | - |
tag/sm-height | --f-tag-sizes-sm-height | xxs-height | - |
tag/upsell/bd | --f-tag-colors-upsell-border | pink/200 | pink/600 |
tag/upsell/bg | --f-tag-colors-upsell-background | pink/300 | pink/700 |
tag/upsell/icon | --f-tag-colors-upsell-icon | pink/900 | pink/100 |
tag/upsell/txt | --f-tag-colors-upsell-text | pink/900 | pink/100 |
illustration
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
illustration/accent-1-bg | --f-illustration-colors-accent-1-background | ||
illustration/accent-2-bg | --f-illustration-colors-accent-2-background | ||
illustration/default-icon | --f-illustration-colors-default-icon | brand/900 | brand/900 |
illustration/default-txt | --f-illustration-colors-default-text | brand/900 | brand/900 |
illustration/inverse-txt | --f-illustration-colors-inverse-text | brand/100 | brand/100 |
illustration/layer-1-bg | --f-illustration-colors-layer-1-background | brand/900 | brand/900 |
illustration/layer-2-bg | --f-illustration-colors-layer-2-background | brand/100 | brand/100 |
illustration/layer-3-bg | --f-illustration-colors-layer-3-background | surface-bg | surface-bg |
illustration/muted-txt | --f-illustration-colors-muted-text | brand/300 | brand/300 |
graph
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
graph/0/dark-bg | --f-graph-colors-0-dark-background | ||
graph/0/light-bg | --f-graph-colors-0-light-background | ||
graph/1/dark-bg | --f-graph-colors-1-dark-background | ||
graph/1/light-bg | --f-graph-colors-1-light-background | ||
graph/10/dark-bg | --f-graph-colors-10-dark-background | ||
graph/10/light-bg | --f-graph-colors-10-light-background | ||
graph/11/dark-bg | --f-graph-colors-11-dark-background | ||
graph/11/light-bg | --f-graph-colors-11-light-background | ||
graph/2/dark-bg | --f-graph-colors-2-dark-background | ||
graph/2/light-bg | --f-graph-colors-2-light-background | ||
graph/3/dark-bg | --f-graph-colors-3-dark-background | ||
graph/3/light-bg | --f-graph-colors-3-light-background | ||
graph/4/dark-bg | --f-graph-colors-4-dark-background | ||
graph/4/light-bg | --f-graph-colors-4-light-background | ||
graph/5/dark-bg | --f-graph-colors-5-dark-background | ||
graph/5/light-bg | --f-graph-colors-5-light-background | ||
graph/6/dark-bg | --f-graph-colors-6-dark-background | ||
graph/6/light-bg | --f-graph-colors-6-light-background | ||
graph/7/dark-bg | --f-graph-colors-7-dark-background | ||
graph/7/light-bg | --f-graph-colors-7-light-background | ||
graph/8/dark-bg | --f-graph-colors-8-dark-background | ||
graph/8/light-bg | --f-graph-colors-8-light-background | ||
graph/9/dark-bg | --f-graph-colors-9-dark-background | ||
graph/9/light-bg | --f-graph-colors-9-light-background |
wizard
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
wizard/complete-bg | --f-wizard-colors-complete-background | green/600 | green/300 |
wizard/complete-txt | --f-wizard-colors-complete-text | default-fg | default-fg |
wizard/current-bg | --f-wizard-colors-current-background | accent-bg | accent-bg |
wizard/current-txt | --f-wizard-colors-current-text | default-fg | default-fg |
wizard/gap | --f-wizard-sizes-gap | lg-gap | - |
wizard/next-bg | --f-wizard-colors-next-background | disabled-bg | disabled-bg |
wizard/next-txt | --f-wizard-colors-next-text | disabled-fg | disabled-fg |
nav
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
nav/active-bg | --f-nav-colors-active-background | page/default-bg | grey/800 |
nav/active-icon | --f-nav-colors-active-icon | Secondary/Funnel Orange | Secondary/Funnel Orange |
nav/active-txt | --f-nav-colors-active-text | default-fg | default-fg |
nav/default-bg | --f-nav-colors-default-background | pane/default-bg | pane/default-bg |
nav/default-icon | --f-nav-colors-default-icon | muted-fg | muted-fg |
nav/default-txt | --f-nav-colors-default-text | alert/neutral/txt | alert/neutral/txt |
nav/gap | --f-nav-sizes-gap | md-gap | - |
nav/hover-bg | --f-nav-colors-hover-background | button/secondary/hover-bg | button/secondary/hover-bg |
nav/hover-icon | --f-nav-colors-hover-icon | default-fg | default-fg |
nav/hover-txt | --f-nav-colors-hover-text | default-fg | default-fg |
nav/logo-bg | --f-nav-colors-logo-background | brand/900 | white |
nav/padding | --f-nav-sizes-padding | 10 | - |
table
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
table/cell-accent-default-bg | --f-table-colors-cell-accent-default-background | accent-bg | accent-bg |
table/cell-accent-hover-bg | --f-table-colors-cell-accent-hover-background | accent-bg | accent-bg |
table/cell-body-default-bg | --f-table-colors-cell-body-default-background | surface-bg | surface-bg |
table/cell-body-hover-bg | --f-table-colors-cell-body-hover-background | selected-bg | selected-bg |
table/cell-default-txt | --f-table-colors-cell-default-text | default-fg | default-fg |
table/cell-header-default-bg | --f-table-colors-cell-header-default-background | grey/50 | grey/800 |
table/cell-header-hover-bg | --f-table-colors-cell-header-hover-background | hover-bg | hover-bg |
table/cell-header-txt | --f-table-colors-cell-header-text | muted-fg | muted-fg |
table/cell-md-height | --f-table-sizes-cell-md-height | lg-height | - |
table/cell-muted-txt | --f-table-colors-cell-muted-text | muted-fg | muted-fg |
table/cell-padding | --f-table-sizes-cell-padding | 10.5 | - |
table/cell-sm-height | --f-table-sizes-cell-sm-height | md-height | - |
table/corner | --f-table-sizes-corner | md-corner | - |
table/default-bd | --f-table-colors-default-border | default-bd | default-bd |
table/row-hover-bg | --f-table-colors-row-hover-background | blue/50 | blue/900 |
styles
| Token Name | CSS Variable | Value / Light | Dark |
|---|---|---|---|
styles/body-lg/default-weight | --f-body-lg-fonts-default-weight | weight/body | - |
styles/body-lg/family | --f-body-lg-fonts-family | family/body | - |
styles/body-lg/height | --f-body-lg-fonts-height | height/lg | - |
styles/body-lg/highlight-weight | --f-body-lg-fonts-highlight-weight | weight/highlight | - |
styles/body-lg/size | --f-body-lg-fonts-size | size/lg | - |
styles/body-md/bottom-margin | --f-body-md-fonts-bottom-margin | sm-padding | - |
styles/body-md/default-weight | --f-body-md-fonts-default-weight | weight/body | - |
styles/body-md/family | --f-body-md-fonts-family | family/body | - |
styles/body-md/height | --f-body-md-fonts-height | height/md | - |
styles/body-md/highlight-weight | --f-body-md-fonts-highlight-weight | weight/highlight | - |
styles/body-md/size | --f-body-md-fonts-size | size/md | - |
styles/body-sm/default-weight | --f-body-sm-fonts-default-weight | weight/body | - |
styles/body-sm/family | --f-body-sm-fonts-family | family/body | - |
styles/body-sm/height | --f-body-sm-fonts-height | height/sm | - |
styles/body-sm/highlight-weight | --f-body-sm-fonts-highlight-weight | weight/highlight | - |
styles/body-sm/size | --f-body-sm-fonts-size | size/sm | - |
styles/body-xs/default-weight | --f-body-xs-fonts-default-weight | weight/body | - |
styles/body-xs/family | --f-body-xs-fonts-family | family/body | - |
styles/body-xs/height | --f-body-xs-fonts-height | height/xs | - |
styles/body-xs/highlight-weight | --f-body-xs-fonts-highlight-weight | weight/highlight | - |
styles/body-xs/size | --f-body-xs-fonts-size | size/xs | - |
styles/header-h1/bottom-margin | --f-header-h1-fonts-bottom-margin | xs-padding | - |
styles/header-h1/family | --f-header-h1-fonts-family | family/header-primary | - |
styles/header-h1/height | --f-header-h1-fonts-height | height/4xl | - |
styles/header-h1/size | --f-header-h1-fonts-size | size/4xl | - |
styles/header-h1/top-margin | --f-header-h1-fonts-top-margin | xs-padding | - |
styles/header-h1/weight | --f-header-h1-fonts-weight | weight/header-primary | - |
styles/header-h2/bottom-margin | --f-header-h2-fonts-bottom-margin | md-padding | - |
styles/header-h2/family | --f-header-h2-fonts-family | family/header-primary | - |
styles/header-h2/height | --f-header-h2-fonts-height | height/3xl | - |
styles/header-h2/size | --f-header-h2-fonts-size | size/3xl | - |
styles/header-h2/top-margin | --f-header-h2-fonts-top-margin | lg-padding | - |
styles/header-h2/weight | --f-header-h2-fonts-weight | weight/header-primary | - |
styles/header-h3/bottom-margin | --f-header-h3-fonts-bottom-margin | sm-padding | - |
styles/header-h3/family | --f-header-h3-fonts-family | family/header-secondary | - |
styles/header-h3/height | --f-header-h3-fonts-height | height/2xl | - |
styles/header-h3/size | --f-header-h3-fonts-size | size/2xl | - |
styles/header-h3/top-margin | --f-header-h3-fonts-top-margin | md-padding | - |
styles/header-h3/weight | --f-header-h3-fonts-weight | weight/header-secondary | - |
styles/header-h4/bottom-margin | --f-header-h4-fonts-bottom-margin | sm-padding | - |
styles/header-h4/family | --f-header-h4-fonts-family | family/header-secondary | - |
styles/header-h4/height | --f-header-h4-fonts-height | height/xl | - |
styles/header-h4/size | --f-header-h4-fonts-size | size/xl | - |
styles/header-h4/top-margin | --f-header-h4-fonts-top-margin | md-padding | - |
styles/header-h4/weight | --f-header-h4-fonts-weight | weight/header-secondary | - |
styles/header-h5/bottom-margin | --f-header-h5-fonts-bottom-margin | sm-padding | - |
styles/header-h5/family | --f-header-h5-fonts-family | family/header-secondary | - |
styles/header-h5/height | --f-header-h5-fonts-height | height/lg | - |
styles/header-h5/size | --f-header-h5-fonts-size | size/lg | - |
styles/header-h5/top-margin | --f-header-h5-fonts-top-margin | md-padding | - |
styles/header-h5/weight | --f-header-h5-fonts-weight | weight/header-secondary | - |
Primitives
Variable follows a naming convention of: -{namespace}-{property}-{signifier01}-{signifier02}
Colours
| Token Name | CSS Variable | Value | Description |
|---|---|---|---|
blue/100 | --f-colors-blue-100 | #e0f2fe | |
blue/200 | --f-colors-blue-200 | #bae6fd | |
blue/300 | --f-colors-blue-300 | #7cd3fd | |
blue/400 | --f-colors-blue-400 | #37bff9 | |
blue/50 | --f-colors-blue-50 | #f0f9ff | |
blue/500 | --f-colors-blue-500 | #1cb1f3 | |
blue/600 | --f-colors-blue-600 | #0185c8 | |
blue/700 | --f-colors-blue-700 | #026aa2 | |
blue/800 | --f-colors-blue-800 | #065986 | |
blue/900 | --f-colors-blue-900 | #0b4a6f | |
brand/100 | --f-colors-brand-100 | #ecf2f0 | |
brand/200 | --f-colors-brand-200 | #d1d9d6 | |
brand/300 | --f-colors-brand-300 | #bac5c2 | |
brand/400 | --f-colors-brand-400 | #a2b1ad | |
brand/50 | --f-colors-brand-50 | #f2f5f5 | |
brand/500 | --f-colors-brand-500 | #8a9e99 | |
brand/600 | --f-colors-brand-600 | #738b85 | |
brand/700 | --f-colors-brand-700 | #5c7870 | |
brand/800 | --f-colors-brand-800 | #44645c | |
brand/900 | --f-colors-brand-900 | #013f33 | |
green/100 | --f-colors-green-100 | #d2eed9 | |
green/200 | --f-colors-green-200 | #a6deb4 | |
green/300 | --f-colors-green-300 | #79cd8e | |
green/400 | --f-colors-green-400 | #4dbd69 | |
green/50 | --f-colors-green-50 | #e9f7ec | |
green/500 | --f-colors-green-500 | #20ac43 | |
green/600 | --f-colors-green-600 | #1a8a36 | |
green/700 | --f-colors-green-700 | #136728 | |
green/800 | --f-colors-green-800 | #0d451b | |
green/900 | --f-colors-green-900 | #06220d | |
grey/100 | --f-colors-grey-100 | #f0f0f0 | |
grey/200 | --f-colors-grey-200 | #e9e9e9 | |
grey/300 | --f-colors-grey-300 | #dbdbdb | |
grey/400 | --f-colors-grey-400 | #cccccc | |
grey/50 | --f-colors-grey-50 | #f8f8f8 | |
grey/500 | --f-colors-grey-500 | #b6b6b6 | |
grey/600 | --f-colors-grey-600 | #7f7f7f | |
grey/700 | --f-colors-grey-700 | #5b5b5b | |
grey/75 | --f-colors-grey-75 | #f6f6f6 | |
grey/800 | --f-colors-grey-800 | #373737 | |
grey/850 | --f-colors-grey-850 | #252525 | |
grey/900 | --f-colors-grey-900 | #121212 | |
pink/100 | --f-colors-pink-100 | #fff4fb | |
pink/200 | --f-colors-pink-200 | #ffeaf8 | |
pink/300 | --f-colors-pink-300 | #ffd4f2 | |
pink/400 | --f-colors-pink-400 | #ffa8e4 | |
pink/50 | --f-colors-pink-50 | #fff8fc | |
pink/500 | --f-colors-pink-500 | #ff94e4 | |
pink/600 | --f-colors-pink-600 | #cd79b8 | |
pink/700 | --f-colors-pink-700 | #a45c92 | |
pink/800 | --f-colors-pink-800 | #824e75 | |
pink/900 | --f-colors-pink-900 | #513c49 | |
red/100 | --f-colors-red-100 | #ffd7dc | |
red/200 | --f-colors-red-200 | #ffafb9 | |
red/300 | --f-colors-red-300 | #ff8797 | |
red/400 | --f-colors-red-400 | #ff5f74 | |
red/50 | --f-colors-red-50 | #ffebee | |
red/500 | --f-colors-red-500 | #ff3751 | |
red/600 | --f-colors-red-600 | #cc2c41 | |
red/700 | --f-colors-red-700 | #992131 | |
red/800 | --f-colors-red-800 | #661620 | |
red/900 | --f-colors-red-900 | #330b10 | |
white | --f-colors-white | #ffffff | |
yellow/100 | --f-colors-yellow-100 | #fbf4cc | |
yellow/200 | --f-colors-yellow-200 | #f7e999 | |
yellow/300 | --f-colors-yellow-300 | #f2df66 | |
yellow/400 | --f-colors-yellow-400 | #eed433 | |
yellow/50 | --f-colors-yellow-50 | #fdfae6 | |
yellow/500 | --f-colors-yellow-500 | #eac900 | |
yellow/600 | --f-colors-yellow-600 | #bba100 | |
yellow/700 | --f-colors-yellow-700 | #8c7900 | |
yellow/800 | --f-colors-yellow-800 | #5e5000 | |
yellow/900 | --f-colors-yellow-900 | #2f2800 |
Sizes
| Token Name | CSS Variable | Value | Description |
|---|---|---|---|
lg-corner | --f-sizes-lg-corner | 1rem | |
lg-gap | --f-sizes-lg-gap | 1rem | |
lg-height | --f-sizes-lg-height | ||
lg-padding | --f-sizes-lg-padding | ||
md-corner | --f-sizes-md-corner | 0.5rem | |
md-gap | --f-sizes-md-gap | 0.5rem | |
md-height | --f-sizes-md-height | ||
md-padding | --f-sizes-md-padding | 1rem | |
sm-corner | --f-sizes-sm-corner | 0.25rem | |
sm-gap | --f-sizes-sm-gap | 0.25rem | |
sm-height | --f-sizes-sm-height | ||
sm-padding | --f-sizes-sm-padding | 0.5rem | |
xl-gap | --f-sizes-xl-gap | ||
xs-height | --f-sizes-xs-height | ||
xs-padding | --f-sizes-xs-padding | 0.25rem | |
xxl-corner | --f-sizes-xxl-corner | ||
xxs-height | --f-sizes-xxs-height | 1rem |
Fonts
| Token Name | CSS Variable | Value | Description |
|---|---|---|---|
family/body | --f-fonts-family-body | ||
family/header-primary | --f-fonts-family-header-primary | ||
family/header-secondary | --f-fonts-family-header-secondary | ||
height/2xl | --f-fonts-height-2xl | 2rem | |
height/3xl | --f-fonts-height-3xl | 2,25rem | |
height/4xl | --f-fonts-height-4xl | 2,5rem | |
height/5xl | --f-fonts-height-5xl | 3rem | |
height/lg | --f-fonts-height-lg | 1,75rem | |
height/md | --f-fonts-height-md | 1,5rem | |
height/sm | --f-fonts-height-sm | 1,25rem | |
height/xl | --f-fonts-height-xl | 1,75rem | |
height/xs | --f-fonts-height-xs | 1rem | |
size/2xl | --f-fonts-size-2xl | 1,5rem | |
size/3xl | --f-fonts-size-3xl | 1,875rem | |
size/4xl | --f-fonts-size-4xl | 2,25rem | |
size/5xl | --f-fonts-size-5xl | 3rem | |
size/lg | --f-fonts-size-lg | 1,125rem | |
size/md | --f-fonts-size-md | 1rem | |
size/sm | --f-fonts-size-sm | 0,875rem | |
size/xl | --f-fonts-size-xl | 1,25rem | |
size/xs | --f-fonts-size-xs | 0.75rem | |
weight/body | --f-fonts-weight-body | ||
weight/header-primary | --f-fonts-weight-header-primary | ||
weight/header-secondary | --f-fonts-weight-header-secondary | ||
weight/highlight | --f-fonts-weight-highlight | ||
weight/label | --f-fonts-weight-label |
