🧠✨ 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-buddy/design-system.css — the canonical CSS source of truthcowork/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-buddy/design-system.css — Canonical CSS (295 lines)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
🪵 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
🧠 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: 🧠 ✨ 🔥 🌱 📋
🔧 Workflow: Do work → check (80/20) → update cards → heartbeat if needed
💜 Heartbeat: 🎨 + colored heart + context emoji = presence pulse for next prompt
🎨 Style: Grey dynamics, semantic colors, emojis, branded text. Not walls of text.
📋 Cards: Add for updates/questions. Remove when addressed. Never remove unresponded.
card-template.css:🏷️ .cc-header — embossed tape label header
🧩 .cc-stk — foam sticker emoji (2.8px)
🔊 .cc-player — audio play/progress/time
✨ .cc-sparks — topic captions during playback
🧠 .cc-note — Brain Buddy insight note
📋 .cc-copy — PixelGamer copy button
✓ Completed item with detail
✓ Another completed item
○ In progress item
🤔 The question goes here — clear and specific
🌟 The insight or realization expressed with the visual language — grey dynamics, semantic color, and meaning.
✅ Done items listed with scores
🔧 In progress with current %
🔜 Upcoming items
1️⃣ First action — supporting detail
2️⃣ Second action — supporting detail
3️⃣ Third action — supporting detail
💡 The answer with key terms in semantic colors and supporting detail in lighter grey.
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
💾 Where the files live:
✓ Your computer — the working copy
✓ GitHub — the backup. Every push = saved safely
✓ Cloudflare — auto-publishes from GitHub → live at design.fundamental.fans
🤖 How AI uses it:
Any AI can read the actual code of the live website
It reads real CSS with real hex codes — not guessing
The more documented the system, the more consistent the output
✓ Blur foam stickers
✓ Brand terms ALL CAPS
✓ Accuracy scores updated
✓ Beauty check + context coloring
✓ Intro play button
✓ Backdrops page + nav
✓ Card stacking example
✓ Branded dot bevel
✓ Voice examples fixed
✓ Border linen overlay
✓ Shadow emoji darker
✓ Hover both sides
✓ Grey sentence examples
✓ Komika font
✓ 15-page site audit
○ Semantic color reorganize by families
○ Voice examples remaining polish
○ Backdrop images from Google Drive
✅ Branded Labels 100% · Buttons 95% · Two-Line 95% · Borders 90% · Flags 90% · Header Labels 90%
🔧 Stickers 88% · Accent Labels 88% · Comm Design 55%
🔜 Convo Card Templates · Backgrounds · Post-its · Chat Bubbles · Image Library · Full Assembly
📦 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-buddy/design-system.css — Canonical CSS (295 lines)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.
🧩 The reusable elements that make up the FUN·da·Mental visual universe — labels, buttons, borders, stickers, flags, and card templates.