Skill: Design Button Hierarchy
Purpose
Create clear distinctions between primary, secondary, and tertiary actions so users know which action to take.
Type
Generative + Evaluative
Input
- List of actions/buttons needed
- Relative importance of each action (primary, secondary, tertiary)
- Context (form, modal, page, toolbar)
Output
- Button style specifications for each level
- Pass/Fail assessment of existing button hierarchy
Transformation Performed
Maps action importance to visual treatment: primary = filled brand color, secondary = outline or subtle (including grey solid), tertiary = text-only or link style.
Decision Criteria
PASS (Good Button Hierarchy)
- One clear primary action per screen/section (filled, high contrast, brand color)
- Secondary actions visually subordinate (outlined, ghost, or lower contrast solid including grey)
- Tertiary actions minimal (text link or subtle)
- Clear visual distinction between levels (not subtle 10% differences)
- Destructive actions (delete) use red but don't compete with primary
FAIL (Poor Button Hierarchy)
- Multiple buttons with equal visual weight
- Primary action not obvious
- Very light grey (200) secondary looks disabled
- Destructive actions draw more attention than primary
- All buttons filled with same color
Button Style Patterns
| Level |
Background |
Border |
Text |
Use Case |
| Primary |
Brand color (solid) |
None |
White/light |
Main CTA, save, submit |
| Secondary |
Grey (solid) or transparent |
Brand color (if outline) |
Brand color or grey |
Alternative action, cancel |
| Tertiary |
Transparent |
None |
Brand color or gray |
Optional actions, learn more |
| Destructive |
Red |
None |
White |
Delete, remove (not competing) |
| Disabled |
Gray 200 |
None |
Gray 400 |
Cannot proceed |
Visual/UX Signals Used
- Fill vs outline: Filled = primary, outline = secondary
- Color saturation: More saturated = more important
- Size: Primary can be slightly larger
- Position: Primary often on right or bottom (reading pattern)
Common Failure Modes
| Failure |
Description |
Fix |
| Button Battle |
Save and Cancel both filled brand |
Make Cancel outline or grey solid |
| Gray Button Confusion |
Very light grey (200) secondary looks disabled |
Use grey 400-500 or outline, not near-white grey |
| Red Alert |
Delete button more prominent than primary |
Make delete text-only or smaller |
| Primary Overload |
3+ "primary" buttons |
Choose one primary, demote others |
| Invisible Tertiary |
Text links same color as body |
Use brand color or underline |
Prerequisites
- Visual hierarchy established
- Color palette defined
Dependencies
build-color-palette (needs brand and semantic colors)establish-visual-hierarchy (buttons are part of hierarchy)
Refactoring UI References
- "Make primary actions obvious"
- "Destructive actions shouldn't dominate"
- "Secondary actions should be clear but not prominent - outline styles or lower contrast background colors are great options"
Example Assessment
Input: Modal with "Save Changes" (filled blue), "Cancel" (filled grey), "Delete" (filled red)
Evaluation: PARTIAL
- Cancel: Grey filled is acceptable secondary treatment (lower contrast solid)
- Delete: Filled red competes with Save (should be text red)
- Issue: Two actions with solid fills competing
Recommendation:
- Save: Keep filled blue (primary)
- Cancel: Grey filled is acceptable, but could be outline for clearer distinction
- Delete: Change to text red (destructive shouldn't compete)
1---2name: design-button-hierarchy3description: Create clear primary/secondary/tertiary action distinctions4---56# Skill: Design Button Hierarchy78## Purpose9Create clear distinctions between primary, secondary, and tertiary actions so users know which action to take.1011## Type12Generative + Evaluative1314## Input15- List of actions/buttons needed16- Relative importance of each action (primary, secondary, tertiary)17- Context (form, modal, page, toolbar)1819## Output20- Button style specifications for each level21- Pass/Fail assessment of existing button hierarchy2223## Transformation Performed24Maps action importance to visual treatment: primary = filled brand color, secondary = outline or subtle (including grey solid), tertiary = text-only or link style.2526## Decision Criteria2728### PASS (Good Button Hierarchy)29- **One clear primary action** per screen/section (filled, high contrast, brand color)30- **Secondary actions** visually subordinate (outlined, ghost, or lower contrast solid including grey)31- **Tertiary actions** minimal (text link or subtle)32- Clear visual distinction between levels (not subtle 10% differences)33- Destructive actions (delete) use red but don't compete with primary3435### FAIL (Poor Button Hierarchy)36- Multiple buttons with equal visual weight37- Primary action not obvious38- Very light grey (200) secondary looks disabled39- Destructive actions draw more attention than primary40- All buttons filled with same color4142## Button Style Patterns4344| Level | Background | Border | Text | Use Case |45|-------|------------|--------|------|----------|46| **Primary** | Brand color (solid) | None | White/light | Main CTA, save, submit |47| **Secondary** | Grey (solid) or transparent | Brand color (if outline) | Brand color or grey | Alternative action, cancel |48| **Tertiary** | Transparent | None | Brand color or gray | Optional actions, learn more |49| **Destructive** | Red | None | White | Delete, remove (not competing) |50| **Disabled** | Gray 200 | None | Gray 400 | Cannot proceed |5152## Visual/UX Signals Used531. **Fill vs outline**: Filled = primary, outline = secondary542. **Color saturation**: More saturated = more important553. **Size**: Primary can be slightly larger564. **Position**: Primary often on right or bottom (reading pattern)5758## Common Failure Modes5960| Failure | Description | Fix |61|---------|-------------|-----|62| **Button Battle** | Save and Cancel both filled brand | Make Cancel outline or grey solid |63| **Gray Button Confusion** | Very light grey (200) secondary looks disabled | Use grey 400-500 or outline, not near-white grey |64| **Red Alert** | Delete button more prominent than primary | Make delete text-only or smaller |65| **Primary Overload** | 3+ "primary" buttons | Choose one primary, demote others |66| **Invisible Tertiary** | Text links same color as body | Use brand color or underline |6768## Prerequisites69- Visual hierarchy established70- Color palette defined7172## Dependencies73- `build-color-palette` (needs brand and semantic colors)74- `establish-visual-hierarchy` (buttons are part of hierarchy)7576## Refactoring UI References77- "Make primary actions obvious"78- "Destructive actions shouldn't dominate"79- "Secondary actions should be clear but not prominent - outline styles or lower contrast background colors are great options"8081## Example Assessment8283**Input:** Modal with "Save Changes" (filled blue), "Cancel" (filled grey), "Delete" (filled red)8485**Evaluation:** PARTIAL86- Cancel: Grey filled is acceptable secondary treatment (lower contrast solid)87- Delete: Filled red competes with Save (should be text red)88- Issue: Two actions with solid fills competing8990**Recommendation:**91- Save: Keep filled blue (primary)92- Cancel: Grey filled is acceptable, but could be outline for clearer distinction93- Delete: Change to text red (destructive shouldn't compete)
gnurio