@deriv-web-design/tokens

Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.

Installation

npm install @deriv-web-design/tokens

Setup

Import the tokens CSS file once in your app entry point:

import "@deriv-web-design/tokens/tokens.css";

All tokens are then available as CSS variables throughout your application.

Usage

.my-button {
  background: var(--color-coral-700);
  color: var(--color-slate-50);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
}

Token Categories

Colors — Core Palette

Raw palette values. Do not use these directly in components — use semantic tokens instead.

/* Slate (neutral scale) */
var(--color-slate-50)      /* #ffffff */
var(--color-slate-75)      /* #f6f7f8 */
var(--color-slate-500)     /* #7b8a96 */
var(--color-slate-1200)    /* #1f1c25 */
var(--color-slate-1400)    /* #000000 */

/* Coral (brand) */
var(--color-coral-500)     /* #ff444f */
var(--color-coral-600)     /* #e73c36 */
var(--color-coral-700)     /* #dc1f28 */

/* Emerald */
var(--color-emerald-500)   /* #4cd6c0 */
var(--color-emerald-600)   /* #00b39a */

/* Yellow */
var(--color-yellow-500)    /* #ffb84d */

/* Blue */
var(--color-blue-500)      /* #4da6ff */
var(--color-blue-600)      /* #2f77ff */

/* Opacity utilities */
var(--color-opacity-slate-8)
var(--color-opacity-white-16)
var(--color-opacity-green-8)
var(--color-opacity-red-8)

Colors — Semantic Tokens

Purpose-driven tokens. Always use these in components.

/* Button */
var(--button-primary-background)
var(--button-primary-text)
var(--button-secondary-background)
var(--button-secondary-border)
var(--button-ghost-background)
var(--button-danger-background)
var(--button-disabled-background)

/* TextField */
var(--field-border-default)
var(--field-border-focus)
var(--field-border-fail-focus)
var(--field-border-success-focus)
var(--field-text-default)
var(--field-text-placeholder)

/* Chip */
var(--chip-border-color)
var(--chip-selected-background)
var(--chip-selected-text)

/* Accordion */
var(--accordion-divider-color)
var(--accordion-title-color)

/* Breadcrumb */
var(--breadcrumb-text-color)
var(--breadcrumb-separator-color)

/* Pagination */
var(--pagination-page-selected-bg)
var(--pagination-page-selected-text)

Spacing

8-point scale in rem units:

var(--spacing-0)    /* 0rem    — 0px   */
var(--spacing-2)    /* 0.125rem — 2px  */
var(--spacing-4)    /* 0.25rem — 4px   */
var(--spacing-8)    /* 0.5rem  — 8px   */
var(--spacing-12)   /* 0.75rem — 12px  */
var(--spacing-16)   /* 1rem    — 16px  */
var(--spacing-24)   /* 1.5rem  — 24px  */
var(--spacing-32)   /* 2rem    — 32px  */
var(--spacing-40)   /* 2.5rem  — 40px  */
var(--spacing-48)   /* 3rem    — 48px  */
var(--spacing-64)   /* 4rem    — 64px  */
var(--spacing-80)   /* 5rem    — 80px  */
var(--spacing-96)   /* 6rem    — 96px  */
var(--spacing-112)  /* 7rem    — 112px */

Typography

Font family: Inter. All sizes in rem for accessibility.

/* Font sizes (mobile base, responsive for xl–5xl) */
var(--font-size-xs)    /* 0.75rem  — 12px */
var(--font-size-sm)    /* 0.875rem — 14px */
var(--font-size-md)    /* 1rem     — 16px */
var(--font-size-lg)    /* 1.125rem — 18px */
var(--font-size-xl)    /* 1.25rem  → 1.5rem → 1.75rem (mobile/tablet/desktop) */
var(--font-size-2xl)   /* 1.5rem   → 2rem  → 2.5rem  */
var(--font-size-3xl)   /* 2rem     → 2.5rem → 3rem   */
var(--font-size-4xl)   /* 2.5rem   → 3rem  → 3.5rem  */
var(--font-size-5xl)   /* 3rem     → 4rem  → 5rem    */

/* Font weights */
var(--font-weight-regular)    /* 400 */
var(--font-weight-medium)     /* 500 */
var(--font-weight-semi-bold)  /* 600 */
var(--font-weight-extra-bold) /* 800 */

/* Line heights */
var(--line-height-tight)    /* 1.2  */
var(--line-height-normal)   /* 1.5  */
var(--line-height-relaxed)  /* 1.75 */

Border Radius

var(--radius-none)   /* 0        */
var(--radius-xs)     /* 0.125rem — 2px  */
var(--radius-sm)     /* 0.25rem  — 4px  */
var(--radius-md)     /* 0.5rem   — 8px  */
var(--radius-lg)     /* 0.75rem  — 12px */
var(--radius-xl)     /* 1rem     — 16px */
var(--radius-2xl)    /* 1.5rem   — 24px */
var(--radius-full)   /* 9999px   — pill */

Shadows

var(--shadow-xs)   /* 0 1px 2px rgba(0,0,0,0.04)   */
var(--shadow-sm)   /* 0 1px 3px rgba(0,0,0,0.08)   */
var(--shadow-md)   /* 0 4px 8px rgba(0,0,0,0.12)   */
var(--shadow-lg)   /* 0 8px 16px rgba(0,0,0,0.16)  */
var(--shadow-xl)   /* 0 12px 24px rgba(0,0,0,0.20) */

Breakpoints

Mobile-first. Base styles apply to all screens — add breakpoints for larger viewports:

/* Tablet: 768px and above */
@media (min-width: 768px) { ... }

/* Desktop: 992px and above */
@media (min-width: 992px) { ... }

/* Wide: 1440px and above */
@media (min-width: 1440px) { ... }

Using with @deriv-web-design/ui

Tokens are already bundled inside @deriv-web-design/ui. Only install this package separately if you are building custom components without the UI library.