Tokens
Tokens are the shared names for design and code. In product UI, use names like color.text.subtle - not raw hex values.
Start here
Use this in product UI
Use tokens from tokens/semantic/ (for example color.text.subtle, space.300).
Shipped as CSS variables (--tn-*), TypeScript, and Flutter.
Reference only
Palette ramps on the color palette page help choose shades. Do not use ramp names directly in component code.
Example: Green500 is for picking color. Use color.background.brand.bold in code.
How it flows
This is the path from source files to what your app imports. Most teams only use semantic names and CSS variables.
- Primitive tokens/primitive/ Raw color ramps (reference)
- Semantic tokens/semantic/*.json UI roles: text, surfaces, spacing
- Resolved tokens/resolved.json Flat map for tooling
- Shipped @citrii/time-node CSS, TS, Dart
Naming
Names should describe what the token is for. Pattern: category.role.variant.
| Token | Reads as |
|---|---|
color.background.brand.bold |
Brand-colored fill for prominent actions |
color.text.subtle |
Secondary copy, hints, metadata |
space.300 |
Standard spacing step (8px base scale) |
border.radius.md |
Default corner radius for cards |
Live example
Same token, different platforms (after importing @citrii/time-node/css).
Subtle text uses color.text.subtle
- Semantic
color.text.subtle- CSS variable
var(--tn-color-text-subtle)- TypeScript
tokenRef("color.text.subtle")- Flutter
TimeNodeTokens.colorTextSubtle
CSS variables
To build a CSS variable name: replace dots with hyphens and add --tn-.
color.text.subtle → --tn-color-text-subtle space.lg → --tn-space-lg border.radius.md → --tn-border-radius-md
.field-hint {
color: var(--tn-color-text-subtle);
margin-top: var(--tn-space-sm);
}
Code
Install once, import global CSS once, then use the API for your stack.
| Platform | When you need… | API |
|---|---|---|
| CSS | Stylesheets, styleUrl |
var(--tn-…) or tokenRef("…") |
| Angular / TS | Resolved value in logic | tokens["color.text.subtle"] |
| Flutter | Dart theme & widgets | TimeNodeTokens.colorTextSubtle |
Setup and copy/paste snippets: Use Code.
Categories
These groups live in tokens/semantic/. Open each page to see where they are used.