Design tokens

Where tokens live

Design tokens come from @eekodigital/raster, an external package. Raster ships:

• A primitive layer (raw colour palette, spacing, typography, etc.)
• A semantic layer mapping intent (--color-text, --color-interactive, …) onto primitives
• Three themes: light, dark, high-contrast

For the full token model, generation pipeline, and naming conventions, see the Raster repo and its docs site.

Inntrig product theme

Inntrig overrides Raster’s semantic tokens with a sand palette. The override file is apps/web/app/theme.css:

@import "@eekodigital/raster/tokens.css";

/* Inntrig product theme — sand palette overrides */
:root,
[data-theme="light"] {
  --color-bg: var(--color-primitive-sand-2);
  --color-surface: var(--color-primitive-sand-1);
  /* … */
}

[data-theme="dark"] {
  --color-bg: var(--color-primitive-sand-12);
  /* … */
}

apps/web/app/root.tsx imports it before any component CSS so the cascade is correct.

Theming

Themes are applied via a data-theme attribute on the root element (light, dark, or high-contrast). Light is the default via :root so it works without the attribute.

Adding or changing a token

• Want a different shade in the sand palette or to remap a semantic token in Inntrig only? Edit apps/web/app/theme.css.
• Want a new semantic token, a different primitive palette, or a change to the underlying model? That’s a Raster change — open a PR there, then bump @eekodigital/raster in apps/web/package.json.