WonderCast

Stories that solve.

Brand Guidelines

Version 1.0 — 2026

01 — Foundation

Brand Story

WonderCast turns real parenting challenges into personalized, AI-generated stories that help children understand emotions, overcome fears, and build character.

Mission

To empower every parent with the world's most powerful parenting tool: a personalized story. We believe that stories are how children learn about themselves and the world. WonderCast uses AI to create stories tailored to each child's challenges, personality, and imagination — making bedtime the most transformative moment of the day.

Vision

A world where every child has a story that understands them. Where bedtime is not a battle but a journey. Where parents feel confident that the content their children consume is safe, educational, and deeply personal.

Our Values

✨
Imagination

Stories should ignite wonder and expand what children believe is possible.

♻
Safety

Every piece of content is age-appropriate, inclusive, and carefully moderated.

⚖
Science

Grounded in child psychology, developmental research, and narrative therapy.

☼
Joy

The experience should delight both parent and child at every touchpoint.

☯
Inclusivity

Every family, every culture, every child deserves to see themselves in their stories.

Taglines

Primary

"Stories that solve."

Secondary

"Every night, a new chapter."

Aspirational

"Give them a story. Watch them become it."

03 — Color

Color Palette

A rich, warm palette anchored in brand purple with coral and gold accents. Colors are designed for accessibility and emotional warmth.

Brand Purple — Primary

50 #F5F3FF
100 #EDE9FE
200 #DDD6FE
300 #C4B5FD
400 #A78BFA
500 #7C3AED
600 #6D28D9
700 #5B21B6
800 #4C1D95
900 #2E1065

Coral — Accent

50 #FFF1F0
100 #FFE4E1
200 #FFCAC5
300 #FFA39E
400 #FF6B6B
500 #EF4444

Gold — Accent

50 #FFFBEB
100 #FEF3C7
200 #FDE68A
300 #FFD93D
400 #F9C74F
500 #F59E0B

Neutrals — Slate

Warm BG #FDFBF7
50 #F8FAFC
100 #F1F5F9
200 #E2E8F0
300 #CBD5E1
400 #94A3B8
500 #64748B
600 #475569
700 #334155
800 #1E293B
900 #0F172A

Color Usage Guidelines

Primary Purple

Buttons, links, active states, navigation highlights, brand moments. Purple-500 is the primary action color. Use 600-700 for hover/pressed states.

Coral Accent

Destructive actions, error states, alerts, and emotional emphasis. Use sparingly. Never as a primary action color — reserve for moments that need immediate attention.

Gold Accent

Premium features, success states, achievements, badges, and star ratings. Conveys warmth, magic, and delight. Excellent for rewards and celebration moments.

Accessible Contrast Ratios (WCAG AA)

Combination Ratio Normal Text Large Text
Purple-500 on White 4.63:1 AA Pass AAA Pass
Purple-700 on White 8.25:1 AAA Pass AAA Pass
White on Purple-500 4.63:1 AA Pass AAA Pass
Slate-800 on Warm BG 13.1:1 AAA Pass AAA Pass
Gold-300 on Purple-900 9.8:1 AAA Pass AAA Pass
Coral-400 on White 3.12:1 Fail AA Pass

Note: Coral-400 (#FF6B6B) does not pass AA for normal-size text on white. Use Coral-500 (#EF4444) or darker for body text. Coral-400 is acceptable for large text (18px+) and decorative/non-text elements.

04 — Type

Typography

Two complementary typefaces create a system that is simultaneously friendly and authoritative — approachable for parents, trustworthy for experts.

Display / Headlines

Outfit

A geometric sans-serif with confident letter forms and natural warmth.

Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800 · Black 900

Body / UI

Plus Jakarta Sans

A modern humanist sans-serif optimized for screen readability and long-form text.

Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800

Heading Scale

H1 Outfit / ExtraBold 800 / 48px / -0.02em / line-height: 1.1

Stories that solve.

H2 Outfit / Bold 700 / 36px / -0.02em / line-height: 1.15

Every night, a new chapter

H3 Outfit / SemiBold 600 / 28px / -0.01em / line-height: 1.2

Personalized bedtime stories

H4 Outfit / SemiBold 600 / 22px / 0 / line-height: 1.3

AI-powered storytelling for families

H5 Outfit / Medium 500 / 18px / 0 / line-height: 1.4

Building character through narrative

H6 Outfit / Medium 500 / 16px / 0.05em / line-height: 1.4 / uppercase

Section Label

Body Text

Body Large Plus Jakarta Sans / Regular 400 / 18px / line-height: 1.7

WonderCast creates personalized stories that address the real challenges your child faces — from separation anxiety to sibling rivalry, from fear of the dark to making new friends.

Body Plus Jakarta Sans / Regular 400 / 16px / line-height: 1.7

Each story is crafted using child psychology principles and narrative therapy techniques. Your child becomes the hero, learning emotional skills through adventure and imagination.

Body Small Plus Jakarta Sans / Regular 400 / 14px / line-height: 1.6

Stories are generated in real-time using advanced AI models, reviewed for safety, and personalized with your child's name, interests, and the specific challenge you want to address.

Caption Plus Jakarta Sans / Medium 500 / 12px / line-height: 1.5

All content is reviewed for age-appropriateness and safety. WonderCast never generates violent, frightening, or inappropriate content.

Accessibility: OpenDyslexic

WonderCast offers an accessibility mode that switches body text to the OpenDyslexic typeface. This is loaded on-demand when the user enables accessibility settings. Headlines remain in Outfit for brand consistency.

05 — Visual

Photography & Illustration Style

Our visual language blends cinematic warmth with storybook magic. Every image should feel like a frame from the world's most beautiful animated film.

Rendering Style

Pixar-quality 3D renders with soft volumetric lighting. Characters should feel tactile and three-dimensional, as if carved from warm clay and lit by candlelight. Slightly stylized proportions — larger eyes, softer features.

Lighting

Warm, golden-hour lighting is the default. Scenes should glow with magic. Use purple/indigo ambient light for nighttime or magical scenes. Rim lighting in gold or soft violet to separate subjects from backgrounds. Avoid harsh shadows.

Composition

Child-centric framing. Characters should occupy the visual center with generous negative space for text overlays. Environments should feel expansive and inviting. Use depth of field to guide focus to the emotional center of each scene.

Diversity & Representation

  • • Represent diverse ethnicities, family structures, and abilities
  • • Include children with glasses, hearing aids, wheelchairs naturally
  • • Show single parents, grandparents, same-sex parents, multigenerational families
  • • Avoid stereotypical cultural depictions
  • • Characters should feel universal in emotion, specific in identity

Absolute Rules

  • • NEVER scary, violent, or threatening imagery
  • • NEVER depict children in distress without resolution
  • • NEVER use stock photography for hero images
  • • ALWAYS maintain warmth, safety, and wonder
  • • ALWAYS age-appropriate for the 2-10 target range

Visual Style Examples

Photography style — warm reading nook

Warm, golden-hour lighting with magical sparkles

Illustration style — enchanted forest

Storybook illustration with cinematic depth

Diversity — inclusive family scene

Inclusive representation with diverse families

06 — Voice

Voice & Tone

WonderCast speaks like a trusted friend who also happens to be a child psychologist. Warm first, expert second. We use the language of wonder, never the jargon of technology.

Voice Principles

Warm & Encouraging

We celebrate every step of the parenting journey. Our language lifts parents up — they are doing an amazing job, and WonderCast is here to help.

Science-Backed, Never Clinical

We reference child psychology and developmental science, but translate it into language any parent can understand. No jargon, no condescension.

Magical, Not Mystical

We use wonder and magic as metaphors for the transformative power of stories. We do not make unsubstantiated claims about outcomes.

Child-Safe, Parent-Focused

Our primary audience is parents. We speak to adults making decisions for their children. When addressing children directly (in-app), we shift to simpler, more playful language.

Tone in Context

Marketing / Landing Page

"Tonight, when the lights go out and the worries creep in, your child will have a story that understands. A story where they are the hero — brave, kind, and exactly enough."

Onboarding / In-App

"Let's create your child's first story together. Tell us a little about what they're going through — we'll weave it into an adventure just for them."

Error / Empty State

"Hmm, our story wizards need a moment to regroup. This usually sorts itself out quickly — try again in a few seconds, and we'll be ready to create something magical."

Email / Notification

"Oliver's bedtime story is ready! Tonight's adventure tackles sharing with his little sister. We think he's going to love being the generous hero of this one."

Support / Help

"We're here to help! If your story didn't turn out quite right, we can regenerate it in moments. Just tap 'Create New Story' and we'll try a fresh approach."

Word Choice

We Say
  • "Story" or "adventure" (not "content" or "output")
  • "Create" or "craft" (not "generate" or "compute")
  • "Your child's story" (not "the AI-generated story")
  • "Personalized" (not "algorithmic")
  • "Bedtime magic" (not "sleep optimization")
  • "Story wizard" (not "AI model" or "engine")
We Never Say
  • "AI-generated content" in parent-facing copy
  • "Algorithm" or "machine learning" without context
  • "Users" — they are "families" or "parents"
  • "Monetize" or "convert" in external comms
  • "Disrupting" or "leveraging" (startup jargon)
  • "Guaranteed results" (we support, not prescribe)
07 — Icons

Iconography

Icons follow the Lucide design system — rounded, friendly, with consistent 1.75px stroke weight. They should feel approachable and never sharp or aggressive.

Style

Outline-only (no filled icons). Rounded line caps and joins. Consistent 1.75px stroke weight at 24px canvas. Scale stroke proportionally.

Color

Default: Slate-600 (#475569). Active/hover: Purple-600 (#6D28D9). Disabled: Slate-300 (#CBD5E1). On dark backgrounds: White or Purple-200.

Sizing

Small: 16px (inline text). Default: 20px (buttons, nav). Medium: 24px (cards, features). Large: 32px (hero sections). Always maintain optical alignment.

Core Icon Set (Lucide Style)

Book
Child
Layers
Star
Heart
Audio
Video
Image
Safety
Magic
08 — Motion

Motion & Animation

Animation in WonderCast is subtle, purposeful, and never jarring. Every motion should feel like a gentle breath — organic, calming, and magical. Children may be watching.

Fade In Up

Float

Pulse Soft

Ken Burns

Animation Specifications

Animation Duration Easing
Fade In Up 600ms ease-out
Float 3000ms ease-in-out
Pulse Soft 2000ms ease-in-out
Ken Burns 8000ms+ ease-in-out
Hover lift 200ms ease
Page transition 300ms ease-out

Motion Principles

Purposeful

Every animation must serve a purpose: guide attention, indicate state change, or provide feedback. Decorative animation is used sparingly and only to reinforce the brand's magical quality.

Gentle

No sudden movements, flashing, or rapid scaling. Children may be looking at the screen. All animations must pass WCAG 2.1 motion safety guidelines. Respect prefers-reduced-motion.

Natural

Movements should feel organic — like breathing, floating, or the gentle drift of stars. Use ease-in-out curves, never linear or mechanical timing.

09 — Applications

Digital Applications

Consistent application of the brand across all digital touchpoints ensures a cohesive experience for families.

App Screenshots

WonderCast app mockup

WonderCast mobile app — warm UI with purple brand accents

Template Specifications

Asset Dimensions Format Notes
Social — Instagram Post 1080 x 1080px PNG / JPG Safe zone: 40px inset. Logo bottom-right.
Social — Instagram Story 1080 x 1920px PNG / MP4 Top 200px reserved for platform UI.
Social — Facebook Cover 1640 x 624px PNG / JPG Center-weighted composition.
Social — Twitter/X Header 1500 x 500px PNG / JPG No text in lower-left 400x200px (avatar zone).
Email Header 600 x 200px PNG Horizontal lockup centered. Max file size 100KB.
Email Hero Image 600 x 300px PNG / JPG Alt text required. Gradient fallback background.
OG Image (link preview) 1200 x 630px PNG Brand gradient BG + logo + tagline.
App Store Screenshots 1290 x 2796px PNG iPhone 15 Pro Max. 3 required, 10 max.
10 — Patterns

Brand Patterns

Three signature patterns define the WonderCast visual identity: constellations, gradients, and glass-morphism. Use them to create depth, magic, and premium quality across all touchpoints.

Constellation star pattern

Constellation / Star Motif

Small, scattered dots in gold and purple-300 on dark backgrounds. Represents the night sky, wonder, and the W constellation from our logo. Use for hero sections, cover pages, and premium moments.

Brand Gradient

135-degree diagonal gradient from Purple-500 through Purple-700 to Purple-900. Used for hero backgrounds, buttons (subtle), and section dividers. Never apply to body text areas.

Glass Card

backdrop-filter: blur(16px)

Glass-morphism

Translucent cards with blur(12-16px), white border at 18% opacity, and subtle white fill at 6-12%. Use for overlaid cards, modals, and floating UI elements on gradient backgrounds.

Gradient Specifications

Primary Gradient

linear-gradient(135deg, #7C3AED 0%, #5B21B6 50%, #2E1065 100%)

Warm Accent Gradient

linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%)

Subtle Background

linear-gradient(135deg, #F5F3FF 0%, #FDFBF7 50%, #FFFBEB 100%)

Night Sky

linear-gradient(160deg, #2E1065 0%, #4C1D95 40%, #5B21B6 100%)
11 — Guidelines

Do's & Don'ts

Clear rules to maintain brand consistency across all teams, agencies, and touchpoints.

Logo Usage

Do
  • Use the logo on approved brand colors (purple, white, warm BG)
  • Maintain the minimum clear space on all sides
  • Use provided logo files — never recreate from scratch
  • Scale proportionally using the provided lockups
  • Use the icon-only mark when space is limited
Don't
  • Rotate, skew, or distort the logo in any way
  • Place the logo on busy photographic backgrounds without a container
  • Change the logo colors outside the approved palette
  • Add drop shadows, outlines, or effects to the logo
  • Use the logo below the minimum size specifications

Color Usage

Do
  • Use Purple-500 as the primary action and brand color
  • Pair purple with gold for premium, magical moments
  • Use warm BG (#FDFBF7) as the default page background
  • Check contrast ratios for text on colored backgrounds
  • Use the slate neutrals for body text and UI chrome
Don't
  • Use coral as a primary color — reserve for alerts and emphasis
  • Combine coral and gold together — they compete visually
  • Place light text on light backgrounds without contrast checking
  • Use pure black (#000000) — always use slate-800 or slate-900
  • Create new purple shades outside the defined scale

Typography

Do
  • Use Outfit for all headlines and display text
  • Use Plus Jakarta Sans for all body and UI text
  • Apply letter-spacing: -0.02em to Outfit headings
  • Maintain the defined type scale hierarchy (H1-H6)
  • Use appropriate font weights — never faux-bold
Don't
  • Substitute with other typefaces without approval
  • Use more than 3 font weights on a single screen
  • Set body text below 14px on any device
  • Use all-caps for body text (only for labels/tags at small sizes)
  • Stretch, compress, or artificially modify letterforms

Content & Imagery

Do
  • Show diverse families in all marketing materials
  • Use warm, golden-hour lighting in all illustrations
  • Keep all imagery age-appropriate and safe
  • Show parents and children together in joyful moments
  • Use the constellation motif for premium and magical contexts
Don't
  • Use scary, dark, or threatening imagery — ever
  • Show children alone in advertising without parent context
  • Use generic stock photography for hero or featured images
  • Include violent or conflict-heavy scenes without resolution
  • Depict unrealistic body proportions or inappropriate clothing
12 — Assets

Asset Reference

A comprehensive reference of brand assets, file locations, and technical specifications.

Logo Files

Asset S3 Path Format Usage
Primary Mark (Full Owl) website-assets/logos/logo-concept-56.png PNG Website hero, print, presentations
App Icon (C Hat) website-assets/logos/logo-concept-70-appicon.png PNG (1024x1024) App stores, favicons, social avatars

Brand Tokens (CSS Custom Properties)

:root {
  /* Brand Purple */
  --purple-500: #7C3AED;  /* Primary action color */
  --purple-600: #6D28D9;  /* Hover state */
  --purple-700: #5B21B6;  /* Pressed state */
  --purple-900: #2E1065;  /* Deep backgrounds */

  /* Accents */
  --coral-400: #FF6B6B;   /* Alerts, emphasis */
  --gold-300: #FFD93D;    /* Rewards, premium */

  /* Backgrounds */
  --bg-warm: #FDFBF7;     /* Default page BG */

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

Theme Color & Meta

<!-- theme-color for browsers and PWA -->
<meta name="theme-color" content="#7C3AED">

<!-- Apple touch icon -->
<link rel="apple-touch-icon" href="/icons/icon-192.png">

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300..900&family=Plus+Jakarta+Sans:wght@300..800&display=swap" rel="stylesheet">

Questions about the brand?

These guidelines are a living document. For questions, exceptions, or new asset requests, contact the WonderCast design team.