docs: fix README consumer on-ramp (host + fonts); fold tracking into WP-0003 T06
- 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:
16
README.md
16
README.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user