From the screen
into the specimen.

The platform reads on cream paper. Every surface, every line of type, every line of rule derives from three layered ramps. Avoid pure white — its coldness on a 4K panel tires older eyes within hours of clinical use.

Paper ramp — surface layers

Ink ramp — text on paper

Rule ramp — borders, dividers, hairlines

Seven semantic accents replace the 60+ scattered hex values currently spread across nine repos. Every accent is vetted against --paper-base — the primary surface — for WCAG AA contrast or stronger.

Body baseline lifts from 16 px to 18 px — the single most impactful change for our 40+ users. Headings de-escalate proportionally; line-height generous; tap targets ≥ 44 px. All four families are already deployed in at least one sigmacog repo, so no new font dependency.

Type scale

Reading specimen

Nine properties; nine different navies, eight different ambers, eight different greens. Every "brand role" has fragmented into a constellation of near-misses. One unified accent token absorbs them all.

Before — nine palettes (top three hues per repo)

After — one paper, four ink tones, seven accents

The two light-theme prior arts — BrainQ10 (paper/ink/sapphire) and MyndScape (sage/forest) — already work. We collapse the seven dark repos onto BrainQ10's foundation rather than invent a new aesthetic.

Layout, structure, copy, and JavaScript are unchanged. Only color values, font-family, font-size, and line-height shift. Every dark frame on the left is current production; every light frame on the right is the proposed migration target.

Nav bar

Buttons

Form field

Card

Data table

Alerts

Each property keeps a single accent role to preserve its identity within the family — EEG stays cyan-flavored, VisioMynd stays vermilion-flavored, SoraMynd stays jade-flavored. The shared paper-ink-rule foundation makes the family read as one product.

The complete token set, ready to paste into each repo's :root. Per-repo migration touches CSS only — no JavaScript, no HTML structure, no functional logic.

tokens.css — single source of truth

/* sigmacog design tokens v0.1 — light theme */
:root {
  /* paper · ink · rule */
  --paper-deep:    #efe9d8;
  --paper-base:    #f6f1e4;
  --paper-raised:  #fbf8ef;
  --paper-card:    #ffffff;
  --ink-primary:   #0c1620;
  --ink-secondary: #394a5e;
  --ink-muted:     #6a7a8d;
  --ink-faint:     #a2adba;
  --rule-strong:   rgba(12,22,32,.22);
  --rule:          rgba(12,22,32,.12);
  --rule-soft:     rgba(12,22,32,.08);
  --rule-faint:    rgba(12,22,32,.04);

  /* brand · accent · signal */
  --brand:        #1e4a8f;
  --brand-deep:   #14315c;
  --brand-light:  #4a78c2;
  --brand-tint:   rgba(30,74,143,.08);
  --accent-cyan:  #0e7d8e;
  --accent-teal:  #0f8f72;
  --accent-lavender: #6a4bb1;
  --signal-warn:    #8a5e08;
  --signal-warn-bg: #bd8411;
  --signal-danger:    #c8442a;
  --signal-danger-bg: #e0654a;
  --signal-success:   #0f8f72;

  /* typography */
  --font-display: 'Fraunces','Noto Serif TC',Georgia,serif;
  --font-italic:  'Crimson Pro','Noto Serif TC',Georgia,serif;
  --font-body:    'IBM Plex Sans TC','Noto Sans TC',system-ui,sans-serif;
  --font-mono:    'IBM Plex Mono','JetBrains Mono',monospace;

  --text-xs:    0.875rem;
  --text-sm:    1rem;
  --text-base:  1.125rem;  /* ← 40+ baseline */
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.375rem;
  --text-4xl:   3.125rem;
  --text-display: 4.5rem;

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.75;
  --lh-loose: 1.85;

  --tap-min: 44px;
}

Migration sequence — 1 → 9

1. Place tokens.css in each repo — copy the same file into css/tokens.css (or framework equivalent). No build pipeline required.
2. Map existing variables forward. In each repo's :root, replace declarations with token references — e.g. --navy: var(--brand-deep). Existing component CSS continues to work via the indirection.
3. Flip body background from var(--navy) family to var(--paper-base); flip default text color to var(--ink-primary).
4. Sweep hardcoded hex. Any literal #xxxxxx in component CSS gets mapped to its closest token role. Estimate 30–90 minutes per repo.
5. Set body font-size to var(--text-base) (1.125 rem). Adjust component sizes proportionally — most will already scale via em-based padding.
6. Verify focus halos. Every interactive element receives box-shadow: 0 0 0 3px var(--brand-tint) on :focus-visible.
7. Audit on staging — push to staging branch, walk every operator-facing screen, log any deviation. No prod deploy until the family reads as one.

Non-goals

• No layout restructure. Grid, flex, spacing rhythms untouched.
• No JavaScript edits. No HTML structural changes.
• No iconography swaps. No new dependencies.
• No animations or transitions added beyond what already exists.
• No authentication, session, or security flow changes.