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 Multiple primary buttons per view Placeholder used as only label Pure white on pure black Thin/light font weights Color-only error indicators Long centered text Inconsistent spacing values 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