Signal Design System (signal-ds)

The single source of truth for every Signal Studio surface — tokens, type, motion, components, voice. Version 2.1.0, prepared 2026-07-15 under the design-system mandate. Supersedes the v1 lock (2026-05-13) and all per-repo token blocks.

Ink on white paper, one indigo (#4f46e5), Geist, hairlines instead of shadows.

Structure

| Path | Contents | |---|---| | docs/ | The system: overview, colour, typography, layout, motion, components, voice, tokens, governance | | tokens/tokens.css | Canonical :root + designed-but-unshipped dark theme | | tokens/tailwind.css | Tailwind v4 @theme mapping — generated, never hand-edited | | src/ | The sixteen React primitives (Button, Field, Card, Wordmark…) | | styles/foundation.css | Component and wordmark styles exported as signal-ds/styles.css |

Consuming

@import "tailwindcss";
@import "signal-ds/styles.css";
@import "signal-ds/tokens.css";
@import "signal-ds/tailwind.css";

npm run build:tailwind   # regenerate the @theme mapping from tokens.css
npm run check            # typecheck, drift gate, build, and package contract tests

Governance, versioning, and the CI drift gate: docs/08-governance.md.

This repo is also the claude.ai/design sync source (design-sync.config.json).