Colours & tokens

The semantic --ds-* contract. Every swatch below reads the live theme, so switch presets or modes to compare.

Runtime CSS (src/tokens/tokens.css) is the token authority; tokens.json is the supported JavaScript/preset projection exported from @gaudi/design-system/tokens.

import tokens from '@gaudi/design-system/tokens';

Colour

Surfaces, text and borders

--ds-color-surface
--ds-color-surface-muted
--ds-color-surface-raised
--ds-color-text
--ds-color-text-muted
--ds-color-text-subtle
--ds-color-border
--ds-color-border-muted
--ds-color-focus

Accent and status families

accent

--ds-color-accent
--ds-color-accent-foreground
--ds-color-accent-muted
--ds-color-accent-subtle

success

--ds-color-success
--ds-color-success-foreground
--ds-color-success-muted
--ds-color-success-subtle

warning

--ds-color-warning
--ds-color-warning-foreground
--ds-color-warning-muted
--ds-color-warning-subtle

danger

--ds-color-danger
--ds-color-danger-foreground
--ds-color-danger-muted
--ds-color-danger-subtle

info

--ds-color-info
--ds-color-info-foreground
--ds-color-info-muted
--ds-color-info-subtle

discovery

--ds-color-discovery
--ds-color-discovery-foreground
--ds-color-discovery-muted
--ds-color-discovery-subtle

attention

--ds-color-attention
--ds-color-attention-foreground
--ds-color-attention-muted
--ds-color-attention-subtle

Charts (categorical)

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8

Use semantic Tailwind utilities (bg-*, text-*, border-*, ring-*) built from these names, never raw hex or palette shades for UI state. Status colours always pair with text or an icon.

Never use colour as the only status cue: status colours always pair with text or an icon.

Radius and density

Corner radius

All corners use --ds-radius (configurable down to 0px). Circles only for intrinsic shapes.

0px4px8px

Density (--ds-space-scale)

Inner padding, gaps and control heights scale with --ds-space-scale (default 1). Prefer gap-* over space-x/y-*. Component CSS uses calc(var(--ds-space-scale, 1) * <length>).

tight 0.75
compact 0.875
default 1
relaxed 1.25
spacious 1.5

Motion

Durations and easings respect prefers-reduced-motion.

Token	Value
`duration.feedback`	`120ms`
`duration.focal`	`560ms`
`duration.overlay`	`320ms`
`duration.state`	`180ms`
`ease.in`	`cubic-bezier(0.7, 0, 0.84, 0)`
`ease.out`	`cubic-bezier(0.16, 1, 0.3, 1)`
`ease.standard`	`cubic-bezier(0.2, 0, 0, 1)`