ui-composition

UI Composition

Visual design is where intent becomes tangible. Every colour, every spacing decision, every typographic choice either includes or excludes people. This skill ensures visual decisions are principled, systematic, and inclusive.

When to Use

• Designing screen layouts or page structures
• Choosing or refining colour palettes
• Setting typography systems
• Establishing spacing and grid systems
• Designing for responsive breakpoints
• Creating or modifying visual hierarchy
• Designing dark mode or high contrast variants

Process

Step 1: Reference the Foundation

Before making visual decisions, confirm you have:

• Design brief or strategy (from earlier phases)
• Personas (especially ability spectrum considerations)
• Existing design system (invoke design-system-alignment if one exists)

Step 2: Layout and Structure

Grid system:

• Define columns, gutters, and margins
• Ensure the grid adapts across breakpoints (mobile, tablet, desktop)
• Test that content reflows sensibly when zoomed to 200%

Visual hierarchy:

• Establish a clear reading order that works both visually and in the DOM
• Ensure the hierarchy communicates through structure, not colour alone
• Verify that removing all colour still leaves a readable, navigable page

Spacing system:

• Use a consistent spacing scale (e.g., 4px base)
• Ensure touch targets are at least 44x44px
• Provide adequate spacing between interactive elements to prevent accidental activation

Step 3: Colour

Palette construction:

• Define primary, secondary, neutral, and semantic colours (success, warning, error, info)
• Every colour pairing must meet WCAG AA contrast ratios minimum (4.5:1 for text, 3:1 for large text and UI components)
• Target WCAG AAA (7:1) where feasible

Colour independence:

• Never convey information through colour alone
• Always pair colour with text labels, icons, or patterns
• Test with simulated colour blindness (protanopia, deuteranopia, tritanopia)

Dark mode / high contrast:

• If applicable, design dark mode as a first-class experience, not an afterthought
• Ensure all contrast ratios hold in both modes
• Respect prefers-color-scheme and prefers-contrast media queries