Design system

This is the design system behind the site: its tokens and components. Every value on this page is read from tokens/tokens.json, the same file the site's CSS is generated from. To try the components on their own, open Storybook.

Color

  • --color-text-primary{base-color-grey-900}
  • --color-text-secondary{base-color-grey-600}
  • --color-text-tertiary{base-color-grey-500}
  • --color-text-muted{base-color-grey-400}
  • --color-text-disabled{base-color-grey-300}
  • --color-text-success{base-color-green-900}
  • --color-text-inverse{base-color-grey-50}
  • --color-icon{base-color-grey-400}
  • --color-icon-success{base-color-green-500}
  • --color-surface-card{base-color-grey-50}
  • --color-surface-overlay{base-color-grey-900-40}
  • --color-surface-pill{base-color-grey-100}
  • --color-surface-success{base-color-green-50}
  • --color-surface-list-item-active{base-color-grey-100}
  • --color-surface-list-item-hover{color-surface-hover}
  • --color-surface-hover{base-color-grey-200}
  • --color-surface-emphasis{base-color-grey-900}
  • --color-surface-emphasis-hover{base-color-grey-700}
  • --color-border-default{base-color-white}

Type

  • .type-heading-1Builds, with a focus on interaction
  • .type-heading-2Builds, with a focus on interaction
  • .type-heading-2-italicBuilds, with a focus on interaction
  • .type-heading-3Builds, with a focus on interaction
  • .type-heading-4Builds, with a focus on interaction
  • .type-bodyBuilds, with a focus on interaction
  • .type-body-boldBuilds, with a focus on interaction
  • .type-captionBuilds, with a focus on interaction
  • .type-caption-boldBuilds, with a focus on interaction
  • .type-caption-mdBuilds, with a focus on interaction
  • .type-caption-smBuilds, with a focus on interaction
  • .type-caption-sm-mediumBuilds, with a focus on interaction
  • .type-caption-sm-boldBuilds, with a focus on interaction

Spacing

  • --base-space-44px
  • --base-space-66px
  • --base-space-88px
  • --base-space-1010px
  • --base-space-1212px
  • --base-space-1616px
  • --base-space-2020px
  • --base-space-2424px
  • --base-space-3232px
  • --base-space-4040px
  • --base-space-4848px
  • --base-space-6464px

Components

ShippedB2BDesign Iteration