@six-vallees/tokens

Cairn design tokens, the single source of visual truth for Six Vallées' own surfaces (design system, website, decks, internal ops). Authored in the DTCG format and compiled with Style Dictionary to framework-agnostic CSS variables + a typed JS map.

Cairn is Six Vallées' own system. Client and prospect projects carry their own brand tokens, this package is not meant for them.

Install

Published publicly on npm. No auth, anywhere:

pnpm add @six-vallees/tokens

Use

Import the compiled CSS variables once, at the root of your app:

@import "@six-vallees/tokens/css";

This exposes every token as a --sv-* custom property (e.g. --sv-sys-color-primary, --sv-sys-shape-control). Consume them through your Tailwind @theme bridge, never hardcode a hex. The typed map is available for JS/TS consumers:

import tokens from "@six-vallees/tokens/js";

Exports

| Entry | Contents | | --- | --- | | @six-vallees/tokens/css | :root custom properties (--sv-*) | | @six-vallees/tokens/js | ES module map + .d.ts types |

Architecture

• Source: tokens/*.json (DTCG $value / $type), the thing you edit.
• Build: pnpm build → build/css/tokens.css + build/js/tokens.js.
• Reference tier (ref.*) holds raw scales; system tier (sys.*) holds semantic roles. Components consume sys.* only.