docs: fix README consumer on-ramp (host + fonts); fold tracking into WP-0003 T06
Some checks failed
ci / check (push) Has been cancelled
ci / release (push) Has been cancelled

- README: correct the Node-tooled install host (placeholder gitea.example.com →
  gitea.coulomb.social/coulomb/whynot-design) and rewrite the Type/font prose to
  match the actual tokens (system font stacks, no webfont; Plex kept as history).
- WHYNOT-WP-0003 T06: add a "Tracking whynot-design from a consuming repo" README
  section (pin → inspect → drift → adopt) and reconcile the install pin once
  T01/T02 publish a tag.
- Record the README fixes as ADHOC-2026-06-27.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-27 13:42:55 +02:00
parent 75051a7737
commit 8165f8ab71
3 changed files with 52 additions and 11 deletions

View File

@@ -39,7 +39,7 @@ Framework-agnostic by design. Consumers do **not** re-implement components per f
### Node-tooled consumer (React, Vite, Next, Vue, …)
```sh
pnpm add git+ssh://git@gitea.example.com/whynot/whynot-design.git#v0.2.0
pnpm add git+ssh://git@gitea.coulomb.social/coulomb/whynot-design.git#v0.2.0
```
```js
@@ -202,7 +202,7 @@ The system reads like **engineering graph paper** — precise hairlines, lots of
### Type
- **Family**: `IBM Plex Sans` for everything UI/body. `IBM Plex Mono` for labels, code, and stage markers. `IBM Plex Serif` for the occasional editorial pull-quote. (See font substitution note in *Fonts* below.)
- **Family**: native system stacks — `--ff-sans` (`ui-sans-serif, system-ui, …`) for UI/body, `--ff-mono` (`ui-monospace, …`) for labels, code, and stage markers, `--ff-serif` (`ui-serif, Georgia, …`) for the occasional editorial pull-quote. **No webfont is loaded.** (See font note below for the history.)
- **Weights**: 300 (display only), 400 (body), 500 (UI / headings), 600 (occasional emphasis). Never 700+ — too marketing.
- **Tracking**: tight on display (`-0.035em`), neutral on body, **wide on uppercase labels** (`0.08em` — this is the one signature move).
- **Eyebrows everywhere**: short uppercase mono labels above titles (`STAGE`, `SIGNAL`, `PROTOTYPE`). They are the system's main rhythmic element.
@@ -340,14 +340,8 @@ These are allowed and preferred over raster icons in some contexts:
---
## A note on font substitution
## A note on fonts
The control repo did not ship font files. **IBM Plex Sans / Mono / Serif** were chosen as a fresh pairing because:
The token layer uses **native system font stacks**`--ff-sans` (`ui-sans-serif, system-ui, …`), `--ff-mono` (`ui-monospace, …`), `--ff-serif` (`ui-serif, Georgia, …`). **No webfont is loaded.** These stacks were synced from the canonical React designbook (WHYNOT-WP-0002 T06); they keep the neutral, technical-document feel while staying offline-safe and dependency-free.
- The "Plex" family was designed by IBM as an explicitly *neutral, technical-document* family — the same use-case as this system.
- All three (sans, mono, serif) share metrics, so they mix cleanly in templates and tables.
- They are openly licensed (SIL OFL) and available on Google Fonts.
Plex is currently loaded from Google Fonts (see top of `colors_and_type.css`). For offline use, drop the `.woff2` files into `fonts/` and swap the `@import` for a local `@font-face` block.
> **🟨 Substitution flagged**: there was no specified brand font; IBM Plex is a choice made here. If `whynot` later adopts a different brand font, replace `--ff-sans` / `--ff-mono` / `--ff-serif` in `colors_and_type.css` and everything downstream will follow.
History: **IBM Plex Sans / Mono / Serif** was the earlier pairing — a neutral IBM technical-document family with shared metrics across sans/mono/serif, SIL OFL, available on Google Fonts. It was dropped in favour of system stacks. To reintroduce a brand webfont, add an `@font-face` block and point `--ff-sans` / `--ff-mono` / `--ff-serif` at it in `colors_and_type.css` — everything downstream follows.