design-system

1# Design System (build-time rules)
2 
3How cheap a redesign is depends almost entirely on how styling was written,
4not on how big the app is. In a real ~45k-line SwiftUI app going through a
5full redesign, about a third of the estimate was **pure restyling** of screens
6that already worked — because of hand-set font sizes and colours, case applied
7at call sites, appearance-named tokens, per-screen loading/empty states,
83,000-line view files, and UI tests that matched visible text.
9 
10This skill is the set of rules that prevents that. `design/typography` covers
11*choosing* type and Dynamic Type; `product/ux-spec` writes a
12`DESIGN_SYSTEM.md` spec. This skill is about how the code is written so the
13look can change in one place.
14 
15## When This Skill Activates
16 
17- Starting the UI of a new app (before the first screen)
18- Setting up colour/spacing/type tokens, or adopting a designer's system
19- A redesign is coming, or restyling is taking longer than it should
20- Reviewing UI code for restyle cost
21 
22## Styling
23 
241. **No raw style values in views.** Fonts, colours, spacing, radius and
25   shadow come from tokens. Allowed: `0`, and an icon-size token.
262. **Name tokens by role, mirroring the designer's variables.** `Text/Primary`
27   → `textPrimary`, `Action/Primary/Background` → `actionPrimaryBackground`.
28   Never by appearance (`label2`, `grey600`, `tagSemibold`) — appearance
29   names are exactly what a redesign changes.
303. **One text style = family + size + weight + line height + tracking +
31…