Add visual design language (IBM/Carbon-inspired) and schedule it as M1.5

Defines the visual contract before the design-application work, so M2+ build on settled tokens.

- docs/architecture/09-visual-design.md: principles + deliberate divergences (square chrome, free color/theming), token system (IBM Plex type, 8px spacing, role-based color, motion), component conventions, and a source-repo map for extending the research
- docs/architecture/visual-specimen.html: standalone kitchen-sink specimen with a live theme x accent switcher; doubles as the tokens.css sandbox
- IMPLEMENTATION-PLAN: new M1.5 'Visual design foundation' milestone, plus ground-rule/cross-cutting/reference wiring
- index links: 00-overview, CLAUDE.md, AGENTS.md (architecture playbook now 00-09)

Applying the design to the M1 surfaces is deferred to a separate session.

docs/IMPLEMENTATION-PLAN.md

@@ -27,7 +27,9 @@ doc before implementing.
 - **Modals via a registry + coordinator + shell** (see [Architecture 03](architecture/03-modal-system.md)),
   not ad-hoc conditional rendering.
 - **CSS Modules + design tokens** (`styles/tokens.css`); themes flip
-  `[data-theme]`. Vega theme follows the UI theme.
+  `[data-theme]`. Vega theme follows the UI theme. The design language behind the
+  tokens — type, spacing, color roles, components, themes — is defined in
+  [Architecture 09](architecture/09-visual-design.md) and established in M1.5.
 - **Editor: Monaco**, **self-hosted from npm + raw `monaco-editor` API** (not the
   CDN loader / `@monaco-editor/react` wrapper — decided; rationale in
   [Architecture 08](architecture/08-vega-editor-techniques.md#decision--monaco-integration-self-hosted-raw-api)).
@@ -44,6 +46,7 @@ doc before implementing.
 |---|-----------|---------|------|
 | **M0** | Skeleton ✅ | Repo builds, tests run, empty shell renders | — |
 | **M1** | **MVP core loop** | Author a Vega-Lite snippet, see it render live, it persists | §02, §03A–C, §04, §09A |
+| **M1.5** | Visual design foundation | Apply the design language: tokens, IBM Plex, restyled M1 surfaces, chart theme | [arch 09](architecture/09-visual-design.md) |
 | **M2** | Editor robustness | Draft/Published, validation, schema autocomplete, fit modes | §03D–E, §04, §07(editor) |
 | **M3** | Datasets | Named reusable data + reference resolution in preview | §05, §03F, §09B |
 | **M4** | Chart Builder | No-JSON chart composition from a dataset | §06 |
@@ -51,7 +54,8 @@ doc before implementing.
 | **M6** | Shell polish | Resize/toggle panes, routing, shortcuts, toasts, a11y, offline | §01, §10 |
 
 **MVP boundary = end of M1** (a genuinely usable single-user chart authoring loop).
-M2 makes it *robust*; M3–M6 make it *complete*. Ship/dogfood after M1, iterate.
+M1.5 makes it *look right*; M2 makes it *robust*; M3–M6 make it *complete*.
+Ship/dogfood after M1, iterate.
 
 ---
 
@@ -109,6 +113,43 @@ preview, and have it survive reload. Single source kind: inline-data specs only
 
 ---
 
+## M1.5 · Visual design foundation  →  *make the MVP look like itself*
+
+**Goal:** apply our design language so the running MVP looks deliberate, and every
+later milestone builds on settled tokens instead of placeholders. The expensive part
+(the design decisions) is already done — this milestone is *application*, not
+invention. See [Architecture 09 · Visual Design Language](architecture/09-visual-design.md)
+and the companion `visual-specimen.html`.
+
+**Styles**
+- Port the settled specimen tokens into `styles/tokens.css` (IBM-Plex type scale,
+  8px-based spacing, role-based color, square chrome, motion); light + dark themes
+  via `[data-theme]`.
+- Self-host **IBM Plex Sans + Mono** in `styles/base.css` via `@fontsource`
+  (offline/PWA — never a CDN).
+
+**App**
+- Restyle the four M1 surfaces against the tokens: App shell, SnippetLibrary,
+  SpecEditor (Monaco theme follows `[data-theme]`), LivePreview. Tokens only — no
+  raw hexes, no hardcoded hues in components.
+- Establish the reusable component conventions (buttons, fields, list rows, status,
+  focus ring) that M2–M6 reuse.
+
+**Core**
+- Align `src/core/vega-themes.ts`: chart `Config` per theme + a categorical
+  `range.category` palette (clone `carbon-design-system/carbon-charts` for the
+  sequence — see Architecture 09 §7).
+
+**Tests**
+- Light: the design is mostly visual — a token/theme smoke check, trust the eye.
+
+**Manual checks**
+- The real app looks deliberate in both themes; theme flip repaints UI + chart.
+- Keyboard focus ring visible; text/UI contrast passes AA in light and dark.
+- No placeholder styling remains on the M1 surfaces.
+
+---
+
 ## M2 · Editor robustness
 
 **Goal:** the editor becomes trustworthy — draft vs published, schema-aware
@@ -223,7 +264,8 @@ the reference.
 
 **App**
 - Settings **modal** (Appearance/Editor/Performance/Formatting), Apply/Cancel/Reset,
-  dirty indicator; wire render-debounce + theme + date-format through to the app.
+  dirty indicator; wire render-debounce + theme + date-format through to the app
+  (the themes themselves already exist from M1.5 — this adds the switcher UI).
 - Header **Import**/**Export** (direct file dialog / download, no modal).
 - Date formatting util (smart/iso/custom) used by the library list.
 
@@ -261,6 +303,10 @@ offline reload works; install as standalone; reduced-motion honored.
 
 ## Cross-cutting, do-as-you-go
 
+- **Build to the design language:** the foundation lands in M1.5; from M2 on, every
+  new component uses the [Architecture 09](architecture/09-visual-design.md) tokens
+  and conventions — no placeholder styling, no raw hues. Staying on it is the
+  do-as-you-go part.
 - **i18n** (optional, deferred): if translation is wanted, split a portable i18n
   registry (no React) from the app-layer bindings, mirroring the `core` ↔ `app`
   boundary. M1–M6 can ship English-only with date formatting locale-aware (§10).
@@ -286,3 +332,4 @@ The **how** behind each milestone is documented self-containedly in
 | Column type inference + dataset profiling | [06 · Type Inference & Profiling](architecture/06-type-inference.md) |
 | Unique names + import auto-suffix, snippet↔dataset links, rename propagation | [07 · Naming & Relationships](architecture/07-naming-and-relationships.md) |
 | Monaco setup, Vega-Lite schema service, editor patterns mined from vega/editor | [08 · Vega Editor Techniques](architecture/08-vega-editor-techniques.md) |
+| Design language: tokens, type, spacing, color roles, components, themes | [09 · Visual Design Language](architecture/09-visual-design.md) |