Color tokens

Signal Scarlet is the color language: a monochrome graphite base lit by a single high-contrast scarlet accent, with an inverted "bone" light mode. Every color is a token authored in OKLCH — no component hardcodes a color, and the whole palette is generated from a single source (scripts/tokens.mjs) into both the app CSS and the installable registry, so they can never drift.

The signal-* token names map to the brand accent 熾火 Signal Scarlet (#EE343B) — the one loud color in an otherwise achromatic system.

The system has three tiers:

1. Primitives — OKLCH ramps (50–950) per hue family.
2. Semantic — per-mode aliases (--background, --primary, …) that point at primitive steps. Components only ever use these.
3. Utilities — every token and ramp step is exposed to Tailwind as bg-*, text-*, border-*.

Dark is primary. Below, each semantic swatch is split light / dark so you can see how a single token resolves in both modes.

Surfaces & text

The neutral spine of the UI: backgrounds, surfaces, borders and text. These come from two fully achromatic graphite ramps — light bone and dark carbon — and flip between modes for contrast.

Primary & focus

The signature accent. --primary is Signal Scarlet (#EE343B) in both modes — the red is dark enough to read on the light "bone" surface, so no light-mode swap is needed. The focus --ring shares it, and --signal-spark (red-on-bone text and hover accents) deepens slightly in light mode for contrast.

Accents

Status and category colors with shared hues across both modes. Each fill has a paired foreground token (--magenta-foreground, --success-foreground, …) chosen for legibility — the ratio shown on each chip is the measured WCAG contrast, and the build fails if any pair drops below AA (4.5:1).

Primitive ramps

Every hue family as a full 50–950 OKLCH ramp. The design's signature values are pinned at their natural step (e.g. signal-400, magenta-500); the rest of each scale is generated for hover, active and subtle-background states. Use them directly when a semantic token isn't enough — e.g. bg-magenta-300 for a faint wash or border-cyan-700 for a darker edge.

Usage

• Never hardcode a color. Reach for a semantic utility first (bg-primary, text-muted-foreground, border-border-strong), then a ramp step (bg-success-200) when you need a specific tint.
• Pair fills with their foreground. On an accent fill, use the matching text-*-foreground token so contrast stays correct.
• To change the palette, edit scripts/tokens.mjs and run pnpm gen:tokens — the CSS, the registry, and this page all update together.