SKILL.md
Visual Emphasis and Hierarchy
Every screen has a most-important thing. Visual hierarchy is the design work that makes sure the user's eye finds it first — without requiring the user to read everything and decide for themselves.
Emphasis is achieved through size, colour, weight, contrast, and position. These tools work because they are relative: an element looks important because it differs from what surrounds it.
The Hierarchy Ladder
Design every action group and content area with a clear hierarchy:
| Level | Role | Visual treatment |
|---|---|---|
| Primary | The one action the user should most likely take | Filled, brand colour, largest button in the group |
| Secondary | An alternative action of moderate importance | Outlined or ghost, neutral colour, same or slightly smaller size |
| Tertiary | Rarely needed, destructive, or low-priority | Text link or subtle ghost, smaller, visually recessive |
| Disabled | Unavailable | Low contrast, no hover state — signals "not yet" |
There should be at most one primary action per view or per logical section. Two filled buttons side by side cancel each other out — both feel equally important, so neither guides the user.