Design Tokens

  1. Colors
  2. Fonts
  3. Spacing
  4. Font Sizes

Colors

A collection of colors used in the design system. The colors are grouped by brand and core colors. The brand colors directly map to the brand colors used in the design system. The core colors are the option tokens to create new brand colors.

Brand palette colors (primary, secondary, accent) are documented on the Brand Tokens page.

  1. Color
  2. Danger
  3. Info
  4. Neutral
  5. Success
  6. Surface-cyan
  7. Surface-green
  8. Surface-highlight
  9. Surface-neutral
  10. Surface-orange
  11. Surface-primary
  12. Surface-red
  13. Surface-secondary
  14. Surface-yellow
  15. Warning
  16. Outline
  17. Input

Color

  • --background-color

    var(--background-color)
     light: #f8f9fa dark: #16191d

  • --border-color

    var(--border-color)
     light: #dee2e6 dark: #495057

Danger

  • Danger

    var(--color-danger)
     light: #790000 dark: #ae0000

Info

  • Info

    var(--color-info)
     light: #077183 dark: #088095

Neutral

  • Neutral-000

    var(--color-neutral-000)
     light: var(--color-white) dark: var(--color-white)

  • Neutral-50

    var(--color-neutral-50)
     light: var(--color-grey-50) dark: var(--color-grey-50)

  • Neutral-100

    var(--color-neutral-100)
     light: var(--color-grey-100) dark: var(--color-grey-100)

  • Neutral-200

    var(--color-neutral-200)
     light: var(--color-grey-200) dark: var(--color-grey-200)

  • Neutral-300

    var(--color-neutral-300)
     light: var(--color-grey-300) dark: var(--color-grey-300)

  • Neutral-400

    var(--color-neutral-400)
     light: var(--color-grey-400) dark: var(--color-grey-400)

  • Neutral-500

    var(--color-neutral-500)
     light: var(--color-grey-500) dark: var(--color-grey-500)

  • Neutral-600

    var(--color-neutral-600)
     light: var(--color-grey-600) dark: var(--color-grey-600)

  • Neutral-700

    var(--color-neutral-700)
     light: var(--color-grey-700) dark: var(--color-grey-700)

  • Neutral-800

    var(--color-neutral-800)
     light: var(--color-grey-800) dark: var(--color-grey-800)

  • Neutral-900

    var(--color-neutral-900)
     light: var(--color-grey-900) dark: var(--color-grey-900)

  • Neutral-950

    var(--color-neutral-950)
     light: var(--color-grey-950) dark: var(--color-grey-950)

  • Neutral-1000

    var(--color-neutral-1000)
     light: var(--color-black) dark: var(--color-black)

Success

  • Success

    var(--color-success)
     light: #477f2e dark: #61aa40

Surface-cyan

  • Surface-cyan-bg

    var(--color-surface-cyan-bg)
     light: #0cc0df dark: #0cc0df

  • Surface-cyan-fg

    var(--color-surface-cyan-fg)
     light: #212529 dark: #212529

Surface-green

  • Surface-green-bg

    var(--color-surface-green-bg)
     light: #7eda55 dark: #7eda55

  • Surface-green-fg

    var(--color-surface-green-fg)
     light: #212529 dark: #212529

Surface-highlight

  • Surface-highlight-bg

    var(--color-surface-highlight-bg)
     light: #031637 dark: #212529

  • Surface-highlight-fg

    var(--color-surface-highlight-fg)
     light: #f8f9fa dark: #f8f9fa

Surface-neutral

  • Surface-neutral-bg

    var(--color-surface-neutral-bg)
     light: #e9ecef dark: #212529

  • Surface-neutral-fg

    var(--color-surface-neutral-fg)
     light: #212529 dark: #f8f9fa

Surface-orange

  • Surface-orange-bg

    var(--color-surface-orange-bg)
     light: #ff922b dark: #fd7e14

  • Surface-orange-fg

    var(--color-surface-orange-fg)
     light: #212529 dark: #212529

Surface-primary

  • Surface-primary-bg

    var(--color-surface-primary-bg)
     light: #02102b dark: #ffd43b

  • Surface-primary-fg

    var(--color-surface-primary-fg)
     light: #f8f9fa dark: #212529

Surface-red

  • Surface-red-bg

    var(--color-surface-red-bg)
     light: #ff5757 dark: #ff5757

  • Surface-red-fg

    var(--color-surface-red-fg)
     light: #212529 dark: #212529

Surface-secondary

  • Surface-secondary-bg

    var(--color-surface-secondary-bg)
     light: #ffd43b dark: #739ddd

  • Surface-secondary-fg

    var(--color-surface-secondary-fg)
     light: #212529 dark: #212529

Surface-yellow

  • Surface-yellow-bg

    var(--color-surface-yellow-bg)
     light: #ffd43b dark: #ffd43b

  • Surface-yellow-fg

    var(--color-surface-yellow-fg)
     light: #212529 dark: #212529

Warning

  • Warning

    var(--color-warning)
     light: #e8590c dark: #f76707

Outline

  • --focus-outline-color

    var(--focus-outline-color)
     light: var(--text-interactive-hover-bg) dark: var(--text-interactive-hover-bg)

Input

  • --form-input-border-color

    var(--form-input-border-color)
     light: #868e96 dark: #868e96

  • --form-input-color-bg

    var(--form-input-color-bg)
     light: #f1f3f5 dark: #212529

  • --form-input-color-disabled

    var(--form-input-color-disabled)
     light: #ced4da dark: #adb5bd

  • --form-input-color-fg

    var(--form-input-color-fg)
     light: var(--text-fg) dark: var(--text-fg)

  • --form-input-color-placeholder

    var(--form-input-color-placeholder)
     light: #868e96 dark: #495057

Fonts

  • --body-font-family

    Font Families: var(--font-family-base) 

    var(--body-font-family)

  • --font-family-base

    Font Families: var(--font-family-sans) 

    var(--font-family-base)

  • --font-family-code

    Font Families: "Fira Code", "Lucida Console", "Monaco", monospace 

    var(--font-family-code)

  • --font-family-expressive

    Font Families: "Rubik", "Verdana", "Helvetica Neue", sans-serif 

    var(--font-family-expressive)

  • --font-family-heading

    Font Families: var(--font-family-expressive) 

    var(--font-family-heading)

  • --font-family-mono

    Font Families: var(--font-family-code) 

    var(--font-family-mono)

  • --font-family-sans

    Font Families: "Comfortaa", "Roboto", "Verdana", "Helvetica Neue", "Arial", sans-serif 

    var(--font-family-sans)

Spacing

A collection of spacing tokens used in the design system.

--spacing-000

0rem

var(--spacing-000)

--spacing-025

0.25rem

var(--spacing-025)

--spacing-050

0.5rem

var(--spacing-050)

--spacing-075

0.75rem

var(--spacing-075)

--spacing-100

1rem

var(--spacing-100)

--spacing-125

1.25rem

var(--spacing-125)

--spacing-150

1.5rem

var(--spacing-150)

--spacing-175

1.75rem

var(--spacing-175)

--spacing-200

2rem

var(--spacing-200)

--spacing-250

2.5rem

var(--spacing-250)

--spacing-300

3rem

var(--spacing-300)

--spacing-400

4rem

var(--spacing-400)

--spacing-500

5rem

var(--spacing-500)

--spacing-600

6rem

var(--spacing-600)

--spacing-800

8rem

var(--spacing-800)

--spacing-1000

10rem

var(--spacing-1000)

Font Sizes

A collection of font sizes used in the design system.

--font-size-200

0.875rempx to [object Object]px 

var(--font-size-200)
 
.font-size-200)

--font-size-200

--font-size-300

0.925rempx to [object Object]px 

var(--font-size-300)
 
.font-size-300)

--font-size-300

--font-size-400

1rempx to [object Object]px 

var(--font-size-400)
 
.font-size-400)

--font-size-400

--font-size-500

1.25rempx to [object Object]px 

var(--font-size-500)
 
.font-size-500)

--font-size-500

--font-size-600

1.3rempx to [object Object]px 

var(--font-size-600)
 
.font-size-600)

--font-size-600

--font-size-700

1.55rempx to [object Object]px 

var(--font-size-700)
 
.font-size-700)

--font-size-700

--font-size-800

1.8rempx to [object Object]px 

var(--font-size-800)
 
.font-size-800)

--font-size-800

--font-size-900

2.125rempx to [object Object]px 

var(--font-size-900)
 
.font-size-900)

--font-size-900