Skip to main content

​
Design tokens

A design token is a named value that represents a design decision. Instead of hardcoding #36AA08 in your components, you use a token like color.brand.primary that resolves to the right value for each platform and theme. Humic stores tokens with a dot-notation key (e.g., spacing.page.gutter) and a type that determines how the value is structured and exported.

​
Token types

Humic supports 14 token types:

​
How color tokens work

Color tokens don’t store raw hex values. Instead, they reference a color scale and a step within that scale. This means changing a scale automatically updates every token that references it. A color token stores:
  • Scale — which color scale (e.g., brand, neutral)
  • Step — which step in the light scale (e.g., 500)
  • Dark step — optionally, a different step for dark mode

​
Color scales

A color scale is a named palette with numbered steps. Each step has a light and dark hex value, giving you automatic dark mode support.
When you export tokens, the export layer resolves the scale reference to the actual hex value for each theme.

​
Primitives

Primitives are the raw foundation values of your design system — the base spacing scale, font sizes, border radii, and other numeric values that tokens can reference. Think of primitives as your system’s building blocks: Tokens can reference primitives instead of storing literal values. When you update a primitive, every token that references it updates automatically.

​
Design systems

A design system is a collection of tokens, color scales, and primitives. One organization can have multiple design systems — for example, a brand system for the marketing site and a product system for the app.

​
Visibility

Each design system has a visibility setting that controls who can access it:

​
Roles

Access is controlled at two levels: Organization level:
  • Admin — full access, manages members and billing
  • Member — sees public and request-access design systems
Design system level:
  • Editor — create and edit tokens, manage API keys (paid seat)
  • Viewer — read and export only (free)
  • Guest — same as viewer, but without org-level visibility

​
Export

Humic stores token values in a platform-agnostic format. The export layer transforms them into the format you need:
  • CSS — Custom properties with light/dark mode support
  • JSON — W3C Design Tokens Community Group format
  • Tailwind — Theme configuration for tailwind.config.ts
  • Figma — Variables API format with collections and modes
  • TypeScript — Typed constant with autocomplete support
The same export logic runs everywhere — whether you pull via the CLI, call the API, or sync from the UI. The output is always identical.