Design tokens

Design tokens are the single source of truth for naming and storing design decisions in Catnip. They ship as CSS custom properties (--catnip-*) and JavaScript exports from @signicat/catnip-design-tokens.

npm install @signicat/catnip-design-tokens

@import "@signicat/catnip-design-tokens/css";

CDN

<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/default.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/dark.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/endui.css" />

See Theming — CDN and Installation — CDN.

Currently shipped

Category	Status	Notes	Reference
Color	Available	Primitives, semantic light and chart data colors	Color tokens
Dark semantic color	Available	Same variables, overridden under [data-theme='dark'] when you import the dark CSS	Theming
EndUI (whitelabel)	Available	Brand → blue plus component overrides under [data-theme='endui']	Theming — EndUI
Component	Available (growing)	e.g. --catnip-button-radius, --catnip-graphic-*. Defaults on :root; themes override them	Component tokens
Typography	Available	Responsive presets	Typography tokens
Breakpoints	Provisional	XS–XXL layout bands (--catnip-breakpoint-*) in default CSS/JS; planned until UX revises them	Breakpoint tokens
Spacing	Available		Spacing tokens
Border radius	Available		Radius tokens
Shadow	Available	Elevation and focus	Shadow tokens

For each color token, the reference table lists a sample and Copy for the CSS custom property name.