karvey-design-graphiclisted

# Karvey Design Graphic ## Purpose With the approved mockup as the structural wireframe, define the complete visual design specification: color, typography, layout, motion, and micro-interactions. Update the mockup HTML with the defined visual system. ## Execution steps ### Step 1 — Load context Read: - `docs/spec/changes/{change-id}/spec.json` - `docs/spec/changes/{change-id}/mockup.html` - `docs/spec/changes/{change-id}/proposal.md` Verify `approvals.mockup.approved = true`. If not, stop. Check whether a `PRODUCT.md` or `DESIGN.md` exists in the project to understand the existing brand. ### Step 2 — Identify the design register Determine the product type: **Enterprise product (B2B, internal tool):** - Restrained palette, function over expressiveness - High-legibility typography - Minimal, non-distracting motion - High information density **Consumer product (B2C, user experience):** - More expressive, brand-driven palette - Typography with more personality - Motion as part of the experience - Moderate information density Infer from `proposal.md` and `spec.json.capability`. **Target agnosticism (do NOT assume web).** The design guidance depends on the target declared in `docs/spec/project.json` (see `karvey/rules/targets.md`): - **web** → **WCAG** (contrast, focus, semantics, keyboard navigation) - **iOS** → **Apple Human Interface Guidelines (HIG)** (Dynamic Type typography, safe areas, gestures, native controls) - **Android** → **Material Design** (elevation,