# Keith de Alwis design system (v1.2.0)

> The one brand system for everything carrying Keith de Alwis's name (de-alwis.com): web, decks, diagrams, reports, social and print. Night (dark) is the default theme; Paper (light) is for documents and print. Mint is the only accent and appears once per page.

Rules that matter most:
- Load https://design.de-alwis.com/v1/tokens.css and use tokens by name; never hard-code colours.
- Manrope Light 300 for headlines (two beats: statement in ink, turn in text-muted); DM Sans Light 300 for body. Sentence case, British English, no em dashes, no exclamation marks in headlines.
- Joined, not boxed: hairline rules separate things; only the one thing that matters gets a box.
- Logos and node graphics are supplied files. Copy them; never redraw, recolour or retype them.
- Node graphics: Night grounds only, one per page at most, at a natural rhythm (cover, close, a few section openers).
- Icons: Phosphor 2.1.1 only (https://design.de-alwis.com/v1/assets/icons/icons.json), Light weight by default, always beside a label, ink unless it marks the one mint thing. No other icon set, no emoji, no vendor logos.
- Every footer carries de-alwis.com. Never invent figures; label sample data.

## Brand book
- [Foundations](https://design.de-alwis.com/v1/brand/00-foundations.md): https://design.de-alwis.com/foundations/
- [Strategy](https://design.de-alwis.com/v1/brand/05-strategy.md): https://design.de-alwis.com/strategy/
- [Voice and content](https://design.de-alwis.com/v1/brand/20-voice.md): https://design.de-alwis.com/voice/
- [Logo](https://design.de-alwis.com/v1/brand/10-logo.md): https://design.de-alwis.com/logo/
- [Illustration and imagery](https://design.de-alwis.com/v1/brand/30-illustration-and-imagery.md): https://design.de-alwis.com/illustration/
- [Slides and diagrams](https://design.de-alwis.com/v1/brand/40-slides-and-diagrams.md): https://design.de-alwis.com/slides-and-diagrams/
- [Formats](https://design.de-alwis.com/v1/brand/50-formats.md): https://design.de-alwis.com/formats/

## Machine-readable
- [Index](https://design.de-alwis.com/design-system.json)
- [Tokens JSON](https://design.de-alwis.com/v1/tokens.json)
- [Tokens CSS](https://design.de-alwis.com/v1/tokens.css)
- [Components](https://design.de-alwis.com/v1/bundle.js) on window.KDA, types at https://design.de-alwis.com/v1/index.d.ts
- [Icons](https://design.de-alwis.com/v1/assets/icons/icons.json): Phosphor 2.1.1, files at https://design.de-alwis.com/v1/assets/icons/phosphor/<weight>/<name>.svg