🎨 Design System v1.0

Digital Playground
Character Bible

The complete style guide for Zip, Frost & Pointy — the cast anchoring every story, comic, and activity in Digital Playground.

🐒 Character Profiles

Three characters, three worlds, one learning universe. Each name has 3 options — the bold choice is recommended.

🌴 Main Character · Rainforest

Zip (the Capuchin)

🏠 Tropical Rainforest
Zip Scout Mango
Let's find out! Every branch leads somewhere new.
Personality
Curious, hands-on, always first to leap
Role in Stories
Leads expeditions, asks "why?" constantly
Flaw (keeps it real)
Jumps before looking — learns from it
Best at
Exploring, counting, finding patterns
Learning Anchors
Ecosystems Rain cycles Counting & addition Colors Plant life Biodiversity Jungle animals
Character Poses
Teaching
Exploring
Celebrating
🧊 Best Friend · Antarctica

Frost (the Penguin)

🏠 Antarctic Ice Shelf
Frost Chill Igloo
Cool it. Take it step by step and the answer always shows up.
Personality
Steady, wise, the calm to Zip's chaos
Role in Stories
Explains, measures, and keeps the plan
Flaw (keeps it real)
Overthinks — needs Zip's push to start
Best at
Measuring, comparing, science steps
Learning Anchors
States of matter Temperature Measurement Animal adaptations Geography Seasons
Character Poses
Teaching
❄ ❄
Exploring
★ ★ ✦ ✦
Celebrating
🦏 Wildcard · Grasslands

Pointy (the Rhinoceros)

🏠 African Savanna
Pointy Snout Boulder
Smells like a mystery. My nose knows — let's dig deeper.
Personality
Goofy on the outside, secretly the smartest
Role in Stories
Comic relief who always saves the day
Flaw (keeps it real)
Gets distracted — there's always one more ant
Best at
Bug science, hidden knowledge, charging
Learning Anchors
Insects & bugs Soil layers Measurement Camouflage Food chains Habitats
Character Poses
Teaching
Exploring
Celebrating

🌍 Habitat Environments

Each character's home is a rich learning world. When characters visit each other — that's a crossover arc with compare/contrast hooks built in.

🐒

🌴 Zip's Rainforest

Lush, layered, alive with sound and color. The canopy filters golden light down through ferns and flowers. Every corner hides something new to count, name, or taste.

Ecosystems Water cycles Biodiversity Food webs
❄ ❄ ❄ 🐧

🧊 Frost's Antarctica

Vast, silent, and magical. Glaciers glow teal, auroras ripple overhead, and the ocean holds icebergs the size of buildings. Everything here can be measured, compared, and marveled at.

Ice & water Temperature Geography Seasons
🦏

🌾 Pointy's Grasslands

Golden and alive with hidden life. Beneath every mound is a city of insects; above, acacia trees cast long shadows. Perfect for lessons about what's underground — and why it matters.

Insects Soil science Food chains Camouflage

🔀 Crossover Episodes — The Retention Hook

When characters visit each other's habitats, that unlocks the most powerful learning arc: compare/contrast. These are the episodes kids remember.

Episode Setup Visiting Character Learning Arc Activity Hook
Frost visits the Rainforest 🐧 → 🌴 Ice vs. water — how does water change form? Frost explains as they cross a river "Draw water as liquid, ice, and steam"
Zip visits Antarctica 🐒 → 🧊 Warm vs. cold habitats — what do animals need to survive? Compare fur/feathers/scales "Match the animal to its home climate"
Pointy visits the Rainforest 🦏 → 🌴 Tropical vs. grassland insects — same job, different home. Compare ant species "Find the differences between 2 ant colonies"
All three in the Grasslands 🐒🐧 → 🌾 Three climates compared — temperature, rain, animals, plants "Fill in the habitat comparison chart"
Zip & Pointy in Antarctica 🐒🦏 → 🧊 Extreme cold — measurement, insulation, adaptation "Measure how thick penguin blubber keeps things warm"

🎨 Color Palette

Every color has a home. Brand palette for UI + character-specific palettes for consistency.

Brand Colors

Brand Purple
#7C3AED
Coral
#F97316
Forest Green
#22C55E
Arctic Sky
#38BDF8
Savanna Gold
#FBBF24
Accent Pink
#EC4899

Zip's Rainforest Palette

Fur Dark
#8B5E3C
Fur Mid
#D4956A
Face/Belly
#F2C18D
Backpack
#2D7DD2
Deep Canopy
#064E3B
Bright Leaf
#34D399

Frost's Arctic Palette

Body Black
#1A1A2E
Belly White
#E8EEFF
Scarf Blue
#3B82F6
Beak/Feet
#F59E0B
Ice Blue
#BAE6FD
Aurora Green
#6EE7B7

Pointy's Grasslands Palette

Body Grey
#6B7280
Body Dark
#374151
Stripe White
#F3F4F6
Savanna Grass
#D97706
Savanna Earth
#B45309
Warm Sky
#FDE68A

📐 Art Style Rules

Keep the visual language tight. Consistency = trust with kids and parents alike.

✅ Do

  • Use thick, friendly outlines (3–5px) for all character linework
  • Fill shapes with flat color — no gradients on characters
  • Keep eyes large (≥⅕ of head height) with a white highlight dot
  • Give every character a clear silhouette readable at 32×32px
  • Use rounded shapes — no sharp corners on characters
  • Match the exact hex palette above for each character
  • Show emotion through eyes + body — not just mouth
  • Keep backgrounds simple so characters pop forward
  • Scale consistently: Zip ≈ Frost height, Pointy slightly bulkier/lower
  • Environments can use subtle gradients; characters should not

❌ Don't

  • Add realistic textures, shading, or photo elements
  • Use more than 3–4 colors per character in any single pose
  • Make facial expressions ambiguous — emotion must be instant
  • Add excessive accessories that change pose to pose
  • Use small/thin fonts near characters — minimum 14pt, rounded typeface
  • Put text inside the character SVG art itself
  • Mix realism with cartoon on the same character
  • Use dark or muted backgrounds behind activity content
  • Draw characters with adult proportions or scary expressions
  • Deviate from the signature items: Zip's backpack, Frost's scarf, Pointy's horn

Typography

Aa
Nunito (Primary)
Headlines, character names, CTAs
Weight: 900 (titles), 700 (body)
🎯
Emoji Support Required
Emoji used as visual icons throughout. Always test rendering on iOS + Android.
Min 16px
Minimum Body Size
Activity text must be legible for parents reading to young children. No text under 14px.

🗂️ Where Characters Appear

Every touchpoint in Digital Playground should feel like it belongs to the same world.

📰

Weekly Comic Strip

4–6 panel story each week. Episode tied to the age group's activity pack theme. Opens with a habitat scene.

📋

Activity Pages

Character appears in the relevant pose (teaching/exploring) at top of each printable. Character explains the activity.

📧

Weekly Email

Header features the week's featured character. Celebrating pose for big milestones, exploring for new topics.

🌐

Landing Page

All three characters shown together on /dp. Celebrating or exploring poses. Habitat colors in background.

🏆

Achievement Badges

Mini character heads (32–48px) on completion badges. Ensure clean silhouette at small size.

🎯

Age Group Tags

🐣 Ages 2–4 · 🚀 Ages 5–7 · ⚙️ Ages 8–10. These emoji icons are the existing system — characters supplement them.