walkingtodo.ai · brand system v2
Indigo Ink.
Two surfaces, one palette. Light is the default — the judicial-brief read, the official surface deliverables ship on. Dark is the control room, for labs and live tooling. Flip the switch: the page is the demo. Click any swatch or the token block to copy.

The palette

Core set is surface-independent. Roles flip per surface — the same copper that underlines a link on cream becomes a resting button on the field.

Light-surface extensions

In active use in the brief deliverables. Grey is muted text on cream (lavender washes out). Hair is the hairline on cream. The lavenders fill tables and code wells. Status tints are data semantics in brief tables only — the muted terracotta is sanctioned there and nowhere else; it never appears as a UI accent. Warm acts, cool gates: interactive states stay copper/amber/dusk. White is paper, not a surface — print ground and translucent panel fills only; on screen, light means cream.

The one rule: gold (amber/copper) is always lit and functional — a hover, an active state, a found clue, a key node — and never ornamental. No gold filigree, foil, crowns, or borders-for-decoration. This is what keeps indigo-and-gold reading as "control room," not Crown Royal. It holds on both surfaces.

Type — resolved

Fraunces carries the thesis register; JetBrains Mono runs the chrome. On brief surfaces, body copy is Fraunces 400 at 16.5px/1.64 (the judicial read); in tools and labs, body is Mono.

Running heading · Fraunces 500
The human never steps away.
The workhorse. All section and document headings.
Display moment · Fraunces 400 / italic
Leverage, not autonomy.
Pull quotes, theses, openers. Lighter, literary.
Logotype only · Fraunces 900
walkingtodo.ai
Black is reserved for the mark. Never 900 in content.
Decided: Fraunces stays · Space Grotesk passed (the AI-startup uniform) · Syne → boatshoes.studio · Hanken Grotesk is the sans if one is ever forced · Newsreader the only free alternative worth a look · GT Alpina the paid revisit. Migration note: earlier deliverables set h2 at 600 and doc titles at 900 — harmonize to 500 / logotype-only-900 on next touch.

Components in situ

Copper rests, amber lights. Cool state is dusk — the gate/✗ side. The palette has no red on purpose; the status tints above are the single, table-scoped exception.

Kicker label A functional link ✗ gated cream-soft well PASSREVIEWFAIL

tokens.css

Mirror of the canonical wtd-tokens.css (v2.1) — the standalone file is the source of truth; if they disagree, the file wins.

copy:root{
  /* ---- core (locked, surface-independent) ---- */
  --wtd-field:#1a0b29;        /* indigo ink — dark surface / ink on light */
  --wtd-field-glow:#2a1240;   /* raised dark / radial accent */
  --wtd-indigo:#4B0082;       /* brand spot — headings & links on light */
  --wtd-amber:#e4b24c;        /* LIT & FUNCTIONAL ONLY — hover/active/found */
  --wtd-copper:#B87333;       /* resting accent — solid elements only */
  --wtd-cream:#fbf1df;        /* light surface / headings on dark */
  --wtd-cream-soft:#ece2cf;   /* body on dark / panels on light */
  --wtd-dusk:#a89cb0;         /* cool secondary — gate/✗, never red */
  --wtd-muted:#9a8fb0;        /* lavender-grey muted text — DARK ONLY */
  --wtd-line:#322640;         /* borders on dark */
  /* ---- light-surface extensions ---- */
  --wtd-ink:#1a0b29;          /* body text on light */
  --wtd-grey:#6b6157;         /* muted text — LIGHT ONLY */
  --wtd-hair:#e3d7c0;         /* hairline on cream */
  --wtd-lav:#D7C8E8;          /* table header fill */
  --wtd-lav-soft:#ECE6F4;     /* panel / code well */
  --wtd-good-bg:#C3D199; --wtd-good-tx:#3F5E1C;   /* brief tables only */
  --wtd-mid-bg:#F0D17C;  --wtd-mid-tx:#6E4310;    /* brief tables only */
  --wtd-bad-bg:#E5AB9B;  --wtd-bad-tx:#8A2C1A;    /* brief tables only */
  /* ---- paper ---- */
  --wtd-white:#ffffff;        /* print ground; translucent panels on cream */
  /* ---- type ---- */
  --wtd-serif:'Fraunces',Georgia,serif;  /* 500 run · 400/italic display · 900 logotype */
  --wtd-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* light = default surface */
[data-theme="light"]{ --wtd-bg:var(--wtd-cream); --wtd-bg-2:var(--wtd-cream-soft);
  --wtd-tx:var(--wtd-ink); --wtd-mut:var(--wtd-grey); --wtd-head:var(--wtd-indigo);
  --wtd-hairline:var(--wtd-hair); --wtd-link-ul:var(--wtd-copper); }
[data-theme="dark"]{ --wtd-bg:var(--wtd-field); --wtd-bg-2:var(--wtd-field-glow);
  --wtd-tx:var(--wtd-cream-soft); --wtd-mut:var(--wtd-muted); --wtd-head:var(--wtd-cream);
  --wtd-hairline:var(--wtd-line); --wtd-link-ul:var(--wtd-amber); }
copied