Purpose: Translate a completed design-definition-form.md into designer-facing language—the ideas, tensions, and craft signals you want the product UI to communicate. Use this doc in critiques, onboarding, and handoffs to engineering and agents alongside the form’s concrete tokens.
How to use
- Finish (or draft) the form through §K if you use inspiration imagery; keep §B/§C as the numeric source of truth for tokens and type specs.
- For each heading below, write 1–3 short paragraphs or tight bullets in plain language—no need to repeat hex tables here; point to the form section when specifics matter.
- Keep this file in the same place as
design-definition-form.md(or your project’s copy) soDESIGN.mdauthors can lift Key characteristics and theme copy from it during Phase 3.
Source map
| Form section | This document (conceptual focus) |
|---|---|
| A | Product voice, audience posture, experience north star |
| B | Color story, contrast philosophy, semantic color intent |
| C | Typographic tone, hierarchy personality, readability stance |
| D | Spatial rhythm, shape language, surface & depth metaphor |
| E | Component personality (density, affordances, severity) |
| F | Motion temperament, responsive behavior, §7/§8 narrative |
| G | Build constraints as design boundaries (honest tradeoffs) |
| H | Provenance—where truth lives when sources disagree |
| K | Moodboard / inspiration—what is borrowed vs rejected |
Form: §A (one-sentence goal, who reads the UI).
Describe the emotional target: calm vs energetic, editorial vs utilitarian, premium vs approachable. Name the one thing that must “read” in the first five seconds.
Form: §A (who reads this UI most).
How should the UI meet that audience—confident expert tool, gentle guide, dense cockpit? What must never feel condescending or cold?
Form: §B (roles, light/dark, contrast target).
In designer terms: warm/cool, chroma level, neutrals vs accents, “ink on paper” vs “glass on dark,” semantic associations (success/warning/error as calm or loud). How color supports hierarchy without noise.
Form: §C (families, Title 1, scale).
Contrast model (display vs workhorse), editorial vs product UI, monospace as “truth layer” or decorative. How tight or airy the stack should feel; when all-caps or tracked caps are allowed.
Form: §D (spacing, width, grid, radius, shadow, borders).
Grid personality (strict vs organic), whitespace as luxury or efficiency, corner language (sharp tool vs soft consumer), elevation as literal depth or flat hierarchy.
Form: §E (checklist + notes).
Default “hand” of controls: bold CTAs vs quiet chrome, cards as containers vs invisible structure, data density. How error and disabled states should feel—clinical, friendly, or minimal.
Form: §F (motion, breakpoints, touch targets, §7/§8 picks).
Motion as confirmation vs delight; how layout breathes across breakpoints; which corpus chapter (§7/§8) carries your “rules of craft” story.
Form: §G.
Which constraints are creative parameters (e.g. system fonts only, fixed token set) vs temporary debt. What engineering should push back on if the language above drifts.
Form: §H.
Which artifact wins when Figma, code, and marketing disagree. How often this language is expected to be refreshed.
Form: §K (image paths, what we borrow, candidate typefaces).
What from the moodboard is signal vs noise—palette temperature, texture, typographic contrast, cultural references to embrace or avoid. Explicit “not this” list if helpful.
Form: Open questions + anything unresolved in §I sign-off.
Design debates still in flight; decisions that would change the language above.
Synthesize sections 1–6 into a single paragraph a coding agent could use as tone guardrails when generating UI.