Design tokens

<h1 className="text-display font-medium">Page title</h1>
<p className="text-body-long text-secondary">Description text with comfortable reading line height.</p>
<span className="text-body-sm text-tertiary">Caption</span>

<a href="https://wander.com" className="text-link">
  Visit Wander
</a>

<a href="/docs/components/button" className="text-link-internal">
  Button component
</a>

<div className="transition-transform duration-300 ease-out-cubic hover:scale-105">
  Smooth scale on hover
</div>

<div className="transition-opacity duration-500 ease-in-out-quart">
  Fade with quartic easing
</div>

<button className="bg-button-primary rounded-lg px-4 py-2">Primary</button>
<button className="bg-button-checkout rounded-lg px-4 py-2">Book now</button>

<button className="focus-visible:shadow-focus rounded-lg">Focusable</button>
<button className="focus-visible:shadow-focus-destructive rounded-lg">Destructive focus</button>

<button className="touch-hitbox">
  <SmallIcon />
</button>

<div className="scrollbar-thin overflow-y-auto">Thin scrollbar</div>
<div className="scrollbar-none overflow-y-auto">Hidden scrollbar</div>

pnpm add @wandercom/design-system-tokens

import '@wandercom/design-system-tokens/tailwind.css';

<h1 className="text-display font-medium">Welcome to Wander</h1>

<div className="bg-surface-primary text-primary">
  Content with design tokens
</div>

<a href="/properties" className="text-link-internal">
  Browse properties
</a>

<button className="bg-button-checkout focus-visible:shadow-focus rounded-lg px-4 py-2">
  Book now
</button>

<div className="shadow-dropdown rounded-xl border-overlay-primary bg-surface-dropdown p-2">
  Dropdown menu content
</div>

<div className="transition-transform duration-300 ease-out-cubic hover:scale-105">
  Animated element
</div>

pnpm add @wandercom/design-system-tokens

import {
  generateScales,
  resolveRoleTokens,
  generateExportCSS,
  type SeedColors,
} from '@wandercom/design-system-tokens/color-engine';

import type { SeedColors } from '@wandercom/design-system-tokens/color-engine';

const seeds: SeedColors = {
  brand: '#1a1a2e',           // dominant brand hue (placed at scale stop 500)
  accentPrimary: '#e94560',   // action/CTA color
  accentSecondary: '#0f3460', // supporting variety color
};

import { generateScales } from '@wandercom/design-system-tokens/color-engine';

const scales = generateScales(seeds);

scales.brand[500];          // seed color
scales.accentPrimary[50];   // lightest accent stop

import { generateScale } from '@wandercom/design-system-tokens/color-engine';

const brandScale = generateScale('#1a1a2e');

import { PRESETS } from '@wandercom/design-system-tokens/color-engine';

const seeds = PRESETS['Ocean Calm'];
const scales = generateScales(seeds);

import { resolveRoleTokens, type BackgroundRole } from '@wandercom/design-system-tokens/color-engine';

const { background, foreground, tokens } = resolveRoleTokens('theme-base', scales);

tokens.text.primary;           // WCAG AA against background
tokens.surface.secondary;      // slightly offset surface
tokens.button.background;      // CTA button fill
tokens.border.primary;         // default border
tokens.semantic.error;         // error color for the mode

import {
  resolveSectionTokens,
  resolveNavTokens,
  type SectionConfig,
} from '@wandercom/design-system-tokens/color-engine';

const hero: SectionConfig = { role: 'theme-dark', img: true };

const section = resolveSectionTokens(hero, scales);
section.background;            // hex background
section.effectiveBackground;   // after image overlay blending
section.tokens.text.primary;   // collapsed to single level when img is present

const nav = resolveNavTokens(hero, scales);
nav.background;                // "transparent" for hero overlap
nav.backgroundBlur;            // frosted-glass tint
nav.ctaBackground;             // CTA button fill
nav.isTransparent;             // true when nav overlays hero

import {
  hexToOklch,
  oklchToHex,
  contrastRatio,
  ensureContrast,
  mixColors,
  alphaBlend,
  getLuminance,
  WCAG_AA,
} from '@wandercom/design-system-tokens/color-engine';

hexToOklch('#e94560');                          // { L, C, h } in OKLCh
oklchToHex(0.7, 0.15, 25);                     // hex with gamut clamping
contrastRatio('#ffffff', '#1a1a2e');             // WCAG 2.x ratio [1, 21]
ensureContrast('#888888', '#ffffff', WCAG_AA);  // adjusted hex meeting 4.5:1
mixColors('#ff0000', '#0000ff', 50);            // linear sRGB interpolation
alphaBlend('#000000', '#ffffff', 0.5);          // composite at alpha

import { generateExportCSS, generateExportJSON } from '@wandercom/design-system-tokens/color-engine';

// CSS with [data-theme="..."] attribute selectors per background role
const css = generateExportCSS(scales);

// Structured JSON with seeds, primitives (scale stops), and modes (semantic tokens)
const json = generateExportJSON(seeds, scales);

import {
  WCAG_AA,              // 4.5 — normal-size text
  WCAG_AA_LARGE,        // 3   — large text / UI elements
  WCAG_AAA,             // 7   — enhanced contrast
  WCAG_TEXT_SECONDARY,  // 5.5 — secondary text
  WCAG_TEXT_MUTED,      // 3.5 — muted/placeholder text
} from '@wandercom/design-system-tokens/color-engine';