πΊοΈ Turn the design language into examples people and AI designers can use.
THE BUILD PLAN
πΊοΈ Learn it. Try it. Refine it.
πTAP 2 READ ALONG
πΊοΈ A shared design language grows through clear examples and thoughtful practice.
πΊοΈ First understand the idea, then try a small version and see whether it communicates what you meant.
πΊοΈ Compare it on a wide screen and a phone, and give its movement and words the same care.
πΊοΈ Keep the latest feedback close, so each revision builds on what we have learned.
1 Β· Preserve & reconcileπ
TAP 2 PLAY
π Collect ideas and corrections into one clear, dated understanding.
πOPEN THE DETAILSCLOSE THE DETAILS+
π Begin with the meaning behind the request.
π Keep animation worlds, materials, and settings distinct as the explanation grows.
π When a newer correction changes the direction, carry that change forward and date it.
π A clear shared understanding makes the next step easier.
π BUILD NOTES & REFERENCES
π§Deliverable: a dated creator-direction map with source references and open distinctions.
π§ Capture every correction, maintain animation/material/settings separation, reconcile latest voice input before presenting, and retain historical versions. HQ owns the synthesis; a capture subagent supplies an independently checked return.
π§ Initial capture and cross-check complete.
2 Β· Research & select examplesπ
TAP 2 PLAY
π A useful reference answers a specific design question.
πOPEN THE DETAILSCLOSE THE DETAILS+
π Choose an example for what it helps us see.
π A sound bowl might show focused attention, while a pencil-filled icon shows how to explain an idea.
π Place a short explanation beside the source so the connection is clear.
π If a detail still needs checking, leave that question visible.
π BUILD NOTES & REFERENCES
π§Deliverable: a compact evidence gallery for every important rule.
π§ Read the A/B/C library; inspect floating-head, bird, remote, sound bowl, watercolor, supply, and icon examples. Recover chosen Keynote/notepad pages and the older Claude design project. Compare current flags, labels, buttons, and Convo Card rating components.
π§ Three source sheets, two written guides, and the live typography reference checked; remaining examples explicitly tracked.
3 Β· Establish the visual grammarπ¨
TAP 2 PLAY
π¨ Visual grammar connects material, words, movement, color, and scale.
πOPEN THE DETAILSCLOSE THE DETAILS+
π¨ A paper note, a foam sticker, and a digital button can speak the same design language.
π¨ Their materials differ, but their scale, placement, color, and behavior work together.
π¨ Show those relationships through examples that someone can understand and reuse.
π¨ That gives a new design coherence without making every piece identical.
π BUILD NOTES & REFERENCES
π§Deliverable: this guide, refined through Deesilβs teaching.
π§ Map each material to fonts, motion, scale, color, and source assets. Show what can coexist and why. Distinguish approved rules, current direction, and exploratory supply-character ideas. Keep the exact Brain Buddy identity intact.
π§ Working guide prepared; creator review remains open.
π§Deliverable: a focused set of reusable examples, not another enormous all-purpose interface.
π§ One example per drawn style; one physical supply composition; one digital interaction; the approved rating/info pattern; open/close tab timing; paper-white erase-and-draw divider transition; font-role specimens; setting transitions.
π§ Use actual existing components and assets. Compare examples in context, including a small screen.
5 Β· Bind the template & variantsπ
TAP 2 PLAY
π Named variations can celebrate a moment while preserving the main template.
πOPEN THE DETAILSCLOSE THE DETAILS+
π A Halloween version can bring a different seasonal mood to the same familiar world.
π Give it a clear scope and time to return to the main template.
π A birthday flourish may need only a small, thoughtful addition.
π Keep what makes the design recognizable while making room for the occasion.
π BUILD NOTES & REFERENCES
π§Deliverable: a dated approved baseline and optional named variants.
π§ Record owner, version, source, approval date, scope, exact assets/components, and replacement lineage. A Halloween template gets its own activation period and return baseline. A birthday flourish may simply be an allowed variation. These examples do not activate a seasonal theme now.
6 Β· Connect the ecosystemπ
TAP 2 PLAY
π Connected references help future work reuse approved design meaning.
πOPEN THE DETAILSCLOSE THE DETAILS+
π The same design understanding should be easy to find in the next project.
π Keep one clear reference, and let the PlayΒ·Packet guide future work to it.
π When it moves to another system, compare the actual result with the approved example.
π A connection is useful when it carries the meaning faithfully.
π BUILD NOTES & REFERENCES
π§Deliverable: a verified design-system handoff and PlayΒ·Packet reference route.
π§ Keep design facts in one reference; the existing communication/design modules link to it. The Formulaβs delivery check reconciles latest feedback. The design system receives examples and change notes; only an actual import and rendered check count as adoption.
π§ Future Shadow can compare, flag drift, and propose repairs. No heartbeat is launched by this plan. Customer packets receive only authorized portable templates and tested host adapters.
7 Β· Six focused review passesβ
TAP 2 PLAY
β Review meaning, materials, screens, behavior, and continuity together.
πOPEN THE DETAILSCLOSE THE DETAILS+
β Look at the work through six useful lenses.
β Does it carry the intended meaning and materials, work on desktop and phone, behave clearly with audio and interaction, and preserve the latest decisions?
β Each lens catches a different kind of confusion.
β Use what you find to refine the work before asking for the creatorβs judgment.
π BUILD NOTES & REFERENCES
π§Intent: reread the newest creator notes; preserve each distinction.
π§Material fidelity: actual sources, fonts, colors, drawings, paper, tape and foam.
π§Desktop composition: hierarchy, capitalized centered labels, spacing, and selected line.
π§Phone composition: a single ordered row, visible peeking emojis, readable previews, no page overflow.
π§Interaction and audio: opening and reverse timing, paper-white erase-and-draw boundary, two-tap entry, play, pause, seeking, and readable narration.
π§Continuity and delivery: reread latest feedback, save the right version, preserve approval boundaries, and verify private filing.
π§ Apply these lenses to every chapter. Record what was actually checked; six passes are not a claim of complete creator approval.
8 Β· Return to the deck & websiteπͺ
TAP 2 PLAY
πͺ Shared design terms make the next review more specific and useful.
πOPEN THE DETAILSCLOSE THE DETAILS+
πͺ Now we have a clearer way to talk about the design.
πͺ We can point to a material, a setting, or a movement and explain what helps and what needs changing.
πͺ Bring that vocabulary into the deck review and the next website conversation.
πͺ It makes feedback more specific, so the next step can follow the intended direction.
π BUILD NOTES & REFERENCES
π§Deliverable: clearer review notes and a coherent next build brief.
π§ Use this vocabulary to collect the deferred material/design ratings. Preserve the current deck until Deesil requests revisions. Then apply accepted changes and use the desk β book β inner-space direction to shape the brand website.
π§ The research guide makes those discussions easier; it does not silently approve the website build or mark any ratings.