Department 3
Design
- 3.1Design principlesQuiet, one of each thing, the brand's photos carry colour, the glance ruleTen rules for every screen, and the higher rule wins an argumentDraft
- 3.2Information architectureSix addresses, tabs, the shape, decisionsSix addresses cover the whole product, from Today to Make itGenerated
- 3.3Today to tomorrow309 surfaces to 22, every component familyEvery one of today's 309 surfaces gets a home among 22 screensGenerated
- 3.4Every screen45 screens, states, character slot, status, with framesForty five screens, fetched and dropped at your feetGeneratedFive versions
- 3.5ComponentsTop bar, tabs, sheet, menu, toast, empty, error, four buttons, the pick cardOne kit, no part built twice, wearing tennis ball greenDraftFive versions
- 3.6TokensColour, type, space, radius, motion for each direction, light and darkFetch wears tennis ball green and two fonts, nothing elseGeneratedFive versions
- 3.7PatternsNeed your yes, story viewer, Make it, hand off, versions, confirming a paid makeEach recurring job gets exactly one way, on every screenDraft
- 3.8StatesEmpty, loading, error, offline, caught up, cap reachedSix states, one look each, and Fetch goes sheepish when we breakDraftFive versions
- 3.9Content designCard budgets, the glance rule, words per surfaceEvery surface gets a word budget; cards must land in three secondsDraft
- 3.10AccessibilityContrast, tap targets, motion, screen readers, checksOne accessibility bar for every screen, and the live product misses itNeeds you
- 3.11Character usageSlots, poses, never on a controlFetch the scruffy dog lives in seven slots, off every controlDraftFive versions
- 3.12Web and phone layoutsRail and two-pane Make it on the web, bottom bar on a phonePhone first, with three widths replacing today's twenty one breakpointsDraft
- 3.13Design QA checklistWhat every screen passes before it shipsForty checks, and one fail sends a screen backDraft