A playful children's storybook mixed with modern digital illustration.
02
Color
#EF724FAccent
#151515Ink
#FDDFE1BG
#4A4A4AMuted
rgba(0, 0, 0, 0.8)Line
Warm, pastel backgrounds with high-contrast black typography and playful, flat-colored accents.
03
Typography
slab-serif · humanist-sans
display120px · 800
body16px · 400
label12px · 500
Display type is exclusively used for massive, attention-grabbing headlines. · Body text maintains a clean, neutral sans-serif for readability. · Navigation items use a mix of capsule buttons and standard links.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous, open spacing that allows the large typography to breathe.
05
Surfaces
sm · 4px
md · 8px
lg · 48px
pill · 999px
Bold 2px solid black outlines on buttons and illustrations
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Asymmetric, playful layout with overlapping elements and scattered illustrations.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.68, -0.6, 0.32, 1.6)easing
Bouncy spring transitions for UI elements. · Subtle floating animations for background illustrations.
Color shifts and subtle scaling on buttons. · Springy, tactile feedback via custom bouncy easing.
08
Components
buttonPill-shaped with thick black borders, filled with white or accent colors.
cardImplied through the teal shape, featuring bold outlines and playful illustrations.
chipSmall pill-shaped labels used for secondary navigation.
heroMassive, left-aligned slab-serif headline on a pastel background with floating illustrations.
09
Voice & Don'ts
TonePlayful, whimsical, and highly energetic.
HeadlinesBold, offbeat, and large-scale.
CTAsClear, actionable, and presented in pill-shaped buttons.
Don't use standard system fonts — screenshot shows a bold slab-serif and humanist sans.
Don't use subtle shadows — screenshot shows flat design with thick 2px black outlines.
Don't use a white background — screenshot uses a consistent warm pastel pink background.
Don't use thin, delicate typography — screenshot features extremely bold, heavy font weights.
Don't use rigid, strictly aligned grids — screenshot shows a playful, overlapping, and asymmetrical layout.
Don't use muted, greyish colors — screenshot uses vibrant, saturated accents like orange and teal.
Captured from the live site · real computed styles
11
System prompt
This is a playful, typography-forward design system for a children's podcast platform. The core identity is built around massive, high-contrast slab-serif headlines and a warm, pastel aesthetic. The palette centers on a soft pink background (#FDDFE1) with bold black (#151515) text and vibrant orange (#EF724F) accents. Layouts are asymmetrical and energetic, featuring scattered line-art illustrations and pill-shaped buttons with thick black borders. Critical design rules: 1) Never use a white background or subtle shadows; 2) Typography must be bold and heavy, avoiding thin or corporate styles; 3) Embrace overlapping elements and asymmetrical compositions to maintain a sense of whimsy and playfulness.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
