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.
bash
npm install @signicat/catnip-design-tokenscss
@import "@signicat/catnip-design-tokens/css";CDN
html
<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 | Reference |
|---|---|---|
Color (primitives + semantic light + chart data) | Available | Color tokens |
| Dark semantic color | Available | Same variables, overridden under [data-theme='dark'] when you import dark CSS — see Theming |
| EndUI (whitelabel) | Available | Brand → blue + component overrides under [data-theme='endui'] — see Theming — EndUI |
Component (e.g. --catnip-button-radius) | Available (growing) | Component tokens — defaults on :root; themes override (see also Theming — EndUI) |
| Typography (responsive presets) | Available | Typography tokens |
| Breakpoints (XS–XXL layout bands) | Provisional (planned until UX revises); --catnip-breakpoint-* in default CSS/JS | Breakpoint tokens |
| Spacing | Available | Spacing tokens |
| Border radius | Available | Radius tokens |
| Shadow (elevation + focus) | Available | Shadow tokens |
For each color token, the reference table lists a sample and Copy for the CSS custom property name.