Capability node
Visual Design
Give the product a coherent visual language including color, type, spacing, and component states.
Why this capability exists
Design is not decoration. A consistent visual system makes hierarchy legible, builds trust, and prevents the generic template look users have learned to ignore.
Input
- Brand or design direction notes
- Component inventory from the information architecture
- Accessibility requirements
Output
- Design tokens (color, type, spacing, radii)
- Component states (hover, focus, active, disabled, empty)
- Responsive behavior rules
Risks
- Copying template aesthetics instead of deriving a system
- Color as the only signal for status
- Designing only the desktop breakpoint
Acceptance criteria
- Tokens are documented and used consistently across pages
- Text contrast meets WCAG AA
- Layout collapses cleanly at 390px, 768px, 1024px, and 1440px
Skills that execute this capability
No skills are mapped to this capability yet.