/ui-composition

name: ui-composition
description: Use when building layouts, choosing colours, setting typography, establishing visual hierarchy, designing responsive behaviour, or making any visual design decision — ensures every visual choice serves both aesthetics and accessibility

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

Step 4: Typography

**Type scale:**

• Define a modular scale with clear hierarchy (heading levels, body, caption, label)
• Base body size: minimum 16px (1rem)
• Line height: 1.5 for body text, 1.2-1.3 for headings

**Readability:**

• Line length: 45-75 characters for body text
• Paragraph spacing: at least 1.5x the font size
• Avoid justified text (ragged right is more readable for most people)
• Ensure text can be resized to 200% without loss of content or functionality

**Font selection:**

• Prioritise legibility over personality
• Ensure the chosen font has distinct characters for I, l, 1 and O, 0
• Provide fallback fonts in the same classification

Step 5: Responsive Design

Design for these breakpoints (adjust to project needs):

• **Mobile** (320-480px): single column, stacked layout, thumb-reachable interactions
• **Tablet** (481-1024px): flexible layout, touch and pointer support
• **Desktop** (1025px+): multi-column, keyboard and pointer optimised

At every breakpoint:

• Content priority remains correct
• Touch targets remain adequate
• Text remains readable without horizontal scrolling
• No information is hidden that was visible at other breakpoints (unless intentionally progressive)

Step 6: Document Decisions

For each visual decision, document:

• **What:** the decision made
• **Why:** how it serves the design principles and personas
• **Accessibility:** how it meets inclusive design requirements

Integration

• **Called by:** `writing-design-plans` (as part of plan execution)
• **Pairs with:** `design-system-alignment` (for consistency), `cognitive-accessibility` (for visual load), `adaptive-interfaces` (for user preferences)
• **Reviewed by:** `designpowers-critique`

Quick Reference: Accessibility Minimums

| Element | Requirement | |---------|------------| | Text contrast | 4.5:1 (AA) or 7:1 (AAA) | | Large text contrast | 3:1 minimum | | UI component contrast | 3:1 against adjacent colours | | Touch target | 44x44px minimum | | Focus indicator | Visible, 3:1 contrast against adjacent | | Text resize | Content usable at 200% zoom | | Colour alone | Never the sole indicator of state or meaning |