Web Interface Design
Overview
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
Reference File Index
| Task |
Load Reference |
| Font sizes, line spacing, heading hierarchy, vertical rhythm |
references/typography.md |
| Input fields, validation, checkboxes, radios, selects, textareas |
references/forms-and-inputs.md |
| Button hierarchy, sizing, states, CTAs, ghost buttons |
references/buttons.md |
| Color palettes, dark mode, tints/shades, state colors |
references/color-systems.md |
| Navigation, cards, tabs, accordions, modals, tables, toasts |
references/ui-components.md |
| Grids, spacing scales, responsive patterns, whitespace |
references/layout-and-spacing.md |
| Focus techniques, hierarchy principles, action pyramid |
references/visual-hierarchy.md |
| Contrast ratios, focus states, screen readers, WCAG |
references/accessibility.md |
| CSS implementation patterns, variables, common styles |
references/css-patterns.md |
Quick Decision: Which Reference?
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
Universal Quick Reference
Spacing Scale (4px base)
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
Typography Baseline
- Body: 16px, line-height 1.5
- Heading:body ratio max 1:3 (48px heading for 16px body)
- Paragraph spacing: line-height ÷ 1.5
Touch Targets
- Minimum: 44×44px
- Recommended: 48×48px
Contrast Minimums (WCAG)
- Normal text: 4.5:1
- Large text (18px+ or 14px+ bold): 3:1
- UI components: 3:1
Button Hierarchy
| Level |
Use For |
Treatment |
| Primary |
Main action (ONE per view) |
Solid fill, high contrast |
| Secondary |
Alternative actions |
Outlined or subtle fill |
| Tertiary |
Minor actions |
Text-only or ghost |
Dark Mode Essentials
- Background: #121212 (not pure black)
- Text: #E0E0E0 (not pure white)
- Reduce color saturation
Common Mistakes Checklist
Design Review Protocol
- Hierarchy: Is primary action obvious? Can you tell what matters?
- Readability: Text contrast OK? Line length reasonable (45-75 chars)?
- Forms: Labels above fields? Touch targets 44px+? Helpful errors?
- Spacing: Consistent scale? Breathing room around elements?
- Accessibility: Color not sole indicator? Focus states visible?
When NOT to Use This Skill
- Pure visual branding/identity work
- Marketing copy decisions
- Backend architecture
- Mobile native patterns (iOS/Android differ)
Sources
- Web Interface Handbook by Aleksei Baranov (Imperavi)
- User Interface Typography by Imperavi
- Refactoring UI by Wathan & Schoger
- WCAG 2.1 accessibility guidelines
1---2name: web-interface-design3description: Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.4---56# Web Interface Design78## Overview910Design exists to **separate the primary from the secondary**. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.1112This skill orchestrates domain-specific reference files. Read only what you need for the task.1314## Reference File Index1516| Task | Load Reference |17|------|----------------|18| Font sizes, line spacing, heading hierarchy, vertical rhythm | `references/typography.md` |19| Input fields, validation, checkboxes, radios, selects, textareas | `references/forms-and-inputs.md` |20| Button hierarchy, sizing, states, CTAs, ghost buttons | `references/buttons.md` |21| Color palettes, dark mode, tints/shades, state colors | `references/color-systems.md` |22| Navigation, cards, tabs, accordions, modals, tables, toasts | `references/ui-components.md` |23| Grids, spacing scales, responsive patterns, whitespace | `references/layout-and-spacing.md` |24| Focus techniques, hierarchy principles, action pyramid | `references/visual-hierarchy.md` |25| Contrast ratios, focus states, screen readers, WCAG | `references/accessibility.md` |26| CSS implementation patterns, variables, common styles | `references/css-patterns.md` |2728## Quick Decision: Which Reference?2930```31What's the problem?32├─ Text hard to read, spacing feels off → typography.md33├─ Form not working well, validation issues → forms-and-inputs.md34├─ Users don't know what to click → buttons.md OR visual-hierarchy.md35├─ Colors look wrong, dark mode broken → color-systems.md36├─ Need nav/cards/tabs/modals/tables → ui-components.md37├─ Spacing inconsistent, layout cramped → layout-and-spacing.md38├─ Everything competes for attention → visual-hierarchy.md39├─ Accessibility audit or contrast issues → accessibility.md40└─ Need CSS implementation → css-patterns.md41```4243## Universal Quick Reference4445### Spacing Scale (4px base)46`4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96`4748### Typography Baseline49- Body: 16px, line-height 1.550- Heading:body ratio max 1:3 (48px heading for 16px body)51- Paragraph spacing: line-height ÷ 1.55253### Touch Targets54- Minimum: 44×44px55- Recommended: 48×48px5657### Contrast Minimums (WCAG)58- Normal text: 4.5:159- Large text (18px+ or 14px+ bold): 3:160- UI components: 3:16162### Button Hierarchy63| Level | Use For | Treatment |64|-------|---------|-----------|65| Primary | Main action (ONE per view) | Solid fill, high contrast |66| Secondary | Alternative actions | Outlined or subtle fill |67| Tertiary | Minor actions | Text-only or ghost |6869### Dark Mode Essentials70- Background: #121212 (not pure black)71- Text: #E0E0E0 (not pure white)72- Reduce color saturation7374## Common Mistakes Checklist7576- [ ] Multiple primary buttons per view77- [ ] Placeholder used as only label78- [ ] Pure white on pure black79- [ ] Thin/light font weights80- [ ] Color-only error indicators81- [ ] Long centered text82- [ ] Inconsistent spacing values8384## Design Review Protocol85861. **Hierarchy**: Is primary action obvious? Can you tell what matters?872. **Readability**: Text contrast OK? Line length reasonable (45-75 chars)?883. **Forms**: Labels above fields? Touch targets 44px+? Helpful errors?894. **Spacing**: Consistent scale? Breathing room around elements?905. **Accessibility**: Color not sole indicator? Focus states visible?9192## When NOT to Use This Skill9394- Pure visual branding/identity work95- Marketing copy decisions96- Backend architecture97- Mobile native patterns (iOS/Android differ)9899## Sources100101- **Web Interface Handbook** by Aleksei Baranov (Imperavi)102- **User Interface Typography** by Imperavi103- **Refactoring UI** by Wathan & Schoger104- WCAG 2.1 accessibility guidelines
levalencia