design-kit

1# Design kit
2 
3A native look comes from Apple's parts. A custom look comes from your own
4parts: your sidebar row, your button, your checkbox, your icons. SwiftUI
5draws all of them. A kit is those parts, the numbers behind them, and one
6page that shows every part in every state.
7 
8Most apps keep Apple's parts and only pick an accent color (`design-system`
9skill). Build a kit when the parts themselves must change. To copy the look of an existing app,
10call the Skill tool with `design-from-app` first: it measures the app and
11then comes back here.
12 
13Everything lives in `Sources/<App>/DesignKit/`. Code for every step:
14[parts.md](parts.md).
15 
16## 1. Write the spec
17 
18Write `design/KIT.md` from [kit-spec.md](kit-spec.md): three words for the
19feel, the tokens, the type scale, the icon rules, and one section per part
20with its sizes and states. Agents build from this page and review against it.
21 
22Check: every part the app's screens need has a section with its sizes and
23its states.
24 
25## 2. Tokens in three layers
26 
27`DesignKit/Tokens.swift`:
28 
291. **Palette**: raw colors, named by hue and step (`gray50`, `blue600`).
30   Only this file reads it.
312. **Meaning**: `Ink.text`, `Ink.accent`, `Ink.selection`, `Ink.divider`,
32   with a light and a dark value each. Parts read only this layer.
333. **Scales**: `KitType` (type roles), `Metric` (sizes), `Motion`
34   (named intents like `hover` and `check`).
35 
36A rebrand changes the palette. A dark mode fix changes the meaning layer.
37Neither touches a part.
38…