Tokens
Discover the installed CSS contract without copying brand values.
The theming contract is defined in Foundations, generated
from the /llms.txt preamble. Follow the import order in
Installation; Vite, Next.js and plain CSS consumers read
the same root variables. No provider is needed.
Discover names, not copied values
/agent-contract.json records the installed token package
version and every supported token name with its source file, Night included.
This is an inventory, not permission to use every colour in chrome;
the foundations govern usage. Values remain owned by @namche/design-tokens.
| Need | Use |
|---|---|
| Page and running text | bg-background text-foreground |
| Primary action | Button with its default variant |
| Card | Card, or bg-card text-card-foreground rounded-card |
| Space | Existing Tailwind scale (gap-4, p-4) or semantic gap-stack, px-card-x, px-page |
| Type | Existing type scale and font-sans, font-mono, font-display |
| Hairline weight | border-stroke-hairline or border-[length:var(--hairline)] (the bare border default) |
| Stroke / bold weight | border-stroke / border-stroke-bold, with the same ink token |
| Chart series | var(--chart-1) through var(--chart-5) |
Use font-display for a portable heading family; this docs site's
font-heading alias is local, not a token-package export. Arbitrary geometry
may be needed for a chart or positioning calculation; do not turn a one-off
layout value into a new brand token.
Day and Night
Since @namche/design-tokens 3.0.0 the tokens come from the brand system
(fizzybubbele/namche-production) and carry Night again. Put the dark class or
data-mode="night" on <html> and the bridge re-points every semantic
variable; components keep reading bg-background, text-foreground and the
rest. Do not reach for --night-* or dark: in a component.