WeLaunch Design Tokens

Colour and type values are NOT stored in this document. The single source is ~/Dev/welaunch-ui/packages/tokens/tokens.json, which generates tokens.css, a typed TS module, the Figma variables export, and the welaunch-design skill's reference stylesheet. Read values there, never from a doc.

The rule, set 2026-09-06: a copy is safe when a machine makes it and a liability when a person does. On 2026-09-05 seven places held brand hex values, five of them hand-maintained. Every one that had drifted was hand-maintained; nothing generated had drifted. The tables that used to sit here were two of the five.

Values (colour, type, spacing): tokens.json is the source. This is not new, CLAUDE.md has said so all along; what was missing was enforcement, which is why five hand-kept copies drifted anyway. Figma is where a change is decided; it is not real until it is in the JSON. Artwork (logos, marks, shapes): Figma is the source. This is the genuinely new rule. 00 Brand/Logo + Mark/ is a generated export folder and is never hand-edited. On 2026-09-05 it was hand-edited and Figma had already moved past it: the Square Mark had been rescaled ~9% and the local copy also carried an off-token indigo.

⚠️ Updated 2026-09-05. launch-blue was re-anchored to hue 216 (#0066FF is the new 700) so button labels clear WCAG AA at full saturation and brightness, and the neutrals were given a matching cool bias because pure grey reads as unchosen. Teal was demoted from primary-button fill to accent: a teal can never carry a white label. Source of truth is ~/Dev/welaunch-ui/packages/tokens/tokens.json; this file mirrors it. Rationale and every rejected option: 00 Brand/Design System/Brand Decisions — 2026-09/.

The single source of truth for color tokens across Figma, code, and brand collateral. Updated June 9, 2026

This doc defines a two-tier token system. Build it once as Figma variables and bind every component to the semantic layer — never to a raw hex or primitive. Change a value in one primitive and everything downstream updates.

Naming migration: The old Blueprint names (Azure Radiance / Persian Green / Persian Blue / Light–Dark Neutral / Gray) are retired in favor of brand-ownable names. Mapping is in the table below. The Brand Blueprint Color System section reflects these names.

---

Tier 1 — Primitives

The raw palette. Full 10-step ramps for the three brand colors plus flat neutrals. Primitives are referenced only by semantic tokens, never by components directly.

launch-blue (identity) — base = 700

launch-teal (action + warmth) — base = 600

launch-indigo (depth + stage) — base = 800

Neutrals (flat)

Partner (co-branding only)

---

Tier 2 — Semantic tokens

What components bind to. Names describe function, not appearance.

Brand

Text

Type rule: heading text is text/heading (ink) or text/heading-accent (blue) — never teal. Teal in type is reserved for text/label.

Surface

Border

State

---

Action tokens + the CTA swap rule (use Figma modes)

The Blueprint's CTA swap rule — blue CTAs on light backgrounds, teal CTAs on dark backgrounds — is encoded as a mode on a single set of action tokens. Bind buttons to these tokens once; switching the frame's mode (On Light / On Dark) flips the colors automatically.

This guarantees the primary CTA always contrasts its surroundings and keeps blue + teal at equal visibility across the experience.

---

Distribution guardrail — the 60/25/15 rule

A page or asset should land roughly at: ~60% neutrals (cloud/white/ink) · ~15% brand/primary (blue) · ~13% brand/action (teal) · ~12% brand/depth (indigo). Neutrals do the heavy lifting; brand colors are signals, not surfaces.

---

Figma setup notes

• Two collections: Primitives (the ramps + neutrals above) and Tokens (semantic, with two modes: On Light, On Dark).
• Semantic variables are aliases that point at primitives — never raw hex.
• Components reference Tokens only. If a component reaches into Primitives, that's a bug.
• Group with / so Figma nests them (e.g. brand/primary, action/primary-bg).

Code mirror (CSS custom properties)

:root {
  /* primitives — abbreviated; full ramps above */
  --launch-blue-700: #0066FF;
  --launch-teal-600: #00A896;
  --launch-indigo-800: #0B27C5;
  --cloud: #F2F6FB; --mist: #DCE2E9; --ink: #292A2D;

  /* semantic */
  --brand-primary: var(--launch-blue-700);
  --brand-action:  var(--launch-teal-600);
  --brand-depth:   var(--launch-indigo-800);
  --text-default:  var(--ink);
  --surface-page:  var(--cloud);
  --border-subtle: var(--mist);
}

Since 2026-09-03 the implementation source is code: ~/Dev/welaunch-ui/packages/tokens/tokens.json (light + dark modes), mirrored into Figma variables and into the welaunch-design skill. This doc is the human-readable reference; if a value here disagrees with the package, the package wins and this doc gets corrected. See Design System — @welaunch-ui.

Radius scale softened (2026-09-07)

Conner asked for more rounded, softer corners across every WeLaunch surface. The whole scale moved one step in tokens.json: radius-sm 8 to 10, radius-md 12 to 14, radius-lg 16 to 20, radius-xl 20 to 24, radius-panel 24 to 28, radius-card-lg 28 to 32, radius-field 12 to 14; radius-full unchanged. The build regenerated tokens.css, the TS module and the Figma variables file; 477 library tests pass. Consumers pick it up on their next dependency refresh: the Client Workspace (npm), the site theme, and the Atlas app (vendored tarballs). Figma Brand — WeLaunch needs the regenerated variables file re-imported so the design authority matches the code.

Open token questions from the Atlas mockups (2026-09-07)

• Frosted glass. No blur or translucent-surface token exists. Glass as a real surface is a new token pair (surface translucency plus blur radius) and a Figma decision first, with a contrast re-check on every foreground over it. The mockups carry depth with shadows and radii instead.
• Theme-flipping accent icon. No semantic token names an accent icon colour that flips with the theme. The reader's round GitHub button needs launch-blue/800 on light and launch-blue/300 on dark (6.1:1 and 6.7:1); both values exist, the pair has no name. Proposed name icon-accent, to be added in Figma and tokens.json together.
• Serif title face and prose measure remain open from the design direction.