Skip to main content
Nexus Design System
GitHub

Tokens

Every token for this appearance and where its value comes from. Colours show whether they pass their contrast checks. Override a token to see what a hand-written theme does to the components.

Colour

62 share a primitive's value50 computed by the engine0 of 147 contrast checks fail

Other tokens

spacing

container

layout

family

size

weight

line-height

letterspacing

display

  • typography-display-largefont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-5xl); font-weight: var(--nx-typography-weight-semibold); line-height: var(--nx-typography-line-height-5xl); letter-spacing: var(--nx-typography-letterspacing-tighter); text-wrap: balancecomposed
  • typography-display-mediumfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-4xl); font-weight: var(--nx-typography-weight-semibold); line-height: var(--nx-typography-line-height-4xl); letter-spacing: var(--nx-typography-letterspacing-tighter); text-wrap: balancecomposed
  • typography-display-smallfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-3xl); font-weight: var(--nx-typography-weight-semibold); line-height: var(--nx-typography-line-height-3xl); letter-spacing: var(--nx-typography-letterspacing-tighter); text-wrap: balancecomposed

heading

  • typography-heading-largefont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-3xl); font-weight: var(--nx-typography-weight-bold); line-height: var(--nx-typography-line-height-3xl); letter-spacing: var(--nx-typography-letterspacing-tighter); text-wrap: balancecomposed
  • typography-heading-mediumfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-2xl); font-weight: var(--nx-typography-weight-bold); line-height: var(--nx-typography-line-height-2xl); letter-spacing: var(--nx-typography-letterspacing-tight); text-wrap: balancecomposed
  • typography-heading-smallfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-xl); font-weight: var(--nx-typography-weight-bold); line-height: var(--nx-typography-line-height-xl); letter-spacing: var(--nx-typography-letterspacing-tight); text-wrap: balancecomposed
  • typography-heading-xsmallfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-lg); font-weight: var(--nx-typography-weight-bold); line-height: var(--nx-typography-line-height-lg); letter-spacing: var(--nx-typography-letterspacing-tight); text-wrap: balancecomposed
  • typography-heading-xxsmallfont-family: var(--nx-typography-family-font-heading); font-size: var(--nx-typography-size-base); font-weight: var(--nx-typography-weight-semibold); line-height: var(--nx-typography-line-height-base); letter-spacing: var(--nx-typography-letterspacing-tight); text-wrap: balancecomposed

body

  • typography-body-defaultfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-sm); font-weight: var(--nx-typography-weight-normal); line-height: var(--nx-typography-line-height-sm); letter-spacing: var(--nx-typography-letterspacing-normal); text-wrap: prettycomposed
  • typography-body-smallfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-xs); font-weight: var(--nx-typography-weight-normal); line-height: var(--nx-typography-line-height-xs); letter-spacing: var(--nx-typography-letterspacing-normal); text-wrap: prettycomposed

typography

  • typography-shortcutfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-xs); font-weight: var(--nx-typography-weight-normal); line-height: var(--nx-typography-line-height-xs); letter-spacing: var(--nx-typography-letterspacing-widest)composed

label

  • typography-label-defaultfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-sm); font-weight: var(--nx-typography-weight-medium); line-height: var(--nx-typography-line-height-sm); letter-spacing: var(--nx-typography-letterspacing-normal)composed
  • typography-label-smallfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-xs); font-weight: var(--nx-typography-weight-medium); line-height: var(--nx-typography-line-height-xs); letter-spacing: var(--nx-typography-letterspacing-normal)composed
  • typography-label-capsfont-family: var(--nx-typography-family-font-sans); font-size: var(--nx-typography-size-xxs); font-weight: var(--nx-typography-weight-semibold); line-height: var(--nx-typography-line-height-xxs); letter-spacing: var(--nx-typography-letterspacing-wide)composed

code

  • typography-code-blockfont-family: var(--nx-typography-family-font-mono); font-size: var(--nx-typography-size-sm); font-weight: var(--nx-typography-weight-normal); line-height: var(--nx-typography-line-height-sm); letter-spacing: 0pxcomposed
  • typography-code-inlinefont-family: var(--nx-typography-family-font-mono); font-size: var(--nx-typography-size-sm); font-weight: var(--nx-typography-weight-semibold); line-height: normal; letter-spacing: 0pxcomposed

duration

ease

  • breakpoint-sm40rembuild time
  • breakpoint-md48rembuild time
  • breakpoint-lg64rembuild time
  • breakpoint-xl80rembuild time
  • breakpoint-2xl96rembuild time

Preview

Bank verification in progress
Payouts resume once the account ending 4021 is confirmed.
Payout sent
$4,820.00 is on its way to the account ending 4021.
Card expires soon
Update the card ending 1180 before 31 October.
Payment declined
The issuer declined the card ending 1180.
informationsuccesswarningerror
informationsuccesswarningerror

A fresh start

Give your next idea a name.

Nothing is sent to a server.

A button for every moment

Emphasis, restraint, and everything between.

A closer look

Open a layer. Keep your place.