Foundations
Tokens
670 named values. Almost every colour, space and size in Rost comes from one of these. The few that don't are listed in Token coverage.
The names are the CSS variables, exactly as code uses them, from tokens/tokens.css. Every Figma variable is here, in the dark theme, plus a few of Rost's own: the effects, the shadow and the hero height. The light values are in tokens/tokens.json, but nothing uses them yet.
Surfaces and text
| Token | Value |
|---|---|
| --non-interactive-background-brand | #004c19 |
| --non-interactive-background-contrast | #ededed |
| --non-interactive-background-negative-base | #e93120 |
| --non-interactive-background-negative-dark | #fee6e1 |
| --non-interactive-background-negative-light | #48050c |
| --non-interactive-background-positive-base | #00d669 |
| --non-interactive-background-positive-dark | #b6ffda |
| --non-interactive-background-positive-light | #004c19 |
| --non-interactive-background-primary | #060805 |
| --non-interactive-background-secondary | #171717 |
| --non-interactive-background-tertiary | #3a3a3a |
| --non-interactive-background-warning-base | #fda50d |
| --non-interactive-background-warning-dark | #fef8e1 |
| --non-interactive-background-warning-light | #492604 |
| --non-interactive-foreground-contrast | #060805 |
| --non-interactive-foreground-negative-base | #e93120 |
| --non-interactive-foreground-negative-dark | #fee6e1 |
| --non-interactive-foreground-negative-light | #48050c |
| --non-interactive-foreground-positive-base | #00d669 |
| --non-interactive-foreground-positive-dark | #b6ffda |
| --non-interactive-foreground-positive-light | #004c19 |
| --non-interactive-foreground-primary | #ededed |
| --non-interactive-foreground-quadruple | #3a3a3a |
| --non-interactive-foreground-quinary | #282828 |
| --non-interactive-foreground-secondary | #d3d9d5 |
| --non-interactive-foreground-tertiary | #999999 |
| --non-interactive-foreground-warning-base | #fda50d |
| --non-interactive-foreground-warning-dark | #fef8e1 |
| --non-interactive-foreground-warning-light | #492604 |
Actions
| Token | Value |
|---|---|
| --actions-borderless-default-icon | #00d669 |
| --actions-borderless-default-label | #d3d9d5 |
| --actions-borderless-default-sub-label | #999999 |
| --actions-borderless-disabled-icon | #00d669 |
| --actions-borderless-disabled-label | #d3d9d5 |
| --actions-borderless-disabled-sub-label | #999999 |
| --actions-borderless-focus-focus-ring | #999999 |
| --actions-borderless-focus-icon | #00d669 |
| --actions-borderless-focus-label | #d3d9d5 |
| --actions-borderless-focus-sub-label | #999999 |
| --actions-borderless-hover-background | #060805 |
| --actions-borderless-hover-icon | #00b450 |
| --actions-borderless-hover-label | #ededed |
| --actions-borderless-hover-sub-label | #d3d9d5 |
| --actions-borderless-loading-label | #d3d9d5 |
| --actions-borderless-pressed-background | #454545 |
| --actions-borderless-pressed-icon | #00d669 |
| --actions-borderless-pressed-label | #d3d9d5 |
| --actions-borderless-pressed-sub-label | #c2c7c3 |
| --actions-primary-default-background | #00d669 |
| --actions-primary-default-icon | #3a3a3a |
| --actions-primary-default-label | #060805 |
| --actions-primary-default-outline | #edededa3 |
| --actions-primary-default-sub-label | #3a3a3a |
| --actions-primary-disabled-background | #00d669 |
| --actions-primary-disabled-icon | #3a3a3a |
| --actions-primary-disabled-label | #060805 |
| --actions-primary-disabled-outline | #edededa3 |
| --actions-primary-disabled-sub-label | #3a3a3a |
| --actions-primary-focus-background | #00d669 |
| --actions-primary-focus-focus-ring | #b6ffda |
| --actions-primary-focus-icon | #3a3a3a |
| --actions-primary-focus-label | #060805 |
| --actions-primary-focus-outline | #edededa3 |
| --actions-primary-focus-sub-label | #3a3a3a |
| --actions-primary-hover-background | #00b450 |
| --actions-primary-hover-icon | #3a3a3a |
| --actions-primary-hover-label | #060805 |
| --actions-primary-hover-outline | #edededa3 |
| --actions-primary-hover-sub-label | #3a3a3a |
| --actions-primary-loading-background | #00d669 |
| --actions-primary-loading-label | #060805 |
| --actions-primary-loading-outline | #edededa3 |
| --actions-primary-pressed-background | #00913a |
| --actions-primary-pressed-icon | #3a3a3a |
| --actions-primary-pressed-label | #060805 |
| --actions-primary-pressed-outline | #edededa3 |
| --actions-primary-pressed-sub-label | #3a3a3a |
| --actions-secondary-negative-default-background | #3a3a3a |
| --actions-secondary-negative-default-icon | #e93120 |
| --actions-secondary-negative-default-label | #d3d9d5 |
| --actions-secondary-negative-default-outline | #48050c |
| --actions-secondary-negative-default-sub-label | #999999 |
| --actions-secondary-negative-disabled-background | #3a3a3a |
| --actions-secondary-negative-disabled-icon | #e93120 |
| --actions-secondary-negative-disabled-label | #d3d9d5 |
| --actions-secondary-negative-disabled-outline | #48050c |
| --actions-secondary-negative-disabled-sub-label | #999999 |
| --actions-secondary-negative-focus-background | #3a3a3a |
| --actions-secondary-negative-focus-focus-ring | #999999 |
| --actions-secondary-negative-focus-icon | #e93120 |
| --actions-secondary-negative-focus-label | #d3d9d5 |
| --actions-secondary-negative-focus-outline | #48050c |
| --actions-secondary-negative-focus-sub-label | #999999 |
| --actions-secondary-negative-hover-background | #747573 |
| --actions-secondary-negative-hover-icon | #ae1b13 |
| --actions-secondary-negative-hover-label | #ededed |
| --actions-secondary-negative-hover-outline | #5e080d |
| --actions-secondary-negative-hover-sub-label | #d3d9d5 |
| --actions-secondary-negative-loading-background | #3a3a3a |
| --actions-secondary-negative-loading-label | #d3d9d5 |
| --actions-secondary-negative-loading-outline | #48050c |
| --actions-secondary-negative-pressed-background | #999999 |
| --actions-secondary-negative-pressed-icon | #e93120 |
| --actions-secondary-negative-pressed-label | #d3d9d5 |
| --actions-secondary-negative-pressed-outline | #740b0d |
| --actions-secondary-negative-pressed-sub-label | #c2c7c3 |
| --actions-secondary-positive-default-background | #3a3a3a |
| --actions-secondary-positive-default-icon | #31d84d |
| --actions-secondary-positive-default-label | #d3d9d5 |
| --actions-secondary-positive-default-outline | #064608 |
| --actions-secondary-positive-default-sub-label | #999999 |
| --actions-secondary-positive-disabled-background | #3a3a3a |
| --actions-secondary-positive-disabled-icon | #31d84d |
| --actions-secondary-positive-disabled-label | #d3d9d5 |
| --actions-secondary-positive-disabled-outline | #064608 |
| --actions-secondary-positive-disabled-sub-label | #999999 |
| --actions-secondary-positive-focus-background | #3a3a3a |
| --actions-secondary-positive-focus-focus-ring | #999999 |
| --actions-secondary-positive-focus-icon | #31d84d |
| --actions-secondary-positive-focus-label | #d3d9d5 |
| --actions-secondary-positive-focus-outline | #064608 |
| --actions-secondary-positive-focus-sub-label | #999999 |
| --actions-secondary-positive-hover-background | #747573 |
| --actions-secondary-positive-hover-icon | #19a92c |
| --actions-secondary-positive-hover-label | #ededed |
| --actions-secondary-positive-hover-outline | #0a5c10 |
| --actions-secondary-positive-hover-sub-label | #d3d9d5 |
| --actions-secondary-positive-loading-background | #3a3a3a |
| --actions-secondary-positive-loading-label | #d3d9d5 |
| --actions-secondary-positive-loading-outline | #064608 |
| --actions-secondary-positive-pressed-background | #999999 |
| --actions-secondary-positive-pressed-icon | #31d84d |
| --actions-secondary-positive-pressed-label | #d3d9d5 |
| --actions-secondary-positive-pressed-outline | #0e7118 |
| --actions-secondary-positive-pressed-sub-label | #c2c7c3 |
| --actions-secondary-regular-default-background | #3a3a3a |
| --actions-secondary-regular-default-icon | #00d669 |
| --actions-secondary-regular-default-label | #d3d9d5 |
| --actions-secondary-regular-default-outline | #ededed |
| --actions-secondary-regular-default-sub-label | #999999 |
| --actions-secondary-regular-disabled-background | #3a3a3a |
| --actions-secondary-regular-disabled-icon | #00d669 |
| --actions-secondary-regular-disabled-label | #d3d9d5 |
| --actions-secondary-regular-disabled-outline | #ededed |
| --actions-secondary-regular-disabled-sub-label | #999999 |
| --actions-secondary-regular-focus-background | #3a3a3a |
| --actions-secondary-regular-focus-focus-ring | #999999 |
| --actions-secondary-regular-focus-icon | #00d669 |
| --actions-secondary-regular-focus-label | #d3d9d5 |
| --actions-secondary-regular-focus-outline | #ededed |
| --actions-secondary-regular-focus-sub-label | #999999 |
| --actions-secondary-regular-hover-background | #747573 |
| --actions-secondary-regular-hover-icon | #00b450 |
| --actions-secondary-regular-hover-label | #ededed |
| --actions-secondary-regular-hover-outline | #ededed |
| --actions-secondary-regular-hover-sub-label | #d3d9d5 |
| --actions-secondary-regular-loading-background | #3a3a3a |
| --actions-secondary-regular-loading-label | #d3d9d5 |
| --actions-secondary-regular-loading-outline | #ededed |
| --actions-secondary-regular-pressed-background | #999999 |
| --actions-secondary-regular-pressed-icon | #00d669 |
| --actions-secondary-regular-pressed-label | #d3d9d5 |
| --actions-secondary-regular-pressed-outline | #ededed |
| --actions-secondary-regular-pressed-sub-label | #c2c7c3 |
| --actions-secondary-warning-default-background | #3a3a3a |
| --actions-secondary-warning-default-icon | #fda50d |
| --actions-secondary-warning-default-label | #d3d9d5 |
| --actions-secondary-warning-default-outline | #492604 |
| --actions-secondary-warning-default-sub-label | #999999 |
| --actions-secondary-warning-disabled-background | #3a3a3a |
| --actions-secondary-warning-disabled-icon | #fda50d |
| --actions-secondary-warning-disabled-label | #d3d9d5 |
| --actions-secondary-warning-disabled-outline | #492604 |
| --actions-secondary-warning-disabled-sub-label | #999999 |
| --actions-secondary-warning-focus-background | #3a3a3a |
| --actions-secondary-warning-focus-focus-ring | #999999 |
| --actions-secondary-warning-focus-icon | #fda50d |
| --actions-secondary-warning-focus-label | #d3d9d5 |
| --actions-secondary-warning-focus-outline | #492604 |
| --actions-secondary-warning-focus-sub-label | #999999 |
| --actions-secondary-warning-hover-background | #747573 |
| --actions-secondary-warning-hover-icon | #bd7305 |
| --actions-secondary-warning-hover-label | #ededed |
| --actions-secondary-warning-hover-outline | #613605 |
| --actions-secondary-warning-hover-sub-label | #d3d9d5 |
| --actions-secondary-warning-loading-background | #3a3a3a |
| --actions-secondary-warning-loading-label | #d3d9d5 |
| --actions-secondary-warning-loading-outline | #492604 |
| --actions-secondary-warning-pressed-background | #999999 |
| --actions-secondary-warning-pressed-icon | #fda50d |
| --actions-secondary-warning-pressed-label | #d3d9d5 |
| --actions-secondary-warning-pressed-outline | #7a4805 |
| --actions-secondary-warning-pressed-sub-label | #c2c7c3 |
| --actions-tertiary-default-icon | #00d669 |
| --actions-tertiary-default-label | #d3d9d5 |
| --actions-tertiary-default-sub-label | #999999 |
| --actions-tertiary-disabled-icon | #00d669 |
| --actions-tertiary-disabled-label | #d3d9d5 |
| --actions-tertiary-disabled-sub-label | #999999 |
| --actions-tertiary-focus-focus-ring | #999999 |
| --actions-tertiary-focus-icon | #00d669 |
| --actions-tertiary-focus-label | #d3d9d5 |
| --actions-tertiary-focus-sub-label | #999999 |
| --actions-tertiary-hover-background | #060805 |
| --actions-tertiary-hover-icon | #00b450 |
| --actions-tertiary-hover-label | #ededed |
| --actions-tertiary-hover-sub-label | #d3d9d5 |
| --actions-tertiary-loading-label | #d3d9d5 |
| --actions-tertiary-pressed-background | #454545 |
| --actions-tertiary-pressed-icon | #00d669 |
| --actions-tertiary-pressed-label | #d3d9d5 |
| --actions-tertiary-pressed-sub-label | #c2c7c3 |
Inputs
| Token | Value |
|---|---|
| --input-negative-default-background | #060805 |
| --input-negative-default-icon | #e93120 |
| --input-negative-default-label | #e93120 |
| --input-negative-default-outline | #f2705f |
| --input-negative-default-placeholder | #999999 |
| --input-negative-default-supportive | #e93120 |
| --input-negative-focus-background | #060805 |
| --input-negative-focus-focus-ring | #00d669 |
| --input-negative-focus-icon | #e93120 |
| --input-negative-focus-label | #e93120 |
| --input-negative-focus-outline | #f2705f |
| --input-negative-focus-placeholder | #c2c7c3 |
| --input-negative-focus-supportive | #e93120 |
| --input-negative-focus-value | #ededed |
| --input-negative-hover-background | #171717 |
| --input-negative-hover-icon | #ae1b13 |
| --input-negative-hover-label | #e93120 |
| --input-negative-hover-outline | #e93120 |
| --input-negative-hover-placeholder | #555555 |
| --input-negative-hover-supportive | #ae1b13 |
| --input-regular-default-background | #060805 |
| --input-regular-default-icon | #00d669 |
| --input-regular-default-label | #999999 |
| --input-regular-default-outline | #555555 |
| --input-regular-default-placeholder | #c2c7c3 |
| --input-regular-default-supportive | #999999 |
| --input-regular-disabled-background | #171717 |
| --input-regular-disabled-icon | #b6ffda |
| --input-regular-disabled-label | #555555 |
| --input-regular-disabled-outline | #3a3a3a |
| --input-regular-disabled-placeholder | #555555 |
| --input-regular-disabled-supportive | #555555 |
| --input-regular-disabled-value | #555555 |
| --input-regular-focus-background | #060805 |
| --input-regular-focus-focus-ring | #00d669 |
| --input-regular-focus-icon | #00d669 |
| --input-regular-focus-label | #999999 |
| --input-regular-focus-outline | #555555 |
| --input-regular-focus-placeholder | #c2c7c3 |
| --input-regular-focus-supportive | #999999 |
| --input-regular-focus-value | #ededed |
| --input-regular-hover-background | #171717 |
| --input-regular-hover-icon | #00b450 |
| --input-regular-hover-label | #d3d9d5 |
| --input-regular-hover-outline | #999999 |
| --input-regular-hover-placeholder | #d3d9d5 |
| --input-regular-hover-supportive | #d3d9d5 |
Picked and unpicked
| Token | Value |
|---|---|
| --interactive-active-default-background | #00d669 |
| --interactive-active-default-icon | #060805 |
| --interactive-active-default-label | #060805 |
| --interactive-active-default-outline | #edededa3 |
| --interactive-active-default-sub-label | #282828 |
| --interactive-active-disabled-background | #00d669 |
| --interactive-active-disabled-icon | #060805 |
| --interactive-active-disabled-label | #060805 |
| --interactive-active-disabled-outline | #edededa3 |
| --interactive-active-disabled-sub-label | #3a3a3a |
| --interactive-active-focus-background | #00d669 |
| --interactive-active-focus-focus-ring | #b6ffda |
| --interactive-active-focus-icon | #060805 |
| --interactive-active-focus-label | #060805 |
| --interactive-active-focus-outline | #edededa3 |
| --interactive-active-focus-sub-label | #3a3a3a |
| --interactive-active-hover-background | #00b450 |
| --interactive-active-hover-icon | #060805 |
| --interactive-active-hover-label | #060805 |
| --interactive-active-hover-outline | #edededa3 |
| --interactive-active-hover-sub-label | #3a3a3a |
| --interactive-active-pressed-background | #00913a |
| --interactive-active-pressed-icon | #060805 |
| --interactive-active-pressed-label | #060805 |
| --interactive-active-pressed-outline | #edededa3 |
| --interactive-active-pressed-sub-label | #3a3a3a |
| --interactive-inactive-default-background | #3a3a3a |
| --interactive-inactive-default-icon | #00d669 |
| --interactive-inactive-default-label | #d3d9d5 |
| --interactive-inactive-default-outline | #ededed |
| --interactive-inactive-default-sub-label | #999999 |
| --interactive-inactive-disabled-background | #3a3a3a |
| --interactive-inactive-disabled-icon | #00d669 |
| --interactive-inactive-disabled-label | #d3d9d5 |
| --interactive-inactive-disabled-outline | #ededed |
| --interactive-inactive-disabled-sub-label | #999999 |
| --interactive-inactive-focus-background | #3a3a3a |
| --interactive-inactive-focus-focus-ring | #999999 |
| --interactive-inactive-focus-icon | #00d669 |
| --interactive-inactive-focus-label | #d3d9d5 |
| --interactive-inactive-focus-outline | #ededed |
| --interactive-inactive-focus-sub-label | #999999 |
| --interactive-inactive-hover-background | #006f27 |
| --interactive-inactive-hover-icon | #00b450 |
| --interactive-inactive-hover-label | #ededed |
| --interactive-inactive-hover-outline | #ededed |
| --interactive-inactive-hover-sub-label | #d3d9d5 |
| --interactive-inactive-loading-background | #3a3a3a |
| --interactive-inactive-loading-label | #d3d9d5 |
| --interactive-inactive-loading-outline | #ededed |
| --interactive-inactive-pressed-background | #00913a |
| --interactive-inactive-pressed-icon | #00d669 |
| --interactive-inactive-pressed-label | #d3d9d5 |
| --interactive-inactive-pressed-outline | #ededed |
| --interactive-inactive-pressed-sub-label | #c2c7c3 |
Projects
| Token | Value |
|---|---|
| --project-default-background | #454545 |
| --project-default-icon | #747573 |
| --project-default-label | #d3d9d5 |
| --project-default-outline | #3a3a3a |
| --project-default-sub-label | #999999 |
| --project-disabled-background | #454545 |
| --project-disabled-icon | #747573 |
| --project-disabled-label | #d3d9d5 |
| --project-disabled-outline | #3a3a3a |
| --project-disabled-sub-label | #999999 |
| --project-focus-background | #454545 |
| --project-focus-focus-ring | #999999 |
| --project-focus-icon | #747573 |
| --project-focus-label | #d3d9d5 |
| --project-focus-outline | #3a3a3a |
| --project-focus-sub-label | #999999 |
| --project-hover-background | #747573 |
| --project-hover-icon | #ededed |
| --project-hover-label | #00d669 |
| --project-hover-outline | #00d669 |
| --project-hover-sub-label | #ededed |
| --project-loading-background | #454545 |
| --project-loading-icon | #999999 |
| --project-loading-label | #d3d9d5 |
| --project-loading-outline | #3a3a3a |
| --project-lock-background | #454545 |
| --project-lock-icon | #00d669 |
| --project-lock-label | #d3d9d5 |
| --project-lock-outline | #3a3a3a |
| --project-lock-sub-label | #999999 |
| --project-pressed-background | #999999 |
| --project-pressed-icon | #c2c7c3 |
| --project-pressed-label | #00d669 |
| --project-pressed-outline | #10ffa4 |
| --project-pressed-sub-label | #c2c7c3 |
Tabs
| Token | Value |
|---|---|
| --tabs-line | #282828 |
| --tabs-selected-default-label | #ededed |
| --tabs-selected-default-underline | #00d669 |
| --tabs-selected-disabled-label | #d3d9d5 |
| --tabs-selected-disabled-underline | #00d669 |
| --tabs-selected-focus-focus-ring | #b6ffda |
| --tabs-selected-focus-label | #ededed |
| --tabs-selected-focus-underline | #00d669 |
| --tabs-selected-hover-label | #ededed |
| --tabs-selected-hover-underline | #00b450 |
| --tabs-selected-pressed-label | #ededed |
| --tabs-selected-pressed-underline | #00913a |
| --tabs-unselected-default-label | #999999 |
| --tabs-unselected-disabled-label | #999999 |
| --tabs-unselected-focus-focus-ring | #999999 |
| --tabs-unselected-focus-label | #d3d9d5 |
| --tabs-unselected-hover-label | #ededed |
| --tabs-unselected-hover-underline | #3a3a3a |
| --tabs-unselected-pressed-label | #d3d9d5 |
| --tabs-unselected-pressed-underline | #747573 |
Type
| Token | Value |
|---|---|
| --font-family-base | 'General Sans Variable', 'General Sans', sans-serif |
| --typography-body-font-size | 16px |
| --typography-body-font-weight-medium | 500 |
| --typography-body-font-weight-regular | 400 |
| --typography-body-letter-spacing | 0px |
| --typography-body-line-height | 22px |
| --typography-display-font-size | 64px |
| --typography-display-font-weight-medium | 500 |
| --typography-display-font-weight-regular | 400 |
| --typography-display-font-weight-semibold | 600 |
| --typography-display-letter-spacing | 0px |
| --typography-display-line-height | 72px |
| --typography-font-size-8 | 8px |
| --typography-font-size-10 | 10px |
| --typography-font-size-12 | 12px |
| --typography-font-size-14 | 14px |
| --typography-font-size-16 | 16px |
| --typography-font-size-18 | 18px |
| --typography-font-size-20 | 20px |
| --typography-font-size-22 | 22px |
| --typography-font-size-24 | 24px |
| --typography-font-size-28 | 28px |
| --typography-font-size-32 | 32px |
| --typography-font-size-40 | 40px |
| --typography-font-size-44 | 44px |
| --typography-font-size-48 | 48px |
| --typography-font-size-56 | 56px |
| --typography-font-size-64 | 64px |
| --typography-font-size-72 | 72px |
| --typography-font-size-80 | 80px |
| --typography-font-size-88 | 88px |
| --typography-font-weight-light | 300 |
| --typography-font-weight-medium | 500 |
| --typography-font-weight-regular | 400 |
| --typography-font-weight-semibold | 600 |
| --typography-headline-font-size | 56px |
| --typography-headline-font-weight-medium | 500 |
| --typography-headline-font-weight-regular | 400 |
| --typography-headline-letter-spacing | 0px |
| --typography-headline-line-height | 64px |
| --typography-label-font-size | 12px |
| --typography-label-font-weight-medium | 500 |
| --typography-label-font-weight-regular | 400 |
| --typography-label-letter-spacing | 0px |
| --typography-label-line-height | 14px |
| --typography-letter-spacing-letter-spacing | 0px |
| --typography-line-height-8 | 8px |
| --typography-line-height-10 | 10px |
| --typography-line-height-12 | 12px |
| --typography-line-height-14 | 14px |
| --typography-line-height-16 | 16px |
| --typography-line-height-18 | 18px |
| --typography-line-height-20 | 20px |
| --typography-line-height-22 | 22px |
| --typography-line-height-24 | 24px |
| --typography-line-height-28 | 28px |
| --typography-line-height-32 | 32px |
| --typography-line-height-40 | 40px |
| --typography-line-height-44 | 44px |
| --typography-line-height-48 | 48px |
| --typography-line-height-56 | 56px |
| --typography-line-height-64 | 64px |
| --typography-line-height-72 | 72px |
| --typography-line-height-80 | 80px |
| --typography-line-height-88 | 88px |
| --typography-paragraph-font-size | 14px |
| --typography-paragraph-font-weight-medium | 500 |
| --typography-paragraph-font-weight-regular | 400 |
| --typography-paragraph-letter-spacing | 0px |
| --typography-paragraph-line-height | 20px |
| --typography-placeholder-font-size | 10px |
| --typography-placeholder-font-weight-medium | 500 |
| --typography-placeholder-font-weight-regular | 400 |
| --typography-placeholder-letter-spacing | 0px |
| --typography-placeholder-line-height | 12px |
| --typography-sub-headline-font-size | 40px |
| --typography-sub-headline-font-weight-medium | 500 |
| --typography-sub-headline-font-weight-regular | 400 |
| --typography-sub-headline-letter-spacing | 0px |
| --typography-sub-headline-line-height | 48px |
| --typography-sub-title-font-size | 20px |
| --typography-sub-title-font-weight-medium | 500 |
| --typography-sub-title-font-weight-regular | 400 |
| --typography-sub-title-letter-spacing | 0px |
| --typography-sub-title-line-height | 28px |
| --typography-subtitle-font-size | 20px |
| --typography-subtitle-line-height | 28px |
| --typography-title-font-size | 24px |
| --typography-title-font-weight-medium | 500 |
| --typography-title-font-weight-regular | 400 |
| --typography-title-letter-spacing | 0px |
| --typography-title-line-height | 32px |
Colour primitives
| Token | Value |
|---|---|
| --base-black | #000000 |
| --color-dark-negative-100 | #48050c |
| --color-dark-negative-200 | #5e080d |
| --color-dark-negative-300 | #740b0d |
| --color-dark-negative-400 | #ae1b13 |
| --color-dark-negative-500 | #e93120 |
| --color-dark-negative-600 | #f2705f |
| --color-dark-negative-700 | #faafa3 |
| --color-dark-negative-800 | #fdcdc4 |
| --color-dark-negative-900 | #fee6e1 |
| --color-dark-neutral-100 | #060805 |
| --color-dark-neutral-200 | #171717 |
| --color-dark-neutral-250 | #282828 |
| --color-dark-neutral-300 | #3a3a3a |
| --color-dark-neutral-400 | #555555 |
| --color-dark-neutral-500 | #747573 |
| --color-dark-neutral-600 | #999999 |
| --color-dark-neutral-700 | #c2c7c3 |
| --color-dark-neutral-800 | #d3d9d5 |
| --color-dark-neutral-900 | #ededed |
| --color-dark-positive-100 | #064608 |
| --color-dark-positive-200 | #0a5c10 |
| --color-dark-positive-300 | #0e7118 |
| --color-dark-positive-400 | #19a92c |
| --color-dark-positive-500 | #31d84d |
| --color-dark-positive-600 | #71e085 |
| --color-dark-positive-700 | #aeefbb |
| --color-dark-positive-800 | #cbf6d4 |
| --color-dark-positive-900 | #e5fbea |
| --color-dark-primary-100 | #004c19 |
| --color-dark-primary-200 | #006f27 |
| --color-dark-primary-300 | #00913a |
| --color-dark-primary-400 | #00b450 |
| --color-dark-primary-500 | #00d669 |
| --color-dark-primary-600 | #00f882 |
| --color-dark-primary-700 | #10ffa4 |
| --color-dark-primary-800 | #7bffc0 |
| --color-dark-primary-900 | #b6ffda |
| --color-dark-warning-100 | #492604 |
| --color-dark-warning-200 | #613605 |
| --color-dark-warning-300 | #7a4805 |
| --color-dark-warning-400 | #bd7305 |
| --color-dark-warning-500 | #fda50d |
| --color-dark-warning-600 | #fbc456 |
| --color-dark-warning-700 | #fde1a1 |
| --color-dark-warning-800 | #fdeec3 |
| --color-dark-warning-900 | #fef8e1 |
| --color-light-negative-100 | #fee6e1 |
| --color-light-negative-200 | #fdcdc4 |
| --color-light-negative-300 | #faafa3 |
| --color-light-negative-400 | #f2705f |
| --color-light-negative-500 | #e93120 |
| --color-light-negative-600 | #ae1b13 |
| --color-light-negative-700 | #740b0d |
| --color-light-negative-800 | #5e080d |
| --color-light-negative-900 | #48050c |
| --color-light-neutral-100 | #fcfcfc |
| --color-light-neutral-200 | #ededed |
| --color-light-neutral-250 | #e0e3e1 |
| --color-light-neutral-300 | #d3d9d5 |
| --color-light-neutral-400 | #c2c7c3 |
| --color-light-neutral-500 | #999999 |
| --color-light-neutral-600 | #747573 |
| --color-light-neutral-700 | #454545 |
| --color-light-neutral-800 | #171717 |
| --color-light-neutral-900 | #060805 |
| --color-light-positive-100 | #e5fbea |
| --color-light-positive-200 | #cbf6d4 |
| --color-light-positive-300 | #aeefbb |
| --color-light-positive-400 | #71e085 |
| --color-light-positive-500 | #31d84d |
| --color-light-positive-600 | #19a92c |
| --color-light-positive-700 | #0e7118 |
| --color-light-positive-800 | #0a5c10 |
| --color-light-positive-900 | #064608 |
| --color-light-primary-100 | #b6ffda |
| --color-light-primary-200 | #7bffc0 |
| --color-light-primary-300 | #10ffa4 |
| --color-light-primary-400 | #00f882 |
| --color-light-primary-500 | #00d669 |
| --color-light-primary-600 | #00b450 |
| --color-light-primary-700 | #00913a |
| --color-light-primary-800 | #006f27 |
| --color-light-primary-900 | #004c19 |
| --color-light-warning-100 | #fef8e1 |
| --color-light-warning-200 | #fdeec3 |
| --color-light-warning-300 | #fde1a1 |
| --color-light-warning-400 | #fbc456 |
| --color-light-warning-500 | #fda50d |
| --color-light-warning-600 | #bd7305 |
| --color-light-warning-700 | #7a4805 |
| --color-light-warning-800 | #613605 |
| --color-light-warning-900 | #492604 |
Spacing primitives
| Token | Value |
|---|---|
| --spacing-base-1 | 2px |
| --spacing-base-2 | 4px |
| --spacing-base-3 | 6px |
| --spacing-base-4 | 8px |
| --spacing-base-5 | 10px |
| --spacing-base-6 | 12px |
| --spacing-base-7 | 14px |
| --spacing-base-8 | 16px |
| --spacing-base-9 | 18px |
| --spacing-base-10 | 20px |
| --spacing-base-11 | 22px |
| --spacing-base-12 | 24px |
| --spacing-base-13 | 26px |
| --spacing-base-14 | 28px |
| --spacing-base-15 | 30px |
| --spacing-base-16 | 32px |
| --spacing-base-17 | 34px |
| --spacing-base-18 | 36px |
| --spacing-base-19 | 38px |
| --spacing-base-20 | 40px |
| --spacing-base-21 | 42px |
| --spacing-base-22 | 44px |
| --spacing-base-23 | 46px |
| --spacing-base-24 | 48px |
| --spacing-base-25 | 50px |
| --spacing-base-26 | 52px |
| --spacing-base-27 | 54px |
| --spacing-base-28 | 56px |
| --spacing-base-29 | 58px |
| --spacing-base-30 | 60px |
| --spacing-base-31 | 62px |
| --spacing-base-32 | 64px |
| --spacing-base-33 | 66px |
| --spacing-base-34 | 68px |
| --spacing-base-35 | 70px |
| --spacing-base-36 | 72px |
| --spacing-base-37 | 74px |
| --spacing-base-38 | 76px |
| --spacing-base-39 | 78px |
| --spacing-base-40 | 80px |
| --spacing-base-41 | 82px |
| --spacing-base-42 | 84px |
| --spacing-base-43 | 86px |
| --spacing-base-44 | 88px |
| --spacing-base-45 | 90px |
| --spacing-base-46 | 92px |
| --spacing-base-47 | 94px |
| --spacing-base-48 | 96px |
| --spacing-base-49 | 98px |
| --spacing-base-50 | 100px |
| --spacing-base-none | 0px |
| --spacing-base-one | 1px |
Gaps and padding
| Token | Value |
|---|---|
| --spacing-gap-2xlarge | 40px |
| --spacing-gap-2xsmall | 4px |
| --spacing-gap-3xlarge | 48px |
| --spacing-gap-3xsmall | 2px |
| --spacing-gap-4xlarge | 56px |
| --spacing-gap-5xlarge | 64px |
| --spacing-gap-6xlarge | 80px |
| --spacing-gap-7xlarge | 96px |
| --spacing-gap-large | 24px |
| --spacing-gap-medium | 16px |
| --spacing-gap-medium-large | 20px |
| --spacing-gap-none | 0px |
| --spacing-gap-small | 8px |
| --spacing-gap-small-medium | 12px |
| --spacing-gap-xlarge | 32px |
| --spacing-gap-xsmall | 6px |
Sizes
| Token | Value |
|---|---|
| --spacing-size-2xlarge | 72px |
| --spacing-size-2xsmall | 16px |
| --spacing-size-3xlarge | 80px |
| --spacing-size-3xsmall | 12px |
| --spacing-size-large | 56px |
| --spacing-size-medium | 40px |
| --spacing-size-medium-large | 48px |
| --spacing-size-none | 0px |
| --spacing-size-small | 24px |
| --spacing-size-small-medium | 32px |
| --spacing-size-xlarge | 64px |
| --spacing-size-xsmall | 20px |
Corner radius
| Token | Value |
|---|---|
| --spacing-radius-2xlarge | 32px |
| --spacing-radius-2xsmall | 2px |
| --spacing-radius-full | 10000px |
| --spacing-radius-large | 16px |
| --spacing-radius-medium | 12px |
| --spacing-radius-none | 0px |
| --spacing-radius-small | 8px |
| --spacing-radius-xlarge | 24px |
| --spacing-radius-xsmall | 4px |
Outlines
| Token | Value |
|---|---|
| --spacing-outline-large | 4px |
| --spacing-outline-medium | 2px |
| --spacing-outline-none | 0px |
| --spacing-outline-small | 1px |
| --spacing-outline-xlarge | 8px |
Opacity
| Token | Value |
|---|---|
| --opacity-faint | 0.04 |
| --opacity-gentle | 0.24 |
| --opacity-hard | 0.72 |
| --opacity-medium | 0.48 |
| --opacity-mild | 0.32 |
| --opacity-soft | 0.16 |
| --opacity-softest | 0.08 |
| --opacity-solid | 1 |
| --opacity-strong | 0.64 |
| --opacity-transparent | 0 |
Effects
| Token | Value |
|---|---|
| --effect-lock-frame | blur(8px) |
| --effect-menu | blur(12px) |
| --effect-menu-lg | blur(24px) |
| --effect-thumb | blur(12px) |
| --shadow-floating | 0 16px 24px 0 rgba(0, 0, 0, 0.16) |
Layout
| Token | Value |
|---|---|
| --spacing-layout-hero-height | 630px |
Other
| Token | Value |
|---|---|
| --background | #3a3a3a |
| --focus-ring | #999999 |
| --icon | #00d669 |
| --label | #d3d9d5 |
| --outline | #ededed |
| --sub-label | #999999 |