A little field guide to a world of ideas.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🌌 Explore story worlds, materials, and settings, with a clear purpose for each.
🌌 Welcome to FUN·da·Mental Design Universes, where a thoughtful little detail can make an idea easier to understand.
🌌 We’ll explore three different questions: where the animated story happens, what each object is made of, and where the presentation sits.
🌌 A pencil drawing, a foam sticker, and a digital button can belong together when each has a useful job.
🌌 Pick a chapter that catches your curiosity, and let’s look a little closer.
🎬 Where does the animated story happen?
🎬 Follow a pause in a busy day from the outside scene, through a human outline, into Brain Buddy’s world.
Where the story takes place: outer → in-between → inner. Three worlds, documented in Drive as C → B → A.
✏️ What is each element made of?
✏️ In that same moment, pencil art tells the story, a paper note holds a thought, and a pixel button offers play.
What an element is made of: drawn art, physical craft supplies, or digital technology. Drawn art contains three distinct styles.
📓 Where does the presentation sit?
📓 Present that moment on a desk, inside a composition book, or in open white space, depending on what needs attention.
Where the composition sits: desk, book, page, or white inner space. These are settings and camera distances, not additional animation worlds.
This is a working map of Deesil’s September 12 teaching. It keeps his distinctions intact while leaving the umbrella names open for refinement. The Founder’s Invitation is the current composition reference; established library assets supply the actual materials.
A paper tab can be clickable and still feel like paper. Its pencil lines step, its foam emoji glides, and its words stay handwritten.
🧠 Give your mind room to breathe, then turn an idea into something built.
✏️ Pencil-gray type and weight establish the reading order. Meaningful words carry color, with gentle ombre for motion and feeling.
🧸 Headers and bullets use tilted foam stickers. Inline emojis stay straight, with quieter shadow depth. Flags name a topic; post-its hold an aside; pixel buttons signal digital actions.
🎨 Core-color or rainbow lettering belongs in meaningful brand or celebration moments. The full palette is available on paper, while colored cards keep their accents in harmony.
Open the Communication Design reference · inspected September 12, 2026. The creator’s latest white inner-world direction supersedes the older blanket background restriction.
🌱 Six principles help each expression support people, clarity, and common-sense wellness.
🌱 The purpose is to make understanding and participation feel possible.
🌱 Fundamental brings common-sense wellness into how we learn, create, and work with technology.
🤝 Technology should support people’s lives and help us understand one another.
🌱 Use six questions: is it fun, simple, clear, true, inspiring, and unifying?
🌱 Let those principles shape real choices, such as a calmer page, a truthful explanation, or one manageable next step.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🎬 Three animation worlds guide attention from everyday life into Brain Buddy’s world.
🎬 Let’s travel from outside to inside.
🎬 Outside, pencil lines and quiet watercolor describe everyday life, with no visible Brain Buddy.
🎬 In between, he appears within a person’s head outline, while something worth noticing, perhaps a bird or a sound bowl, gains detail.
🎬 Inside, the outer lines fade into his colorful drawn world, with real-looking supply friends beside him.
🎬 Each world changes what we notice, so choose the view that helps the moment make sense.
🌎 The outer world establishes people and places before attention moves inward.
🌎 Here we are outside in everyday life, so Brain Buddy is not visible.
🌎 Pencil outlines, shading, and occasional silhouettes describe the scene, with restrained watercolor adding a little feeling.
🌎 Use this world to establish the surroundings before bringing attention closer.
Brain Buddy is not visible at this distance. People and environments use pencil line art, hand-drawn shadowing, and silhouettes when detail can be simplified. Sparse watercolor can feel as if color passes through paper.
Inspected: Globe & Human Harmony. This sample supports the line-art language; it does not demonstrate every watercolor or motion rule.
👤 The in-between world connects a person’s surroundings with Brain Buddy.
👤 This is the space in between everyday life and Brain Buddy’s inner world.
👤 A person and their surroundings become lighter outlines, while a bird, remote, or sound bowl gains detail when it matters.
👤 Brain Buddy can appear within the head outline, helping us see where attention is going.
Surroundings simplify into outlines. Focus objects gain drawn detail. Brain Buddy can float inside a person’s head outline; relevant furniture and surroundings remain.
Examples to pair: bird, remote control, and sound bowl.
Inspected: Hollow silhouette TEMP. The floating-head composite and focus-object sequences still need inspection.
🧠 Color and Brain Buddy’s drawing language come forward as exterior lines fade.
🧠 Now the outside outlines fade, and Brain Buddy’s colorful world comes into focus.
🧠 White or lined paper gives his drawn ideas room, while real-looking supply friends keep their own physical feel.
🧠 Let his established character and drawing style connect one teaching moment to the next.
Exterior line art fades away. Brain Buddy’s own colorful drawing language takes over within white or lined-paper space. His drawn creations coexist with real-looking supply friends.
Inspected: the baseline character board, including expressions, poses, textured pencil work, props, and objects stored in his brain.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
✏️ Drawings, physical supplies, and digital tools each bring their own behavior.
✏️ Imagine a paper note beside a play button.
✏️ The note feels written and handled; the button makes an action easy to recognize.
✏️ That is how drawn art, physical craft, and digital tools can share a page.
✏️ Even a clickable paper tab stays paper.
✏️ Let what an object is made of guide its type, movement, and place in the story.
✏️ Choose character art, exterior line art, or informative pencil-filled shapes.
🧠 Brain Buddy🌎 Exterior art
✏️ Informative pencil iconsOriginal brand-board sheet 085 · visual reference, not historical claims.✏️ There are three drawing languages to choose from.
✏️ Brain Buddy’s art carries his character; exterior pencil and watercolor show the surrounding world; colored outlines with diagonal pencil fill help explain icons, shapes, and charts.
✏️ A simple pencil-filled triangle can teach an idea without becoming another character.
✏️ Choose the language that serves what you are sharing.
The third style appears in Keynotes, notepads, websites, and statistics. The approved filing tabs are an immediate fill reference. Pair explanatory handwriting with Chalkduster.
📎 Physical craft stays tangible, even when it becomes playful.
📎 Think of the supplies on a real desk: paper, pencils, labels, and lightweight foam stickers.
📎 Their scale, shadows, and movement help the scene feel believable.
📎 A pencil can roll or push an object, and a drawn face can add character without changing what the object is made of.
📎 Give playful moments clear physical actions.
Postcards, paper, composition books, flags, labels, post-its, pencils, markers, erasers, and foam emojis retain believable material identity and scale.
Supplies can roll, slide, settle, or be pushed. Hand-drawn faces on real supply characters follow the shape of the object. Exact character examples remain to be selected.
Real available objects are handled through understandable action. Avoid arbitrary objects appearing from supply characters’ heads.
🎮 Digital controls bring recognizable actions into the crafty world.
🎮 A digital button says, something happens when you press me.
🎮 Pixel type, a clear label, and a responsive press make that invitation easy to understand.
🎮 Keep that familiar button family beside the paper and drawings, so different materials can work together on one page.
Pixel/play type, arcade buttons, status readouts, and selected numeric treatments signal technology or digital action.
Digital controls can share a paper composition without turning every label into a screen. Hovering a foam emoji adds a smooth lift and tilt; the sketch beneath it can remain stepped.
Use the existing button components and their interaction states.
🧠 Brain Buddy’s original drawing language keeps new scenes connected.
🧠 Look at Brain Buddy and the props around him.
🧠 The lines, expressions, and drawing texture belong to the same visual world.
🧠 Carry those relationships into a new scene, so the story can change while Brain Buddy stays recognizable.
Existing brand illustration: character and drawn teaching props.
📦 Printed layers and labels help someone understand what a product offers.
📦 Look at how print, labels, and product pieces work together here.
📦 Their placement can help us recognize the name, understand the offer, and know where to look next.
📦 Carry the useful material relationships forward, with enough space and restraint to make the composition clear for its audience.
Original event artwork: a reference for label placement and branded product communication.
📎 Viewed from above, the left fifth adheres flat to the sheet. The rest of the paper lifts only gently toward its free right tip. Overhead light leaves a soft cast shadow behind the paper footprint, slightly more diffuse at that tip. The lightweight foam sticker rests on the paper without bending it down. Chalkduster belongs on the paper; no hard left stripe or pedestal shadow.
🏷️ Pressed lettering, a subtly curled surface, and a contact shadow. Straight top and bottom runs meet individually angled cuts at the sides.
🎨 Both materials use the brand palette. Material, type, light, and shadow distinguish them; color alone does not.
📐 Every tape label receives stable, restrained variation: small independent side cuts and a gentle tilt. Upward and downward curl variants change the highlight and contact shadow. Keep the words legible and the top and bottom predominantly straight. These are current implementation choices for review, not yet approved measurements.
📝 The earlier striped paper tag is a possible secondary craft option only, not the default. Keep it in revision history. Do not assign random geometry on hover or every redraw.
🔎 Brand-board exports 080, 082, and 084 were inspected September 12. The stacked THOUGHTS / WORDS / ACTIONS and SUPPORT labels show the surface and shadow reference. Today’s creator direction adds modestly different diagonal cuts. Historical board copy is a visual reference, not a current factual claim.
🔗 Design-system adoption: keep paper-tag and embossed-tape components separate, sharing palette tokens. Transfer the material styling and its bounded, stable variants together. Verify on light paper, colored paper, short labels, long labels, and mobile. Website publication remains pending.
🔊 Audio is available at each chapter and at the top of element cards before opening details. Compact play/pause controls and a seek bar use recorded system narration, with readable text. The lessons use revised Brain Buddy expression, read by the device’s Samantha voice; the recording sound is separate from the teaching style.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
💬 Explore how handwriting, print, guidance, sound, captions, and system language serve different needs.
💬 Expression is how an idea meets the person receiving it.
📄 Handwriting feels personal, printed explanation helps us follow a thought, and classic evidence keeps attention on its source.
✨ Brain Buddy’s guidance can appear in a bubble or be heard aloud, while a spark caption brings one useful thought into view.
⚙️ System language explains terms, policies, and preferences; an internal translation layer helps carry approved choices into code and AI instructions.
🌱 Each role has its own job, and all of them should make the experience clearer, more supportive, and easier to use.
🧭 A voice is the intention and feeling carried by the words—even when nobody speaks aloud.
✍️ Choose the job of the words, then match their material, type, color, and rhythm.
✍️ Handwriting makes a message personal, approachable, and grounded in the page.
✍️ A handwritten message can feel like a thought shared beside you.
✍️ Keep the words natural and approachable, whether you are adding a note, naming a topic, or offering a gentle reminder.
✍️ Chalkduster carries that handwritten material; a meaningful emoji or a little color can help the thought land.
✍️ Let it sound like someone explaining clearly, with enough space to follow.
👆 Short handwritten cues help someone discover an action without crowding the page.
👆 A little cue can make the next possibility easy to see.
👆 Tap for information points to a closer look; tap to play invites someone to listen.
👆 Keep the cue short, near its control, and written in the same Chalkduster voice, including its numbers.
👆 Make it an invitation the person can understand, with a clear accessible name behind the abbreviation.
📄 Printed explanation creates a clear, playful path through an idea and its parts.
📄 A good printed explanation gives an idea a path someone can follow.
📄 Begin with the main thought, connect its smaller parts, and bring in an example that makes it useful.
📄 Avenir supports that printed voice on a card or plain paper.
📄 Meaningful color, emojis, and a little wit can make the Brain·wave enjoyable, while clarity keeps it moving.
📜 Evidence keeps its source and limits while remaining recognizably Fundamental.
📜 When we share evidence, the source matters.
📜 Explain what was found, what it supports, and what remains uncertain.
📜 Times New Roman can give the material a classic printed voice, with clear structure and a little visual warmth.
📜 A more formal subject can still be readable and engaging.
💬 Brain Buddy helps the learner notice, connect, and take a manageable next step.
💬 Think of Brain Buddy as a supportive guide through the moment.
💬 Point out what is in front of us, connect it to an idea, and offer an example that helps.
💬 A gentle joke or a pause to breathe can fit when it serves the person; neither needs to appear in every lesson.
💬 Keep the guidance grounded in common-sense wellness and leave room for the person’s choice.
✨ A spark caption brings one useful idea forward while the lesson unfolds.
✨ A spark caption gives one useful thought a little more presence.
✨ If the lesson is about a material guiding movement, the caption might say, let the material lead.
✨ Choose a few meaningful words, an emoji that helps, and a deliberate color emphasis.
✨ The caption supports understanding; the full explanation remains available.
⚙️ Terms, conditions, policies, and preferences need clear public-facing expression.
⚙️ Some words explain how the experience works: its terms and conditions, policies, and preferences.
🧭 Keep this language plain, consistent, and easy to find, so someone can understand what applies and what they can choose.
📄 A preference should explain what it changes, and a policy should keep its actual meaning when we make it easier to read.
🔗 This public system expression has a different role from the internal code or AI instructions that help deliver the experience.
🔊 Warmth, pacing, and useful pauses shape how Brain Buddy’s guidance is heard.
🔊 Now consider how the same thought feels when it is heard aloud.
🌿 Warm delivery and a natural pace can give someone time to follow, while a useful pause lets an important idea land.
💬 Choose words that earn being spoken: a helpful connection, a clear example, or an invitation that fits the moment.
🎧 The sound of the voice supports that guidance, while Komika gives its written speech bubble a visual form.
🧠 Keep the person’s understanding at the center of both.
🔗 Internal code, AI instructions, and settings carry approved design choices into the experience.
🔗 A clear design also needs a dependable way to carry its choices into the build.
✏️ For example, a handwritten cue becomes the right wording, font, position, and interaction through code, settings, or instructions an AI can use.
⚙️ That is an internal working translation; the person meets its result through the public words, materials, and controls.
📎 Keep those results connected to the same approved reference, so the meaning stays consistent as it moves between them.
🔎 These distinctions bring together the creator’s current teaching and the Universal Voice guide, with the shown-and-spoken guidance.
✍️ Chalkduster brings personal notes, tags, and gentle cues onto paper.
🎨 One material. Several ways to tell the story.
💡 Chalkduster belongs on lined paper. Color highlights the thought; the emoji introduces the action.
💡 Use each principle’s color family deliberately. Supporting words stay pencil gray.
💡 Same handwritten paper material, in a light tint or a deep brand tone with white lettering.
✍️ A handwritten note can feel like a thought shared with you.
✍️ Chalkduster gives that expression a place on lined paper, post-its, and tags.
✍️ Keep the words natural, with a meaningful emoji or a little color when it helps.
✍️ Even the four in the written tap-for-info cue belongs to the handwriting.
Chalkduster
Human notes, Brain Buddy writing, lined paper, post-it notes, handwritten flags and tags. The 4 in “TAP 4 INFO” stays handwritten.
💬 Komika speech bubbles hold supportive, useful spoken guidance.
🎨 One material. Several ways to tell the story.
💡 Komika is Brain Buddy speaking. The bubble stays hollow; color brings a word into focus.
💡 Two thoughts share one open outline. The tail has no closing seam.
💡 A meaningful foam group supports the message. The background remains visible.
💬
💬 Brain Buddy’s speech bubble is a place for a useful little conversation.
💬 It might help us notice a detail, connect an idea, or try one manageable next step.
💬 Komika carries that spoken expression inside a hollow pencil outline.
💬 Give the words room, and let the guidance meet the person where they are.
Komika
The live design site identifies “Komika — Brain Buddy Chat Bubbles.” The older brand guide names Komika Parc. This resolves the tentative spoken “Combattica”; the exact installed file is recorded in the sources.
📄 Printed explanation uses Avenir to make a thoughtful Brain·wave easy to follow.
🎨 One material. Several ways to tell the story.
💡 Avenir on an unlined card. Weight creates hierarchy before color adds meaning.
💡 Rainbow lettering marks celebration. It is concentrated in one meaningful word.
💡 The core trio connects the action to the brand; readable gray carries the sentence.
📄 Printed explanation can feel like a thoughtful little Brain·wave.
📄 Start with a clear idea, give an example, and show how the parts connect.
📄 Avenir suits that printed voice on a postcard or plain paper, with playful details that help rather than crowd the reading.
📄 The aim is understanding that carries forward.
Avenir
Main body copy printed on a postcard or white/unlined sheet. It is not the default for writing directly on notebook lines.
📜 Classic printed evidence stays grounded, readable, and honest about its source.
🎨 One material. Several ways to tell the story.
💡 Times New Roman gives unlined printed evidence a classic voice. Always retain the real source.
💡 Italic supporting context stays quieter than the finding. Brown gives the paper a grounded, vintage mood.
💡 Structure makes the distinction clear without inventing claims or turning every word into a highlight.
📜 Some ideas need us to look closely at the evidence.
📜 Times New Roman can give a historical document or study a classic printed voice.
📜 Explain the finding in readable language, keep the source nearby, and say what it does and does not support.
📜 A grounded explanation can still be engaging and easy to follow.
Times New Roman
Historical documents, grounded wisdom, studies, statistics when that classic treatment fits. A proposed additional role, not a requirement for every citation.
🏷️ Embossed labels identify something with a distinct physical material.
🎨 One material. Several ways to tell the story.
💡 Real embossed lettering, shallow highlights and a separate shadow cast by the tape.
💡 The same material works across the palette. The gray card lets each label’s color remain clear.
💡 Pressed type identifies tape; Chalkduster and a lifted paper edge identify a tag.
🏷️ Imagine these words pressed into a strip of tape.
🏷️ The actual embossed lettering, restrained depth, and gentle curl make the label feel physical.
🏷️ Size the strip around its words, and let small angled cuts give it character.
🏷️ It should read clearly as tape beside handwritten paper.
EmbossT1
Physical embossed tape. Short, content-sized labels rather than excessive padding.
🎮 Pixel type belongs to digital controls and meaningful system readouts.
🎮 Tap to try the button.
🎨 One material. Several ways to tell the story.
🎮 Tap to try the button.
💡 A digital action uses a pixel button. The explanation around it can remain handwritten.
🧭 Your place in the story.
💡 Pixel numbers communicate system state. This is a visual example, not your progress.
📎 A button specimen to explore.
💡 Use the core trio around playful digital actions. Give the action a clear label and visible feedback.
Choose the clean triangle or blue arrow foam sticker. Hover to see a gentle movement in the travel direction. Back opens Start; Next opens Motion. Reduced motion keeps the cue still.
A little window into what’s happening. Compact pixel lettering sits inside the paper; a small foam sticker hugs the edge. Each status carries its own color, whatever the card color.
These are still, non-clickable examples—not live activity. Use a button for an action, and this inset for a status. “Working” requires a real activity signal.
🎮 Pixel type helps us recognize a digital action or status.
🎮 PixelGamer gives buttons their playful voice, while Gaposiss can carry a score or device readout.
🎮 A number written on a post-it still belongs to handwriting.
🎮 Choose the type by what the words are doing.
PixelGamer
Overtly digital actions and controls. Gaposiss supports digital numbers and punctuation where appropriate.
🎨 Start with pencil-gray hierarchy, then give meaningful words color. Inline emojis clarify the sentence; foam stickers mark its structure.
Foundations → Communication Design ↗Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
📓 Desk, book, page, and white space offer different amounts of context.
📓 Picture a book on a desk, with a pencil waiting beside it.
📓 Move into the book, onto a page, and then toward Brain Buddy’s clear white space.
📓 A wider view offers context; a closer view gives an idea room to breathe.
📓 These are presentation settings, so choose the view that helps someone feel oriented and know where to look.
📓 Move between book, desk, and page to reveal the right amount of context.
📓 The earlier guide moves from the closed book to the desk, into the book’s composition-pattern setting, onto the page, and into a clear close-up.
📓 From farther away, we understand where we are.
📓 Closer in, one idea can hold our attention.
📓 Choose the distance that helps the next part of the story.
These came from the July brand-deck guide and appear again in the September motion cue sheet.
🚪 The proposed website journey moves from a desk and book toward inner space.
🚪 Imagine arriving at a desk, noticing a book, and following Brain Buddy inside.
🚪 The book opens, the welcome unfolds as we explore, and the setting moves toward clear white space.
🚪 Paper, wood, and open-book views can support the journey along the way.
🚪 This gives the future website a direction to explore, with its exact transitions still to be shaped.
Desk → book with Brain Buddy jumping → entering the book → Brain Buddy welcomes while scrolling → white inner space with Apple-like clarity, tactile supplies, and character.
Open-book-on-desk, wood, and paper views are available variations. White inner space is explicit current creator direction; the older blanket “never pure white” rule cannot override it.
The journey is a proposed brand-website direction. The precise transitions and which settings each page uses are still to be designed.
📓 Composition-book texture gives the page a tangible setting.
📓 This pattern helps us recognize a composition book.
📓 Papers and supplies can sit above it while the main thought comes forward.
📓 Let the texture establish the setting, with enough quiet space for the message to stay clear.
Existing composition-book source. Keep the texture as a physical setting.
📖 A booklet gives information a sequence that someone can explore.
📖 A booklet offers a sequence of discoveries.
📖 The cover invites us in, and each page makes room for the next part of an idea.
📖 Look at the original pages to understand how their materials, layout, and type work together.
📖 Then decide what helps your own story unfold.
Existing booklet artwork. Inspect the original page layouts separately before adopting definition or interior typography.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🎞️ Pencil steps, foam glides, and words arrive when there is room.
🎞️ A pencil line can move as though it is being drawn again, while a foam sticker glides smoothly beside it.
🎞️ Watch a tab open: the drawing and emoji travel together, then the words finish their arrival.
🎞️ That shared rhythm makes different materials feel connected.
🎞️ A small reveal can invite curiosity, but the page should settle into something easy to read and use.
↗️ An opening tab coordinates stepped drawing, smooth foam, and a late text reveal.
↗️ Watch the sketch and foam move together.
↗️ The drawing opens in little steps while the emoji glides into position.
↗️ Near the end, the words begin to appear and finish once there is room around them.
↗️ Previewing reveals the name; selecting lifts the paper, making your chosen file clear.
Collapsed emojis sit mostly on the tab and peek slightly above it. Expanded width follows the amount of text.
↙️ Closing and previewing help someone explore without losing their place.
↙️ First the words erase, then the tab and emoji begin their return together.
↙️ On a desktop, hover reveals another name while the selected file stays open.
↙️ On a phone, tap once to peek at a different file and again to enter.
↙️ When space gets tight, whole files tuck behind their neighbors, so the view stays ordered and readable.
〰️ The divider carries attention from the selected file into the surrounding tabs.
〰️ The pencil line connects to both sides of the selected file.
〰️ As the choice changes, the old stroke erases and the new one draws outward, with paper showing softly between the colors.
〰️ On arrival, the selected file draws first and its neighbors follow the travelling line.
〰️ Keep the notebook and page position steady, so the movement explains the change without losing our place.
The shared pencil line joins the selected tab on both sides and leaves its interior open. New color draws outward while old color erases. Both edges feather into paper white where they meet; the pigments do not overlap. Crowded files keep their size and tuck in order, including their foam stickers. Nearer silhouettes mask the hidden parts of rear files; no white backing is painted. The real page, including its notebook ruling, stays visible through the drawing and fade. Unselected outer contours fade at the bottom into the front divider; the selected outline stays clean and connected. The outgoing joined line keeps its old shape as it erases beneath the incoming file. A tiny stepped lift and settle accompanies selection while the foam continues gliding. On refresh, measure and position files before revealing them. The selected file draws first; the divider travels outward at its steady pace. Each neighboring file waits until the line passes its space, then follows with slightly overlapping strokes and varied drawing directions. Each foam sticker briefly fades at the start, then pops and lands as its own tab is drawn. No sideways setup slide. Rear files retain soft breathing room above the divider so their fading contours are visible. Hover or first-tap preview reveals the letters and moves the foam upward without lifting the paper tab. Only the selected file lifts, and its contour connects fully to the front line. Collapsed stickers sit slightly higher. Only the divider’s far outer ends fade away; selected joins remain clear.
Move or subtly redraw the actual stroke. Do not stretch its thickness. Preserve page scroll and fixed notebook-line position.
🧷 Small responses make interaction inviting, with a calm state afterward.
🧷 A little lift or tilt can show this is something you can explore.
🧷 Foam glides, a pencil mark steps, and a note opens without pushing the page around.
🧷 Give the movement a clear purpose and a calm place to settle.
🧷 The same meaning should remain available with a keyboard or reduced motion.
Foam emoji lift and tilt smoothly toward the viewer. Physical markers may roll. Tape-free post-it info notes tilt individually and fade/pop over the meter without moving the page.
Motion is purposeful and user-triggered. Every sequence needs a readable settled state, keyboard access, and reduced-motion behavior. No perpetual bobbing is needed.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
📮 A clear layout lets the idea lead and keeps useful detail nearby.
📮 Let’s give the main idea a clear place.
📮 A postcard holds it, a flag names the topic, and a little info sticker keeps extra detail close.
📮 Color connects related thoughts, while space helps us follow them.
📮 Before adding another flourish, ask what it helps the person understand.
📮 Playful details work best when they make the idea clearer.
🧩 The same ingredients can work differently in a website, a social post, print, animation, or the app.
👆 Tap a piece in the map to see why it belongs in that example.
📲 The app study brings Brain Buddy and useful digital actions together on one calm sheet of blue-lined paper.
🧭 Start with what someone needs to understand, then choose the world, materials, setting, expression and movement that help it land.
👆 TAP A PIECE 4 ITS PART IN THE STORY
| MAKE SOMETHING | 🎬 Story world | ✏️ Material | 📓 Setting | 🗣️ Expression | 🎞️ Motion |
|---|---|---|---|---|---|
| 📱 Social media TAP 2 PLAY 📖 READ📱 Start with one useful thought someone can take into their day. 📱 For a still post, a handwritten line and a little foam sticker can carry the message on a plain paper crop. 📱 An animation world is optional: bring Brain Buddy into the scene when his presence helps explain the idea. 📱 A video version can add his spoken guidance and a gentle reveal; a printed image cannot play or move. | |||||
| 🌐 Website TAP 2 PLAY 📖 READ🌐 A website can welcome someone and help them find their next useful step. 🌐 The desk, the book, and open white space can form one connected journey as the person explores. 🌐 Paper holds the idea, while pixel buttons make digital actions easy to recognize. 🌐 Let movement guide attention, and keep the same information understandable when motion is reduced. | |||||
| 📮 Deck TAP 2 PLAY 📖 READ📮 A deck unfolds an idea one clear beat at a time. 📮 Choose a postcard or page that gives this particular message enough room. 📮 Printed explanation, pencil diagrams, and a Brain Buddy moment can each help at different points in the story. 📮 Transitions support the sequence; they do not need to become the main event. | |||||
| 🖨️ Printed material TAP 2 PLAY 📖 READ🖨️ Printed material needs to make sense with no buttons to press and no sound to hear. 🖨️ Use the paper, the drawing, and the order of the words to guide someone through it. 🖨️ Brain Buddy can still appear as a drawing on a light page, with a bubble pointing back to him. 🖨️ An optional link can lead elsewhere, but the essential meaning belongs on the page. | |||||
| 🎞️ Animation TAP 2 PLAY 📖 READ🎞️ Animation lets us move between the outside scene and Brain Buddy’s inner world. 🎞️ The in-between view makes the surrounding line art quieter while the important details come forward. 🎞️ White or lined paper gives Brain Buddy a place to appear, even when that page rests inside a wider desk scene. 🎞️ His drawings and his real-looking supply friends keep their own material rules as the story moves. | |||||
| 📲 App TAP 2 PLAY 📖 READ📲 The app begins with one calm blue-lined page and one useful thing to do. 📲 Brain Buddy, handwriting, and foam details live beside clear digital controls. 📲 They do not all need equal attention: let the current task lead, and bring the guide in when he helps. 📲 Moving the paper aside during a Brain wave is still an idea to explore, not a settled app rule. |
↔ On a small screen, slide across to explore every ingredient.
🧠 Choose the surface. Brain Buddy can inhabit white/plain/lined paper and light white, gray or blue post-its; a surrounding desk or notebook remains a different layer.
🪗 Choose the shape. A left-border row suits compact comparisons and expandable teaching; top-and-bottom borders give wide specimens room; a full postcard can hold a focused feature.
🎨 Make color useful. Repeat a topic’s color across its tab, card and examples; vary tones within a family, and use gray when a system role needs to be legible.
🎮 Make the action visible. Use real pixel buttons or purposeful foam controls, with hover, press, focus, readable labels and a touch route.
🗣️ Choose the expression. Match the words to their job, preserve their meaning in speech and captions, and give the actual material its correct font.
🔎 Compare before delivery. Reread current creator notes, compare the reference, test the outcome and record what was actually checked.
📎 The existing Play·Packet communication module holds these reusable rules; this map demonstrates them, and a future authorized Shadow review compares against them.
🧠 The app’s current direction combines Brain Buddy, hand-drawn details and useful digital actions on one blue-lined sheet.
✏️ A surface study, not the finished app.
📓 The Breaks App specification supports a minimal notebook experience; the creator’s newer direction makes the single blue-lined sheet explicit.
💡 Paper moving aside for a Brain·wave is an exploratory idea, while the calm paper surface is the current baseline.
📮 Cards and subcards use meaningful color to show how ideas connect.
📮 A postcard gives one idea a home.
📮 Smaller cards inside it can explore related parts, each borrowing a meaningful color from the whole.
📮 Gold might mark a benefit; green might support a growth or environmental idea.
📮 Let the color relationship help someone see the connection.
Use the real postcard material and meaningful topic color families. Foundations can use neutral or core-color combinations; rewards can be gold; environmental support or income can use green when meaningful.
Subcards can borrow one hue at a time through a postcard-pattern top strip. The parent can combine those colors. Grant Garden is a structural subcard reference, not automatic proof of the same palette.
Use real Brain Buddy, booklet, event label, composition texture, and game-package assets. Preserve proportions and approved character identity.
📊 A clear topic, score, and meter make feedback easier to discuss.
📊 Start with what we are rating, then keep the info control and score close to that heading.
📊 The meter underneath gives the judgment a visible place, with five-point adjustments and topic-specific expressions across twenty-point bands.
📊 Related ratings sit beside each other, making comparison easier.
📊 The quiet gray selection line simply shows which rating you are working with.
Flag + foam emoji → TAP 4 INFO → score, with the meter beneath. Material accuracy left, design accuracy right; a quiet pencil divider between them.
Overall ideas and brand fidelity pair; clarity spans below. Scores align with bar ends, with room above. Five-point adjustments; topic-specific emojis and phrases change across twenty-point bands.
Universal gray selection stroke, even pencil weight, around sixty percent opacity. No pointed swollen corners.
ℹ️ A floating info note adds context without rearranging the page.
ℹ️ Some details are useful when you want a closer look.
ℹ️ Tap the info sticker and a small tilted note opens over the page.
ℹ️ It can hold the reasons someone shared, so the rating stays compact and their meaning stays available.
ℹ️ Close it and your place has not moved.
Notes are captured from Deesil’s explanation, not assigned as typing homework. Small info controls sit beside flags; individually tilted post-its float over the meter and close without reflow.
Keep download actions in the existing pixel button treatment with foam emoji. Optional explanatory text lives in a light-blue info note. Remove repeated captions.
📐 Spacing, scale, and hierarchy make the brand easier to understand.
📐 A familiar color is only part of design accuracy.
📐 The heading needs enough presence, the words need room, and the next action needs to be easy to find.
📐 Look at the page as someone encountering it for the first time.
📐 Then check a phone too, so the same thought remains clear at a smaller size.
Content-sized padding; headings large enough for their job; clean alignment; believable prop scale; generous usable hit areas; no label/emoji collisions.
Handwritten helper text belongs on the paper, including the audio player’s optional-guide and device-voice notes. Inspect mobile and desktop before calling it done.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🧰 Choose the help that makes the next piece clearer and more faithful.
🧰 You don’t have to invent every piece again.
🧰 A good reference gives you a starting point, and the right skill helps with a particular job, such as writing clearly or shaping a foam sticker.
🧰 For an AI designer, that means using the relevant guidance and checking the actual result.
🧰 Explore the tools here as ways to support your judgment and make useful work easier.
👂 Thoughtful listening preserves the meaning behind a person’s feedback.
👂 Sometimes the most helpful thing is to let a thought finish.
👂 Good capture keeps the person’s meaning, including a correction that arrives while the work is changing.
👂 Clear notes give that thought somewhere to land.
👂 The next response can then build on what was actually said.
backchannel-harmony
brain-buddy-communication
Voice continuity, visible notes, understandable hierarchy, appropriate conversational or visual delivery.
🔎 Original sources help new work stay connected to the brand.
🔎 Before drawing a replacement, look for the original example.
🔎 It may already show exactly how a label, character, or corner should work.
🔎 Compare it with newer guidance and keep track of what it teaches.
🔎 That gives the next idea a grounded place to begin.
google-drive
deep-research
Brand-library recovery, dated source comparison, evidence and unresolved gaps. Research existing material before inventing replacements.
🌐 A live design example shows motion and relationships as well as appearance.
🌐 A picture shows a moment; an interactive reference can show what happens next.
🌐 Watch how a button responds, how a note opens, and where the text stays.
🌐 Those relationships are part of the design.
🌐 Bring the useful behavior with you when translating it to another surface.
Firecrawl tools
browser inspection
Published design pages, component behavior and styles. Browser inspection supplies visual evidence that extracted text alone cannot.
🧸 The foam treatment adds gentle physical presence while keeping the emoji clear.
🧸 Look at the thin rounded backing around this emoji.
🧸 A shallow bevel and soft shadow make it feel like a little foam sticker, while the original symbol stays crisp.
🧸 Its tilt can add personality without making it harder to read.
🧸 Give that small object enough space to belong.
foam-sticker-emoji
The exact approved rounded backing, shallow bevel, and soft shadow. Preserve crisp original emoji; test clipping and different shapes.
💬 Convo Cards make a useful response or discovery available in the conversation.
💬 A Convo Card can give an idea a place to explore or respond.
💬 Someone might open an explanation, make a choice, or try a small activity.
💬 Each control should do something useful for that moment.
💬 Keep the experience in the requested place, so the conversation and its visual support stay connected.
render-convo-card
visualize
Real inline interactive cards and visual explanations. A side website is a separate delivery surface, not a substitute for a specifically requested inline card.
🧩 Reusable templates carry the relationships that make work recognizable.
🧩 A good template carries more than an appearance.
🧩 It connects the examples, materials, and behavior that make the design feel coherent.
🧩 Start there, then adapt the content to the person and purpose.
🧩 A new idea can have its own character while still belonging to the same world.
template-creator
skill-creator
Package an approved reference with scoped rules, examples, assets, and checks. Reuse existing guidance before adding a new skill.
📽️ Presentation tools help a sequence of ideas stay clear in a slide format.
📽️ A slide gives us one moment in a larger story.
📽️ Use the approved template, then choose a layout that makes this particular moment clear.
📽️ Check how the pieces connect as the presentation moves forward.
📽️ The exported slides should carry the same meaning and material relationships.
Presentations
google-slides
Native slide editing, template derivation, appropriate export. HTML documentation does not require converting into a slide deck.
📄 A document or PDF needs its own readable, faithful composition.
📄 A document gives someone a reference they can return to.
📄 When the guide moves into that format, the type, examples, and spacing still need to work together.
📄 Look at the actual pages after export.
📄 Keep what helps the reader understand, with the same care given to the original experience.
documents
pdf
Word/PDF editions with rendered-page review when those formats are requested.
🎨 Generated scenes need a clear reference and a careful comparison.
🎨 A new scene can help an idea become visible.
🎨 Begin with checked references, then compare the result with what makes the character and world recognizable.
🎨 Brain Buddy’s identity should stay consistent even when the setting changes.
🎨 Let new artwork add possibility while respecting the original.
imagegen
Needed texture or scene variants using checked references. It does not replace an existing canonical Brain Buddy asset or certify character accuracy.
📦 A mockup reveals how artwork works at the scale of a product.
📦 Imagine this artwork on an actual package.
📦 Does the name read clearly, does the character have enough room, and does the label feel part of the object?
📦 A mockup lets us examine those relationships before carrying them forward.
📦 Use it to learn how the design meets its setting.
Adobe create-mockups
Place approved artwork on a real product surface when a mockup is needed. Confirm source artwork fidelity and current tool access.
🔍 A final review checks meaning, usefulness, and the latest feedback.
🔍 Take another look at what the person will actually see.
🔍 Is the main idea clear, do the details belong together, and has the latest feedback changed anything?
🔍 Compare the result with its references and keep unanswered questions visible.
🔍 Careful review helps the next version earn its place.
deep-card-review
Creator intent, evidence, practical translation, gaps, and closure. Useful for this guide because it will shape later design behavior.
These skills are listed in the current HQ catalog. Listing is not evidence that every connected service is signed in, that every skill ran in this pass, or that a future customer AI Bestie inherits it. This pass used brand communication, foam material, Drive/source research, a capture subagent, browser checks, and local visual authoring.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🗺️ Turn the design language into examples people and AI designers can use.
🗺️ 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.
📝 Collect ideas and corrections into one clear, dated understanding.
📝 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.
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.
🔎 A useful reference answers a specific design question.
🔎 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.
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.
🎨 Visual grammar connects material, words, movement, color, and scale.
🎨 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.
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.
🧩 Small specimens make a design behavior easy to understand and refine.
Build a small, reusable specimen for each important behavior.🧩 Try one small example before building a whole page.
🧩 It might be a tag lifting, a button responding, or a note revealing an explanation.
🧩 Keep the surrounding context simple enough to see what the example teaches.
🧩 Then check how it works where someone will actually use it.
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.
🎃 Named variations can celebrate a moment while preserving the main template.
🎃 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.
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.
🔗 Connected references help future work reuse approved design meaning.
🔗 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.
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.
✅ Review meaning, materials, screens, behavior, and continuity together.
✅ 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.
Apply these lenses to every chapter. Record what was actually checked; six passes are not a claim of complete creator approval.
🚪 Shared design terms make the next review more specific and useful.
🚪 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.
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.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
🔎 Use each reference for what it can actually teach.
🔎 An original drawing can teach us something that a long description misses.
🔎 Look at Brain Buddy’s lines, the edge of a label, or the shadow beneath a paper tag.
🔎 Each source helps answer a particular question.
🔎 Keep its context and newer corrections nearby, so a useful example becomes a thoughtful starting point for your own work.
🔎 Reference notes connect a visible detail with the evidence behind it.
🔎 These references help us understand the choices on the page.
🔎 One supports a typeface, another a pencil texture, and another the way a card corner is built.
🔎 Use each for the detail it actually shows.
🔎 A clear source note helps someone learn from the example without overreading it.
🖼️ Original source sheets help us compare the animation worlds.
🖼️ These sheets show three views of the animation journey: Brain Buddy’s character, the human outline, and the exterior world.
🖼️ Brain Buddy’s character, the human outline, and the exterior world each have a distinct drawing language.
🖼️ Notice what changes as we move inward and what keeps the journey connected.
🖼️ A temporary source can still teach a detail, provided its status stays clear.
The sheets are embedded unchanged. A “TEMP” asset stays identified as temporary; it is evidence of the style, not blanket approval of a final asset.
📌 Visible open questions keep a useful draft from becoming an accidental rule.
📌 A useful guide can still have questions worth exploring.
📌 Some scenes need another example, and some names or boundaries need a clearer decision.
📌 Keep those openings visible so the next conversation has somewhere useful to begin.
📌 Uncertainty can help us choose what to learn next.
🧭 The guide and its existing record links help design understanding stay connected.
🧭 This guide brings the design teaching together.
🧭 Its references keep the origins and corrections close, and the Play·Packet helps future work find the right part.
🧭 Carry approved examples into new places with a careful comparison.
🧭 The aim is shared understanding that keeps improving.
This visual guide: the current working universe map and plan.
Design continuity record: approval lineage, source checks, and the pointer here.
Play·Packet: existing entry, communication, design, and Formula modules carry the reusable routing and review behavior.
Design system: destination for approved component examples and template rules after a verified handoff. No automatic synchronization or universal future memory is claimed.
🌱 The shared purpose is common-sense wellness: make the idea manageable, preserve choice, and offer a useful next step.
✨ The six principles—FUN, SIMPLE, CLEAR, TRUE, INSPIRING, and UNIFYING—shape both the explanation and the experience.
🧠 Brain Buddy’s guidance combines warmth, curiosity, and useful clarity; a little wit belongs when it helps the moment.
📅 Sources inspected September 12, 2026; current creator corrections govern this guide.
🗂️ Historical host assumptions, old palette restrictions, and unverified outcome claims remain source history, rather than current promises.
📎 The existing Play·Packet communication module owns the expression-role map; this guide demonstrates it and the checklist tracks its application.
💓 A future authorized Shadow review can recover, compare, and propose refinements against that reference, preserving creator approval and a dated source trail.
🔊 These revised lessons use Samantha device narration; expression, recorded sound, and creator approval are separate.
Use the working reference and source files together. The working kit includes shared code and assets; two large original reference sheets are separate downloads. This chapter file identifies the relevant markup.
Chapter markup · Usage guide · Working kit · Original reference sheets
The emoji, handwritten label, hover cue and opened surface tell one story. Explore a working pattern below; keep its information, material and behavior connected when you reuse it.
Explore a handoff, an evidence-led comparison and an interaction design task. Each carries the full nine-note structure, Formula plan and completion checks. These are working examples for design review, not completed work.
Hover or focus for the themed hint. Click once to open; click again to close.
🧭 Start with the person. What matters, and what would a useful result feel like?
📌 Keep creator guidance here. Working observations belong in Notes.
Click the same emoji again to close · Escape also closes.
🎯 Make the outcome visible. Choose the sources, steps and checks that serve it.
🧰 Match effort and context to the actual task.
Click the same emoji again to close · Escape also closes.
📚 Reuse what we already know. Then investigate the questions that still matter.
🔗 Keep source locations, uncertainty and competing explanations together.
Click the same emoji again to close · Escape also closes.
🌈 Begin with the exact reference. Preserve material, lettering and interaction before adapting.
✨ Use color to guide attention, with breathing room around each idea.
Click the same emoji again to close · Escape also closes.
✏️ Record useful observations. Preserve attribution and corrections.
💬 This lined-paper variant differs from the warm-yellow Plan note.
Click the same emoji again to close · Escape also closes.
💗 Make the next action easy. A small invitation can open a useful conversation.
🌱 Pink cue, pink note, matching ink: one coherent interaction.
Click the same emoji again to close · Escape also closes.
Demonstration data · these are examples, not a live worker.
📦 You receive: a clear brief and its sources. ✨ Done means: another worker can explain the task.
🛠️ You receive: a usable piece of the experience. 🔗 Needs: the agreed brief. 🔎 Done means: the real interaction works.
📎 You receive: a checked result with evidence. 💬 Needs: completed work. ✅ Done means: the owner accepts it or records a correction.
A good interaction tells you what opens, preserves your place, and makes it easy to close or continue.
Optional device speech. The readable text stays available.
🎯 The trigger describes its action. The surface explains the useful moment. The connected tool performs only the permitted action. The receipt shows what actually happened.
Example: accepted result. A status light accompanies words and verified state; it never creates activity by itself.