Copilot instructions

1---
2description: VS Code design philosophy — the shared Values→Principles→Moves vocabulary for reasoning about UI in design terms rather than raw pixels. Use when creating, editing, or reviewing any visual surface (CSS, DOM, theming, icons, motion). Name the value/principle before reaching for a token.
3applyTo: "src/vs/**/browser/**/*.{ts,css}"
4---
5 
6# Design philosophy
7 
8When you touch a visual surface, reason about it in **design terms, not pixels**.
9Design-system spacing, radii, type roles, and colors use named tokens/ramps where
10available. Raw literals remain valid for structural measurements or when no token exists.
11 
12Work in three layers - name the **feeling**, find the **principle** it breaks,
13then reach for the **move** that restores it:
14 
15- **Values (how it should feel):** **Calm** · **Focused** · **Consistent** · **Delightful**
16- **Principles (questions to ask):**
17  1. *Quiet at rest, present on intent* - is anything shouting when nothing's happening?
18  2. *Room to breathe* - does this feel cramped, tight, or jagged?
19  3. *The interface explains itself* - could someone understand this at a glance?
20  4. *One thing leads; the rest supports* - where does the eye go first?
21  5. *Elevation is encoded, not eyeballed* - does roundness match how far the surface floats?
22  6. *Sameness signals sameness* - do two like things look identical, and is any difference intentional?
23  7. *Delight earns its keep* - what does this help the user do?
24- **Moves (the mechanics):** elevation tiers (Control 4 / Inner 6 / Outer 8;
25  pills fully round), the spacing ramp, the type ramp (roles + `regular`/`semiBold`
26  only, no 500), two icon sizes (16 base / 12 compact), a 1px token for standard strokes,
27  `--vscode-*` theme color, reveal-on-intent chrome, prefer a word to a mystery
28  glyph.
29 
30Reach for a **move** only *after* naming the feeling and the principle - never
31instead. Describe a bug by its role/tier/ramp (*"this overlay is rounded at the
32control tier"*), not its number (*"border-radius should be 6"*).
33 
34**Full reference** (values, principles, moves, worked examples, phrasebook, and
35feedback guidance): the [`design-philosophy` skill](../skills/design-philosophy/SKILL.md).
36**Token mechanics:** [design-tokens.instructions.md](./design-tokens.instructions.md).
37