@dataimago/tokens

Canonical design tokens for the dataimago ethical AI design system.

What's in the box

• src/*.json — the hand-authored JSON sources (colors, typography, spacing, effects, etc.).
• dist/tokens.css / dist/tokens.scss — CSS custom properties emitted from the JSON sources, theme-aware ([data-bs-theme] + prefers-color-scheme).
• dist/index.{mjs,cjs,d.ts} — typed JS/TS imports for token values.

Palette

• ink — warm neutrals, 50–900
• cream — warm paper, 50–500
• copper — canonical interactive color (primary on light mode at 500, hover at 600)
• accent — emancipation copper-red, reserved for high moral weight

All semantic tokens (content.primary, surface.page, interactive.primary, etc.) resolve to values in that palette.

Usage

import tokens from "@dataimago/tokens";
import colors from "@dataimago/tokens/colors";

// In CSS:
// @import "@dataimago/tokens/css";

Authoring

Edit JSON under src/ — this package is the source of truth. Run pnpm --filter @dataimago/tokens build to regenerate dist/.

Versioning

Changes go through Changesets. Any palette or semantic-token change is at least a minor version bump in alpha.