Color tokens

@signicat/catnip-design-tokens currently exposes color only. Variables use the prefix --catnip-color-.

What you get

1. Primitives — base (black/white), purple (Signicat purple scale; source hexes), brand (same ramp as purple, exposed for semantic “primary” theming), mint, accent (--catnip-color-accent-300, Mint 300 by default), neutrals grey / steel / graphite, and blue, green, orange, red.
2. Semantic (light) — roles for UI structure: content, background, border, and chart data (--catnip-color-data-1 … --catnip-color-data-8). Values often reference primitives via var(--catnip-color-…).
3. Semantic (dark) — the same semantic names are overridden when dark CSS is loaded; primitives on :root stay shared unless you change them.

Reference table

Exported color keys from the JS bundle. Use the Base, Background, Content, Border, and Data tabs to browse roles. Base is primitives and palette scales (for example grey-900, brand-500, base-black), in Style Dictionary export order. Semantic tabs list background-*, content-*, border-*, and chart data-* tokens. The search field sits above the tabs and matches every group at once; results are shown in sections (Base, Background, …) when you search.

No color tokens were found. Build the design-tokens package (e.g. pnpm run build in packages/design-tokens) and restart the docs dev server.

Imports

Light (default)

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

Light + dark overrides

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

Apply data-theme="dark" on html or a subtree so [data-theme='dark'] rules apply.

Examples

.text {
  color: var(--catnip-color-content-neutral-strongest);
}

.surface {
  background: var(--catnip-color-background-neutral-subtlest);
}

.accent {
  color: var(--catnip-color-brand-500);
}