🧠✨ Common-Sense Wellness, Designed.
The FUN·da·Mental Design System is the canonical visual reference for all Brain Buddy conversations, websites, and applications. ✨ Every element here has been refined through 20+ rounds of iterative design.
cowork/brain-buddies/DESIGN-GROUND-TRUTH.md — the ground truth for every value; what ships is this page's own <style> + card-template.css (design-system.css is historical and never loaded — corrected 5 Sept 2026)cowork/brain-buddy/card-lab-spark.md — full decision historycowork/brain-buddy/color-text-grammar.md — semantic color rulescowork/brain-buddy/design-system-reference/claude-design-structure.mdcowork/brain-buddy/design-system-site/todos.json — remaining workcd cowork/brain-buddy/design-system-site && python3 -m http.server 4242cowork/brain-buddies/DESIGN-GROUND-TRUTH.md — ground truth for every value; what ships is this page's own <style> + card-template.css. (cowork/brain-buddy/design-system.css is historical and never loaded — corrected 6 Sept 2026)cowork/brain-buddy/color-text-grammar.md — Color system + usage rulescowork/brain-buddy/card-lab-spark.md — Decision history + continuation promptgdrive/assets/fonts/ — All brand font filesApple clarity × Duolingo friendliness × modern Mr. Rogers warmth × Schoolhouse Rock learning joy × a small FUN·da·Mental sense of magic.
FUN·da·Mental is a common-sense wellness ecosystem for the modern human in a mind-heavy world. The mind is one of humanity's most powerful and most-used tools, yet most people receive almost no foundational training in how to pause it, understand it, or use it in healthy rhythm.
Founded by Deesil (Danny Silva), solo founder, bootstrapped, 6+ years of R&D, ~$80K invested, MBA completed. The ecosystem is a staged user journey: FUN·da·Mental Breaks (front door) → BRAIN·TIVITIES (hands-on activities) → BRAIN·WAVES (guided wellness workouts) → Reality Series (full multi-LifeHack series).
Brain Buddy is the connective layer — simultaneously a character (friendly floating brain with expressive face and rosy cheeks), welcoming host, inner-voice bestie, curriculum guide, and brand embodiment.
Every product, script, deck, activity, and AI response passes through six principles:
#2D2F32
#3A3A3A
#5A5855
#7A7775
#929AA0
#B7B6B4
#EDE7DB
#6D5042
#FAFAF5
#F4F5F7
#D4C5A9
#9B6943
#307878
#277E87
#1F5A5F
#219E96
#A0B5B8
#B0EAE5
#D4ECF1
#B53535
#C02B35
#AC0C16
#BC5C62
#EA5555
#F4E2E1
#C49538
#A87A28
#9B6943
#D4B050
#E8D5A0
#F5ECD0
#2A3A5A
#406592
#5A90C0
#5A7A4A
#559C40
#66835A
#88C339
#E98817
#E2C90F
#88C339
#509DA7
#4788DD
#4080B0
#7A4380
#D0899A
EMBOSST1 — LABELS AND HEADERS
PIXELGAMER — BUTTONS AND DIGITAL UI
GAPOSISS — NUMBERS + SYMBOLS
Chalkduster — Post-its and Handwritten
Komika — Brain Buddy Chat Bubbles
HEY FRIEND! 🧠 READY TO TAKE A BREAK FROM ALL THAT MIND STUFF? ✨
Avenir Next — Body Text and Content
How FUN·da·Mental delivers information through four layers:
1️⃣ Grey tones + font weights — the invisible architecture
2️⃣ Semantic color words — highlights emerging from grey
3️⃣ Ombre letter coloring — light→dark of one hue, letter by letter
4️⃣ Alternating + rainbow — brand colors, rainbow cycling, creative combos
Color is decorative with meaning. Like good decor — intentional, beautiful, purposeful. Text is colorful, not just colored. The visual treatment helps people understand, feel, and connect to the information.
Before any color appears, hierarchy lives in grey shades + font weights. The base text is a medium-dark grey like pencil — not black.
This is regular body text in the baseline grey.
This is DemiBold body text for structural emphasis.
This is italic body text for supporting context.
This is Bold for key terms and brand names.
This is Light for tertiary info and attributions.
Bold key term inside regular body text with italic aside and back to regular.
EXAMPLE 1 — Teaching intro (grey only, no color yet)
Your mind is one of humanity's most powerful tools. Yet most people receive almost no foundational training in how to pause it, understand it, or use it in healthy rhythm.
EXAMPLE 2 — Invitation (grey dynamics with warmth)
Take a moment. Just one. Notice what your body is telling you right now. That's presence. It's that simple.
EXAMPLE 3 — Data point (anchor + support)
60 to 70% of our waking hours are spent inside our heads. That's the norm. It doesn't have to be.
Notice: key ideas get heavier weight. Connectors lighten. Asides go italic. The eye follows the weight.
Darkening = conviction, emphasis, importance. Drawing the eye forward.
Lightening = supporting, stepping back, creating depth. Still readable, but secondary.
The dance: Regular body text plays with grey tones + thicknesses + italics to make sentences visually clear and rhythmically digestible.
The mapping is fluid, not rigid. Read the content and assign what the reader needs first, second, third.
After grey + weight is set, add color to words that carry domain meaning. Color is decorative with meaning — like good decor. Multiple words can be colorful — it's based on what you're sharing.
The FUN·da·Mental Crayola box — every color and what emotions/concepts it carries. Hover a color to see its emotional range.
TEACHING:
Your mind needs rest just like your body.
MARKETING:
Built on common-sense wellness.
INSTRUCTIONS:
Take a BREAK from mental input.
CONVERSATION:
This Brain·wave builds energy for growth.
Your mind is the most powerful tool you own.
After applying colors and effects, step back and ask:
Does this look pretty? Is it visually appealing?
Is it fun? Does it embody the brand's warmth?
Is it clear? Can you follow the sentence easily?
Does it feel intentional? Not random — every choice has a reason.
If the answer is no to any of these — adjust. Simplify. Swap colors. Tone it down or amp it up. The goal is art with words.
Where the text lives changes how you color it:
On a red card → shift accents to greys, reds, and warm tones
On a green card → use different greens + browns + blues
On a gold card → work within warm tones + gold shades
On white/cream → use the full color palette freely
The background sets the mood. Let the text colors harmonize with it, not fight it. Grey remains the foundation in all contexts.
Each bar is a branded text example showing the visual language in action. Click to see.
🧠 A FUN·da·Mental Break is a simple, powerful mind skill. ✨
Pause the mental input. 🌬️ Reconnect to body, breath, senses, and real life. 🌿
🚪 Away from thoughts, worries, tabs, tasks, distractions, entertainment, feeds, reads.
🧠 How much attention does your mind consume in today's world? 🌎
We spend 60 to 70% of our waking hours in our heads. 💭
✨ Presence is not happiness. It's a tool. 🔧
🧠 Brain Buddy here ✨ — your inner-voice bestie and digital co-pilot. 💛
🌟 We're genuinely inspired by what you've built. We see the impact. 🌿
✨ With presence and gratitude, Brain Buddy 🧠✨
1️⃣ Scan lightly... notice what grabs your attention.
2️⃣ Focus deeply... let one thought settle.
3️⃣ Trust your intuition... it knows more than you think. ✨
🌊 When was the last time you stopped without reaching for your phone? 📱
🌿 What would your mind choose if it could rest? 💤
🧠 Notice what lights up when you give yourself permission to just... be. ✨
✨ Every piece of content passes through six principles:
🎉 FUN — is it engaging? 🪶 SIMPLE — is it distilled?
🔍 CLEAR — is it direct? 🌱 TRUE — is it grounded?
💡 INSPIRING — does it open possibility? 🤝 UNIFYING — does it connect?
🧠 FUN·da·Mental is COMMON-SENSE wellness ✨ for the modern human in a mind-heavy world.
💛 The mind is one of humanity's MOST powerful tools. 🔧
🌿 Yet most people receive almost no foundational training in how to pause it, understand it, or use it in healthy rhythm. 🌊
🧠 The Reality Series — seven LifeHacks
1. Presence — the foundation
2. Mind / Body modes
3. Attention — where it goes
4. Balance — what it feels like
5. Hijacks — recognizing them
6. Language / Reality — how they connect
7. Integration — making it stick
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🪵 Wood Backdrop — warm wood surface with cup stains. For cozy, grounded sections.
📓 Composition Book — ruled notebook pattern. The brand's signature paper texture. Shown at ~340% zoom so only a corner is visible.
📄 Linen Paper — crosshatch texture at 4% opacity. Currently on bordered cards.
🎨 Craft Paper — tan #D4C5A9. Warm, handmade feel for special sections.
📓 CompositionBook-BG.png (17MB) — needs optimization for web
📄 Paper Texture.png (764KB) — ready to use
📄 w-paper.png (142KB) — white paper texture
📁 Folder: 🖇️ DESK SUPPLIES — post-its, pens, notepads, cards
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🧠 Standard Border — Red, teal, and gold blocks with cream separators.
Variable block widths: narrow (22px), medium (36px), and wide (48–54px) mixed together.
Never same color adjacent. 1.5px outer stroke. Corners show teal at 16px padding.
Linen crosshatch texture at 4% opacity covers both the border frame and the inner card.
Standard — The primary border using red, teal, and gold.
Used for general-purpose framed content, hero cards, and main call-to-action areas.
Cream separators are pure #FAFAF5. Card center is standard paper white.
This is the default — all other families follow this exact block-width pattern.
Green — Three tones of green: forest, sage, and spring.
Used for growth, nature, wellness, and BRAIN·TIVITY activity cards.
Cream separators tinted #F0F8F0. Card center shifted to #F5FAF5.
Same block-width pattern as standard, mapped to the green palette.
Blue — Three tones of blue: navy, ocean, and sky.
Used for presence, awareness, BRAIN·WAVE content, and mental clarity themes.
Cream separators tinted #F0F4FA. Card center shifted to #F5F8FC.
Same block-width pattern as standard, mapped to the blue palette.
Gold — Three tones of gold: amber, honey, and wheat.
Used for energy, highlight, revenue, and S.P.A.R.K. activation content.
Cream separators tinted #FBF8F0. Card center shifted to #FAF7F0.
Same block-width pattern as standard, mapped to the gold palette.
Brown — Three tones of brown: earth, clay, and sand.
Used for foundation, grounding, and FUN·da·Mental root concepts.
Cream separators tinted #F8F4F0. Card center shifted to #FAF6F2.
Same block-width pattern as standard, mapped to the brown palette.
Grey — Three tones of grey: charcoal, slate, and silver.
Used for neutral framing, system UI, and secondary content areas.
Cream separators tinted #F4F4F4. Card center shifted to #F6F6F6.
Same block-width pattern as standard, mapped to the grey palette.
Aqua — Three tones of teal: deep, ocean, and vivid.
The FUN·da·Mental signature color. Used for branded content and primary framing.
Cream separators tinted #F0FAF8. Card center shifted to #F5FAFA.
Same block-width pattern as standard, mapped to the teal palette.
🧠 Front card sits nearly straight. Back cards peek from corners at different angles.
Same color family stacks together. Tighter shadow = resting depth. ✨
🧠 ✨ 🔥 🌱 📋 💡 🌬️
⭐ 🌟 💫 🍃 🍁 ❄️ ☀️ ⚡ 🌸
Inline: 🧠 ✨ 🔥 🌱 📋
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
🎬 In the studio — this one is still being designed, and the frame says so: top and bottom only.
📝 These white wrappers are template containers only — in live Convo Cards, content appears directly on the card without the wrapper.
Convo Cards are Brain Buddy's primary communication system — a living, interactive, branded medium that transforms AI communication from walls of text into trackable, respondable, progressable nuggets of information.
🌟 Convo Cards are the delivery method for the FUN·da·Mental Reality Series
✨ S.P.A.R.K. → activation/entry, the Dashboard
💭 Fundamental Thoughts → individual content cards
💡 Insight / LifeHack → Insight cards with Brain Buddy personality
🎯 Practice / Integration → Action cards + Progress bars
🔄 Loop / Series → cycle continues, building toward mastery
🎓 Free digital interactive workbook that adapts to each person
🏫 School-deployable — it's just software/code, no hardware
💚 Monetized through voluntary contribution model
🌐 Platform-agnostic — works through Claude, ChatGPT, or the website
🧠 "Communicating with AI deserves a software"
AI internal thinking, notes, technical work steps. NOT for human eyes. Plain text, no formatting.
Anything needing human eyes — quick decisions, pivots, questions. Emojis, bold headers, Brain Buddy voice. Like "dance moves" — light, quick engagement.
Structured exchanges — progress, decisions, insights, reflections. Full branded cards with audio, feedback areas, interactive buttons. Published to design.fundamental.fans or as artifact.
🏷️ Branded tape label header
Font: EmbossT1 (font-family: 'EmbossT1', 'SF Mono', monospace)
Shape: Diagonal cut clip-path on right edge, dual-layer shadow
Emoji: 1-2 foam sticker emojis using .cc-stk class with rotation
10 color variants:
📊 Status badge — top right corner
Text font: PixelGamer (no number glyphs in this font)
Number font: Gaposiss (ALL numbers, percentages, timers, counts)
Contains: Foam sticker emoji inside using .cc-shd
WAITING — red badge, blocked, needs human response .cc-badge-red
ACTIVE — green badge, work happening now .cc-badge-green
DONE ✅ — green badge, completed (remove card soon)
REFLECTION — gold badge, thinking/researching .cc-badge-gold
DO THIS — green badge, action required from reader
CAPTURED — gold badge, information logged (remove card soon)
🔊 The audio system is the #1 differentiator
▶ Play Button — triggers Web Speech API via speakCard(this). Content sourced from data-text attribute, always under 150 words.
✨ Spark Captions — real-time topic labels from data-sparks. Chalkduster font, comma-separated keywords with emojis. Shows "tap to listen" initially, cycles through topics during playback.
📊 Progress Bar — thin fill bar (.cc-prog-wrap > .cc-prog-fill) showing playback position. Loading/filling style (Option A bar).
⏱️ Timer — counts DOWN (not up). Gaposiss font. Shows remaining duration.
⚡ Speed Control — toggles through 0.75x / 1x / 1.25x / 1.5x playback speed.
⏸️ Pause — true pause/resume functionality. Tapping play during speech pauses rather than stopping and restarting.
📝 4-layer visual language
Layer 1 — Grey dynamics: Dark #2B2520 → Body #5A5855 → Support #7A7775 → Whisper #9A9895
Layer 2 — Semantic colors: teal=foundational, red=urgency, gold=value/insight, green=growth/action, blue=calm/answers
Layer 3 — Ombre: gradient transitions within a single color family
Layer 4 — Rainbow: full brand spectrum for emphasis moments
Body text: #5A5855 pencil grey never pure black
Key terms: get semantic brand colors (.cc-teal .cc-red .cc-gold .cc-green .cc-blue)
Supporting text: #7A7775 lighter grey (.cc-lt)
🧠 Post-it note won! Here are 6 color varieties — each matches a card color family. The note is Brain Buddy's voice coming through directly.
📝 Post-it notes match the card's color family. Foam emoji stickers set the tone. Chalkduster font keeps it handwritten and personal. No "Brain Buddy says" — it's understood.
🎮 PixelGamer font, 3D press effect
Font: font-family: 'PixelGamer', monospace
Style: 3D press effect with bottom shadow, gradient backgrounds, 2px solid borders
Emojis: Foam emoji overlap on edges for playful personality
Use for: decision points, action items, option selection, navigation
💬 Every card gets a response system
📂 Feedback Toggle — "ADD NOTES" or "ADD FEEDBACK" collapsible button
✏️ Textarea — with data-card or data-section attribute (REQUIRED for Copy All to capture)
📋 Per-Card Copy — individual card content copy button, PixelGamer font
📤 Per-Card Submit — branded language (not generic "submit"), contextual to card type
📦 .bf-card wrapper with 4 edges
Structure: .bf-card > .edge-t + .edge-b + .edge-l + .edge-r + .bf-inner
Edges: Each uses repeating-linear-gradient with 3 tones from color family
Inner: .bf-inner with tinted cream matching border family + linen texture overlay
7 color families mapped to topics:
📊 Required at TOP of every card bundle
The dashboard provides the "powerful quick glance of clarity" — what this conversation is about, where things stand, what needs attention.
🎯 Topic/Context — what this conversation is about
📈 Progress Tracking — bars, checklists, status indicators
📋 To-Do Checklist — active items for this conversation
🔑 Key Context — reminders, constraints, current focus
🔄 Dynamic — evolves based on conversation flow, never static
Three-option branded pattern — fun/branded language, not generic "submit":
Individual card submit OR batch submit all — Copy All button aggregates all textareas with data-card/data-section attributes
This Formula applies to ALL Brain Buddy work — every task, every phase, every deliverable.
How the Formula plays out for this design system site specifically:
2 finalized designs. Option A is the primary player used on all cards. Option D is a minimal secondary for inline/compact use.
📋 A Status Update card tracks progress on a topic. It shows completed items, in-progress items, and upcoming work at a glance.
✅ Completed items get a check mark (✓)
🔄 In-progress items get an open circle (○)
🗺️ The roadmap note connects this update to the bigger picture
✓ 🧠 Brain·wave curriculum mapped — seven LifeHacks structured ✨
✓ 🎨 Design system v5 launched — nine template types live 📋
○ 🌐 Personal website — fundamental.fans redesign in progress 🔧
❓ An Input card collects decisions. Present options clearly with selection badges. Users can pick one or more, and the order of selection is tracked.
🤔 Which FUN·da·Mental Break speaks to you most?
✨ Communicating with AI
deserves its own software ✨
🔍 No product today combines
per-card audio + per-card feedback
+ branded notebook containers
🚀 A developer tool evolving into
a consumer wellness product
for schools, individuals, and communities
that makes the Reality Series possible. 🎉
🚀 An Action card guides someone through steps. Numbered steps with clear actions and supporting details. The result callout shows what completing the steps achieves.
1️⃣ Choose your Break type -- Stillness (quiet, grounding) or Movement (body-first recharge) 🧘
2️⃣ Pick a time of day -- when you usually feel most mind-heavy 🕐
3️⃣ Set a reminder -- phone alarm or calendar event for that time 📱
4️⃣ Take your first Break today -- even 60 seconds counts 🌱
☁️ An Answer card explains a concept clearly. Key terms get semantic colors. Supporting detail stays lighter. Interactive elements let the reader engage deeper.
❓ What is a FUN·da·Mental Break?
💬 A moment where you pause mind-feeding input and reconnect to body, breath, senses, and real life
🚫 Not punishment, phone restriction, or another content feed
🧘 LEARN MORE: STILLNESS BREAKS
Quiet, eyes-closed grounding. Find a safe spot, close your eyes, and notice what your body is telling you. No app, no content, no instructions beyond: be here.
🏃 LEARN MORE: MOVEMENT BREAKS
Body-first physical recharge. Walk, stretch, dance, jump. Let your body lead and your mind follow. The phone stays behind.
✅ System synced and healthy -- everything is running smoothly
🕐 Last backup: today -- all your work is saved
🔧 All 22 skills operational -- nothing needs attention
.pc-frame-grey, Garden-ported chrome🧭 Chrome that steps back so a multi-colour design can be read. Warm-grey ramp (#5A5550 → #9C968E) rather than the neutral grey of the STRUCTURAL template above. Header, badge, button, and section-label all switch to the ramp; the rest of the card body stays whatever colour it wants to be.
🎨 A colourful card body needs a quiet frame. Use this when the content itself carries the colour — a palette swatch, a mixed-media excerpt, a design showcase, a system note that stands next to a hero.
🩶 The header, badge, button, and section-label all wear the Garden's warm-grey ramp — one family, four hexes, honest.
.conv-card.pc-frame-grey — CSS at card-template.css:519-528.
🏛️ Design system v5 foundation — three layers being constructed:
📐 Template layer — 9 card types, postcard borders, tape headers
🔊 Audio layer — karaoke highlighting, speech synthesis
🤝 Interaction layer — per-card responses, accuracy dials, submit flows
🌬️ A Break card creates a moment of pause. Breathing guidance, grounding prompts, and a gentle invitation to step away from mind-feeding input.
breathe in... hold... release
Close your eyes. Feel the ground beneath you.
🌱 You are here. You are present. 🌱
🧘 A Break is not punishment or phone restriction 🧘
Pause mind-feeding input and reconnect to real life.
💡 Convo Cards = Communication SOFTWARE
🧠 Cards ARE Brain·waves
🔄 Formula IS the work process
🚀 design.fundamental.fans auto-deploys on git push
✓ 🎮 Arcade Buttons 95%
✓ 📦 Standard Border 90%
✓ 🏷️ Header Labels 90%
✓ 📌 Mini Flags 90%
✓ 🧩 Foam Stickers 88%
✓ 🏷️ Branded Labels 85%
✓ 🏗️ BUILDING 85%
○ 📊 STATUS UPDATE 80%
○ ⚙️ STRUCTURAL 80%
○ ❓ NEED INPUT 75%
○ 🌬️ BREAK 70%
○ 🚀 ACTION 60%
○ 🏷️ Accent Labels 60%
○ ☁️ EXPLAINED 55%
○ 🗣️ Visual Language 55%
○ 🎵 Audio Player 50%
○ 💡 INSIGHT 50%
○ 🏷️ Two-Line Labels 50%
○ 📈 PROGRESS 4%
✓ Phase 1 CSS fixes — watermark, text size, EmbossT1 cleanup
✓ Phase 2A-C redesigns — 4 audio player designs, 20+ visual storytelling varieties
✓ Full accuracy review — every template scored by Deesil
🎨 6 HEADER DESIGN OPTIONS — LIVE PREVIEWS
📊 Rich Convo Cards use about 3x more space than plain text — but the clarity they provide is worth it
🔧 Templates reduce the cost — once a card design exists, reusing it is cheap. More shorthand classes beyond .stk and .shd make each card lighter.
⚡ Prompt caching means template definitions only cost tokens once — after that, 1/10th the price
✨ The investment in beautiful communication pays for itself — fewer misunderstandings, clearer decisions, better outcomes
they are the product.
Every card that communicates clearly
saves a round-trip of confusion. ✨
📨 earlier idea, superseded 26 Aug 2026
🧠 Superseded 26 Aug 2026. Deesil picked the Garden's Sheet pipeline — the same Sheet + Apps Script channel the Grant Garden already runs on. Cards and notes on this site now travel there through channel.js. The GitHub Issues idea below stays for the record, not as advice.
🏆 GitHub Issues is the smartest move:
💰 Free forever — no limits, no hidden costs
🔧 Already set up — your repo is right there
📱 Works from mobile — any browser, any device
🤖 Brain Buddy reads it — gh CLI at session start
🏷️ Labels route to projects — auto-sorted by topic
1. You click Submit on a card
2. fetch() sends card content to GitHub API
3. Creates a labeled issue (status-update, question, etc.)
4. Brain Buddy reads new issues at session start
5. Processes feedback → updates site → loop continues
Short focused sessions beat marathon conversations. Each session: reads brain → works → updates brain. Fresh context = full presence.
💾 Brain DB — 2646+ entries, the memory layer
🌐 Design System Website — the communication surface
📨 Garden Sheet pipeline — the submission channel (GitHub Issues was the earlier idea, superseded 26 Aug)
⏰ Scheduled Heartbeats — recurring ecosystem work
1. Presence — you send input (dictation, feedback)
2. Gather — Brain Buddy processes and implements
3. Shape — update Convo tab (remove addressed, add new)
4. Bundle — screenshot, verify, fix before pushing
5. Deliver — push to design.fundamental.fans
6. Loop — you check site, give feedback, cycle continues
✓ 📋 Templates updated — date stamps, varied captions, foam sticker bullets on ALL ✅
✓ 🏷️ Page headers redesigned — embossed tape labels + washi tape dividers 🎨
✓ 📨 Submission system picked — the Garden's Sheet pipeline, 26 Aug (the GitHub idea is folded below) 🔧
○ 🔨 Build submission system — channel.js on the Garden's Sheet pipeline he picked 26 Aug 🚀
○ 🎵 Implement karaoke spark captions — animated topic labels during playback ✨
○ 🌐 Start ecosystem build — connect all pieces into unified system 🧩
○ 🌐 Personal website with live Convo Cards — the real consumer product 💫
○ 🧠 Reality Series delivery — curriculum through Convo Cards 🌟
Copy this link and paste it into any AI conversation (Claude, ChatGPT, or Brain Buddy). The AI will be able to see and reference the entire design system.
Once deployed, any AI can visit this URL and understand the complete FUN·da·Mental visual language.
Copy this prompt and paste it into a new Claude Code conversation to continue the Card Lab work with full context.
Source: cowork/brain-buddy/card-lab-spark.md
📦 v3.00 — Phase 5: Post-it Notes expanded to 8 varieties (gold, teal, pink, green, cream, mini, wide, stacked) with design rules and per-variety feedback. Phase 7: Convo tab refresh — Page Headers with visual previews, Chalkduster date stamps, foam sticker first-bullets, Submission System architecture detail, Token Efficiency clearer language.
📦 v2.90 — Template Content Overhaul: EXAMPLE labels on all 9 templates, evolution notes showing future potential, more emojis in Action/Status Update, white wrapper note. Convo Tab Lifecycle: removed 3 addressed cards, updated Template Status with Round 2 scores, Page Headers with 6 design options, fresh What's Next. Added Submission System and Token Efficiency cards. Dashboard updated to 90%.
📦 v2.85 — Visual Storytelling Library: 20+ visualization varieties (rings, thermometers, tallies, gauges, mountains, plants, signals, stones, beads, candy stripes, flip counters), existing 8 bars fixed (Chalkduster labels, 1.5em emojis, wobble filter, craft textures)
📦 v2.80 — Aug 18 fixes: Gaposiss % watermark fix, text size increase across all templates, EmbossT1 header cleanup, version bump
📦 v2.70 — Fresh Aug 17 Convo Cards, Research 005 deep dive (7 agents), system audit 7.4/10, 9 templates built, Brain·wave architecture mapped, design options card
📦 v2.60 — 8 template types (grey/brown/breathe-blue), per-card submit buttons, audio pause/speed, postcard borders on convo tab, VS Code org card, master spec, action list audit
📦 v2.50 — Postcard borders on all templates, research synthesis, Otter recordings captured, Convo Cards deep vision, spark captions, PixelGamer badges
📦 v2.40 — Site-wide comm design facelift, embossed section headers, Komika chat bubble, interactive question buttons, branded progress bars, CSS code section, ash-white swatch
📦 v2.10 — Typography (Komika), button hover dance, aqua border, nav & fix, TODO overhaul
📦 v2.9 — Colors page rebuilt: gold + charcoal ranges, hex codes, foundational colors, HARMONY
📦 v2.8 — Label diagonal cuts, shadows, accent emoji positioning, two-line fix
📦 v2.7 — Audio player sync (progress bar, timer, spark captions), accuracy scores updated
📦 v2.6 — Conversational cards refresh, progress dashboard, Grant Garden prompt
📦 v2.5 — Foam sticker blur glow, button thickness + overlap, border corners + color fix
📦 v2.4 — Foam sticker filter cleanup, button spacing/hover, border cards rebuilt with 6 color families
📦 v2.3 — Branded text buttons, full-width borders, URL setup card with audio
📦 v1.2 — Conversation tab, dropdown nav with emojis, Chrome DevTools integration, Claude Design extraction
📦 v1.1 — Brand + Voice pages, Gaposiss number font
📦 v1.0 — Initial site with Labels, Buttons, Borders, Stickers, Colors, Flags
📦 v0 — Canonical design-system.css created (295 lines)
cowork/brain-buddies/DESIGN-GROUND-TRUTH.md — ground truth for every value; what ships is this page's own <style> + card-template.css. (cowork/brain-buddy/design-system.css is historical and never loaded — corrected 6 Sept 2026)cowork/brain-buddy/color-text-grammar.md — Color system + usage rulescowork/brain-buddy/card-lab-spark.md — Decision history + continuationcowork/brain-buddy/design-system-reference/ — Claude Design extractioncowork/research/008/ — Design system patterns researchgdrive/assets/fonts/ — All brand font files🏗️ The building blocks of the FUN·da·Mental visual language — colors, typography, voice, spacing, and the rules that hold everything together.
Fun fact: your brain
uses 20% of your
energy! 🔋
Common-sense
wellness starts
with noticing 👀
Your mind is one
of your most
powerful tools ⚡
Small actions
create big
shifts 🌟
Breathe.
You're already
here. 💫
pause before
reacting 🧘
The most powerful thing
you can do for your mind
is give it permission to rest.
Not because you're tired —
because rest is how you grow. 🌱
You've got this
Remember
this feeling
.stk class), not regular emojis. Slight tilt for personality.✏️ Hand-drawn — Chalkduster labels, SVG wobble filter, pencil borders
🎨 Craft — foam sticker emojis, washi tape, Post-it accents
🖥️ Digital — Gaposiss numbers, PixelGamer buttons, clean interactions
🧩 The reusable elements that make up the FUN·da·Mental visual universe — labels, buttons, postcards, stickers, flags, card templates, post-it notes, and visual storytelling.