@doitrix/tokens

The design decisions of the Doitrix system, in one place. Colour, type, space, radius, elevation, motion and layering are decided here once; every other package consumes them and none may invent its own.

bun add @doitrix/tokens

Three tiers

| Tier | Example | Who references it | |---|---|---| | Primitive | --doitrix-red-600, --doitrix-neutral-950 | Only the themes | | Semantic | --doitrix-color-surface, --doitrix-color-fg-muted, --doitrix-color-accent | Components, via the component tier | | Component | --journey-primary, the Tailwind names (bg-card, text-muted-foreground) | Component source |

A theme remaps the semantic tier and nothing else. Rebranding edits a primitive; dark mode edits semantics; neither touches a component.

Use it

Plain CSS — every token as a custom property:

@import '@doitrix/tokens/tokens.css';

.panel { background: var(--doitrix-color-surface-raised); padding: var(--doitrix-space-4); }

Tailwind v4 — the same tokens as a theme, plus base styles, motion and a dark: variant that follows [data-theme]:

@import 'tailwindcss';
@import '@doitrix/tokens/tailwind.css';

Utilities use the shadcn vocabulary (bg-primary, text-muted-foreground, border-input, ring-ring) mapped onto the Doitrix roles, so any shadcn-vue component you add later is themed with no edits. Type is by role: text-title-md, text-body-sm, text-label-lg.

TypeScript — typed constants, tree-shakable:

import { duration, ease, space, themes, contrastRatio } from '@doitrix/tokens'

Themes

Light is the default; prefers-color-scheme: dark switches automatically unless data-theme="light" is set. Set data-theme="dark" on <html>, or on any subtree, to force it. Every selector is wrapped in :where(), so a plain :root { --doitrix-… } override in your own CSS always wins, whatever the import order.

Decisions

• Palette: black and brand red (red-500 #FF0000, red-600 #BC0202, red-800 #830000) over a neutral ramp, in OKLCH.
• Contrast is tested for every text/surface pairing in both themes (AA: 4.5 for text, 3 for focus rings and borders).
• danger is a fill, danger-ink is for text and borders. On dark surfaces no single red passes AA in both roles.
• Space is a 4px scale. Durations sit on a 40ms step: press 120 · fast 160 · micro 200 · state 280 · morph 360 · enter 440 · overlay 560 · travel 720. Each easing ships with its GSAP equivalent.
• Type: Google Sans for UI and reading, Montserrat (bold) for display and headline roles, Geist Mono for figures. Fonts are not bundled — install @fontsource-variable/google-sans, @fontsource-variable/montserrat and @fontsource-variable/geist-mono, or load them from Google Fonts.

Editing

The source is src/. css/tokens.css and css/tailwind.css are generated — run bun run sync from the repository root, never edit them by hand.