Visual mission — docade
Stage 3. APPROVED by Justin, 2026-08-18. The gate is cleared: lanes may now be forged against this direction. Calibration (Stage 4.5) runs first, and its findings are allowed to amend this document — at volume the spec flows from what can actually be produced (00-CHARTER.md).
Amendments after approval are versioned here with a date and a reason, not silently edited.
Derived from docade's own canon: 07-DESIGN-SYSTEM.md, 14-ASSET-MANIFEST.md, 04-LYLE-COPILOT.md, 16-ENGAGEMENT.md, and the committed tokens in src/app/globals.css and src/lib/prizes/art.ts.
docade decides — they own the product. But this document does not treat their tokens as fixed ground: where a token is cheap for them to change and expensive for the art to work around, WootBuild prices the alternative and says so (00-CHARTER.md § The studio advises, question 4). Advisory 02 did exactly that with the collectible ground, and was decided on 2026-08-17 (option A). Principles and territory below reflect that decision.
1. The mission
docade turns a child's chores into an arcade, and the art has to make finishing one feel like it earned something. Every collectible is an object a seven-year- old could imagine holding — soft, weighted, lit from somewhere real — sitting in a dark arcade lit from within. The imagery is warm and generous where the child is, and quiet and precise where the parent is, and it never talks down: a child who has finished everything gets a picture that respects them, not a sticker.
2. Two surfaces, and they do not merge
docade's design system opens with "This app has a split personality and that's correct. Do not unify them." That governs art direction as much as UI.
| Child surface — 196 of 204 pieces | Admin surface | |
|---|---|---|
| Feels like | an arcade at night | a well-made ops tool |
| Ground | #0d0f1a chrome; collectibles sit on #262c4a (advisory 02) | #fbfbfd near-white |
| Colour | saturated, warm, high contrast | muted, calm, neutral |
| Motion | generous | minimal, functional |
| Type | Lexend, rounded, large | system sans, compact |
| Read in | a bedroom, unhurried | five seconds, standing in a kitchen |
One house style, child-dominant, with an admin register as a delta. The shared primitives are form language, line, and materiality; the register changes ground, chroma and density. This mirrors docade's own implementation — one Tailwind config, two token sets, never two component libraries.
3. Principles
Falsifiable. Someone looking at a candidate should be able to say "that violates 3" and be objectively right.
| # | Principle | How you catch a violation |
|---|---|---|
| 1 | It reads at 80px. Collectibles are judged on the collection grid, not at 512. | Downscale to 80px. If you can't name the animal, it fails. Antlers on the stag are the hardest case. |
| 2 | It separates from #262c4a on value and local colour — without a rim light. | Composite on #262c4a at 80px. If the silhouette dissolves, it fails. If it only holds because of a rim, it fails principle 3. |
| 3 | Colour is separable from shading. Flat fills; shading is its own pass, never baked in. | Recolour the base fill only. If the shadows go wrong, it fails — and the growth model fails with it. |
| 4 | It has weight. Objects are soft, stuffed, and sit on something. | If it floats, or reads as a flat sticker, it fails. |
| 5 | Rarity reads without a label. Legendary must be legible as legendary. | Show it beside a common piece at 80px with no text. If a child can't tell, it fails. |
| 6 | Nothing is cute at the expense of respect. Especially Lyle. | If it reads as a mascot or a butler, it fails. |
4. The visual territory
| Dimension | Decision | Why this, not the obvious alternative |
|---|---|---|
| Form language | Soft-bodied, rounded, generous volumes. Simplified anatomy — a plush of an animal, never the animal. | The catalog is plush toys. Rendering real animals would make the collection read as a nature app and break the arcade-prize fiction. |
| Fill & shading | Flat separable fills + one shading pass (soft occlusion + a single warm rim). Never painterly, never colour baked into shadow. | Forced by Q25's economics, not by taste. A recolor must cost a fraction of a sculpt or 150/year collapses. This is the mission's most consequential line. |
| Light | One key from upper-left, plus soft contact occlusion where the object meets its surface. No rim light. | A rim is baked directional lighting — its hue is computed for one base colour, so tinting a colorway leaves it wrong. On #262c4a a plush separates on value alone, which is why the ground moved rather than the principle. |
| Outline | No black outline. Separation comes from value and local colour, with an optional warm inner contour at small sizes. | A dark keyline is the reflex "kids' app" treatment and is still weak on mid-dark indigo. Value contrast does the work and, unlike a keyline tuned per colour, it survives tinting. |
| Child palette | Ground #0d0f1a · surface #1a1e33 · raised #262c4a · fg #f5f3ff · muted #a5adcf. Signals: ticket #ffb020 · token #4ac8ff · streak #ff6b35 · success #3ddc84 · accent #7c5cff. | Committed in globals.css. Art borrows from it; it never invents a competing palette. |
| Admin palette | Ground #fbfbfd · fg #16171d · accent #4b3bd6, muted signal set. | Same information, lower chroma. A parent scanning in a kitchen. |
| Prize grounds | Prize art sits on committed two-stop gradients, e.g. #7c5cff → #4ac8ff. | The only saturated ground in the product. Art that reads on #0d0f1a can vanish here — it must be judged on the gradient. |
| Depth | Side-on, gently isometric for room objects; three-quarter for characters. No vanishing-point perspective. | The room is a shelf, not a space. Perspective would fight the collection grid. |
| Type | Lexend on the child surface — a documented reading-speed win for children. Wordmark is authored, never generated. | Accessibility decision already made in their §6. Type is a different craft from drawing. |
| Motion grammar | anticipation → action → payoff → settle. Up+fade = value leaving; down = arriving; scale = now most important. Payoff never exceeds ~1.2s. | Already built and consistent in globals.css. New motion speaks this grammar or it is noise. |
5. Function map
Lives in client-intake.md § Stage 1 and is not duplicated here. The column that governs most decisions is what each asset sits beside — glyphs beside other glyphs, stuffies beside seventeen other sculpts, prizes beside a ticket price.
6. Deliberate non-goals
The near-misses matter more than the obvious ones.
- Not painterly. A beautifully rendered plush with baked lighting violates principle 3 and quietly destroys the growth model. This is the most likely wrong answer, because it is what image models do best by default.
- Not sticker-flat. Flat fills are a production requirement, not a style; the shading pass is what keeps principle 4.
- Not a mascot brand. Lyle is competent, dry, a little wry.
- Not Pixar. Glossy, big-eyed, hyper-expressive character rendering reads as a screensaver on a
#0d0f1aground and ages badly. - Not outlined-cartoon/sticker-book. A black keyline is the reflex for "kids' app" and is invisible here.
- Not real animals. See form language.
7. Examples
References — to be assembled before the forge. Deliberately empty rather than invented; an unannotated mood board is worse than none.
| Reference | Right about | Wrong about |
|---|---|---|
| ⬜ |
Probe renders. docade's reference sheet is the probe plan — thirteen pieces, fourteen files, each governing a batch. Promoted back here as they are approved. Piece 2 first, because it settles Q44 and Q45 and our own colour separability gap at once.
8. Deciding a new case
- Which surface? Child or admin. That fixes ground, chroma, density, type.
- Which register? Collectible object · UI glyph · scene · character · type. Registers do not borrow each other's rules — a glyph is not a small stuffy.
- What does it sit beside, at what size? Judge there, not at 512.
- Run principles 1–6 in order. The first failure stops it.
- Conflict? Function beats beauty. Legibility at real size beats detail. Separability beats richness — always, because it is an economic constraint and not an aesthetic one.
- Escalate rather than guess when a request names art the manifest has no key for. Piece 12 is the live example: docade refused to invent a key, and that was correct.
9. Open questions
| Question | What would settle it | Cost |
|---|---|---|
| Is a recolor cheap? (their Q44) | Reference sheet piece 2, octopus ×2 colorways | ~$2 |
| Does the crane need a runtime state machine? (their Q45) | Blocked behind piece 2 by their own instruction | — |
| Authored SVG or Recraft vector for 58 glyphs? | Decided 2026-08-17: probe both. 3 glyphs — laundry, fold-clothes, dishes — judged at actual 24px | ~$2 |
| Does Lyle animate, or stay six static states? | Their §3.10 vs 07-DESIGN-SYSTEM.md §5 disagree | after piece 2 |
| How translucency reads without a rim | Piece 3, the jellyfish — the hardest case for value-only separation | in-forge |