@zamatica/design-tokens

CSS custom-property design tokens + Google Fonts loader. Zero framework deps. Drop it into any Angular / vanilla / React app.

Install

bun link @zamatica/design-tokens         # local dev (cross-repo)
# or, once published:
bun add @zamatica/design-tokens

Use

1. Import the tokens

In your app's global stylesheet (e.g. apps/<your-app>/src/styles.css):

@import '@zamatica/design-tokens/tokens.css';

Tokens become available as CSS custom properties on :root:

.my-thing {
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: var(--fs-m);
}

2. Load the matching webfonts (one of)

Programmatic (call once at app bootstrap):

import { loadFonts } from '@zamatica/design-tokens';
loadFonts();                       // default: all three families
loadFonts({ subset: 'core' });     // skip Instrument Serif

OR static — paste the equivalent <link> tags into your index.html:

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif&display=swap" rel="stylesheet"/>

The CSS file uses fallback-friendly stacks (var(--mono) → "JetBrains Mono", ui-monospace, …), so missing webfonts degrade gracefully to system mono / sans / serif.

Override tokens

Re-declare any token at :root after the import. CSS cascade does the rest:

@import '@zamatica/design-tokens/tokens.css';

:root {
  --accent: oklch(0.7 0.2 250);            /* cool blue brand */
  --bg:     #0e0e10;                       /* deeper bg */
  --sans:   "Geist Sans", system-ui, sans-serif;
}

Per-theme overrides via attribute selectors:

[data-theme="light"] {
  --bg:   #FAFAF7;
  --fg:   #15151A;
  /* … */
}

Token reference

See src/tokens.css — the file is the canonical reference, grouped and commented by category (surface, foreground, accent, hue, line, status, type, fs, spacing, motion).

Status

v0.x — seed values are deliberately opinionated (warm near-black + ochre, dev-tool minimal). Descendants are expected to override. Token NAMES (e.g. --accent, --hue-warm) are the public surface; downstream code references those, not the literal color values.