Design System Inspiration of The Pinkfong Company
1. Visual Theme & Atmosphere
The Pinkfong Company (더핑크퐁컴퍼니) is the Seoul-based kids-entertainment studio behind Pinkfong, Baby Shark, and Bebefinn — and its digital surfaces read exactly as you'd hope a global children's-IP house would: bright, friendly, and confidently playful, but built on a calm, modern product chassis rather than chaotic cartoon clutter. The consumer site (pinkfong.com) opens on a clean white canvas (#ffffff) with deep ink text (#191f28) and a single signature accent — a warm bubblegum pink (#ff66af) — that ties the whole franchise together. This pink is the connective tissue: it appears as the recruit CTA on the corporate site, as the "종료까지 D-198" D-day badges on the consumer site, and as oversized watermark display type. One color, applied with discipline, reads as "this is Pinkfong."
What gives the system its energy is the per-IP character palette. Each franchise gets its own vivid, high-saturation color world rendered in full-bleed panels: Baby Shark lives in sky #75ddff over deep ocean blue #003c7d; Bebefinn in coral #ff4b78 over buttery cream #fff1aa; the dino series in warm gold #f0bd64; and newer IPs in electric purple #a262f3 and mint #9deff8. These are not pastel — they are saturated, joyful, almost candy-bright, exactly calibrated for a preschool audience and the parents browsing alongside them. The character panels are the loudest moments; the surrounding chrome stays quiet so the IP color can sing.
The geometry is soft and rounded everywhere — the brand never shows a sharp corner on an interactive element. Header utility chips and content CTAs are full pills (999px radius); the corporate recruit button is a 32px pill; nav menu buttons round at 12px; feature blocks at 24px. Depth is almost entirely flat: live inspection found box-shadow: none across the nav, character cards, and pill CTAs — separation comes from the soft-pink (#ffe0ef) and cool-grey (#f0f2f5) tinted surfaces plus a single hairline (#e5e8eb). The one shadow in the system is a faint pink-tinted lift (rgba(255,5,88,0.06)) under the corporate CTA — even the elevation is on-brand pink. The consumer face runs on Pretendard, the de-facto Korean product font, while the corporate site uses Spoqa Han Sans Neo; both are clean, friendly hangul sans-serifs that keep the tone approachable rather than cute-to-a-fault.
Key Characteristics:
- Signature bubblegum pink (
#ff66af) as the single cross-surface brand accent — CTA, badge, watermark
- Per-IP vivid character palette (sky
#75ddff, coral #ff4b78, gold #f0bd64, purple #a262f3, cream #fff1aa, mint #9deff8) — high-saturation, child-friendly
- Deep ink text (
#191f28) on white (#ffffff) — readable, warm, never harsh black for body
- Pill-everything geometry — 999px chips/CTAs, 32px corporate button, 12px nav, 24px feature blocks
- Near-flat depth —
box-shadow: none everywhere except a faint pink-tinted (rgba(255,5,88,0.06)) corporate CTA lift
- Pretendard (consumer/product) + Spoqa Han Sans Neo (corporate) — friendly hangul sans-serifs
- Tinted surfaces (
#ffe0ef, #f0f2f5) + single hairline (#e5e8eb) carry all separation
- Cool-grey neutral ladder (
#4e5968 → #8b95a1 → #b0b8c1) for text hierarchy
2. Color Palette & Roles
Primary
- Pinkfong Pink (
#ff66af): The signature brand color. Appears as the corporate recruit CTA background, consumer D-day badge background, and the eyebrow/watermark accent — the system's single "this is Pinkfong" color.
- Soft Pink (
#ffe0ef): Tinted pink surface for feature section blocks. A gentle, low-saturation companion to the primary that warms a section without shouting.
- Coral (
#ff4b78): A hotter pink-red used in character panels (Bebefinn) and energetic accents — the saturated sibling of the brand pink.
Neutral & Surface
- Pure White (
#ffffff): Page background, card surfaces, text on pink/character panels.
- Surface Grey (
#f0f2f5): Cool-grey tinted surface for alternating sections (corporate site).
- Hairline (
#e5e8eb): The single border/divider color across the system — pill outlines, dividers, card edges.
Text Hierarchy
- Ink (
#191f28): Primary text, headings, active nav, strong labels — a near-black navy that carries warmth over pure black.
- Body Slate (
#4e5968): Secondary body copy, default nav labels, and pill CTA text.
- Muted Slate (
#8b95a1): Tertiary text, captions, metadata.
- Faint Blue-Grey (
#b0b8c1): Disabled text, placeholders, lowest-emphasis labels.
Character IP Palette (high-saturation, per-franchise)
- Sky (
#75ddff): Baby Shark sky/water world.
- Ocean Blue (
#003c7d): Baby Shark deep-blue panel background.
- Cream (
#fff1aa): Bebefinn warm-cream backdrop.
- Gold (
#f0bd64): Dino-series warm gold panel.
- Mint (
#9deff8): Newer-IP fresh mint accent.
- Purple (
#a262f3): Electric purple character panel (키키팝팝).
Utility
- Link Blue (
#1677ff): Default anchor color on bare links (corporate site, Ant Design base) — not a brand accent, used only for raw text links.
- On-Primary (
#ffffff): Text/iconography on pink and character backgrounds.
3. Typography Rules
Font Family
- Consumer / Product:
Pretendard (with Pretendard Fallback) — the document default on pinkfong.com. Used for hero headlines, nav, buttons, and body at weights 400/500/600/700.
- Corporate:
Spoqa Han Sans Neo — the document default on thepinkfongcompany.com. A clean, slightly geometric Korean sans used for corporate chrome and the recruit CTA.
Hierarchy
| Role | Font | Size | Weight | Line Height | Notes |
|---|
| Display Hero | Pretendard | 64px (4.00rem) | 700 | 1.2 | Consumer hero headline |
| Eyebrow Label | Pretendard | 20px (1.25rem) | 700 | normal | Section eyebrow, often pink #ff66af ("MEET & PLAY") |
| Nav Menu | Pretendard | 16px (1.00rem) | 600 | 1.5 | Top nav buttons (CHARACTERS / WATCH / STORE) |
| Button / CTA | Pretendard | 16px (1.00rem) | 600 | 1.5 | Pill CTA label (캐릭터 소개 보기 / 더보기) |
| Body | Pretendard | 16px (1.00rem) | 400 | 1.5 | Standard reading text |
| Badge | Pretendard | 14px (0.88rem) | 500 | normal | D-day / status badge (종료까지 D-198) |
| Caption / Chip | Pretendard | 14px (0.88rem) | 600 | normal | Header utility chip (한국어 / 로그인) |
| Corporate CTA | Spoqa Han Sans Neo | 24px (1.50rem) | 400 | normal | Recruit pill button on corporate site |
Principles
- Friendly, not cute: Pretendard and Spoqa Han Sans Neo are clean, modern hangul sans-serifs — the warmth comes from color and roundness, not from a novelty typeface.
- Weight for hierarchy: 700 anchors hero/eyebrow, 600 carries nav and CTAs, 400 carries body. The contrast in weight (not size alone) signals importance.
- Display can go big and playful: oversized watermark display (120px
NEW / CONTENTS in translucent pink) treats type as decoration — a playful, editorial flourish unique to the IP brand.
- Two faces, two contexts: Pretendard is the consumer/product voice; Spoqa Han Sans Neo is the corporate voice. They never swap surfaces.
4. Component Stylings
Buttons
Recruit CTA (Corporate Primary)
- Background:
#ff66af
- Text:
#ffffff
- Radius: 32px
- Padding: 32px 15px
- Font: 24px / 400 / Spoqa Han Sans Neo
- Height: 64px
- Shadow:
rgba(255,5,88,0.06) 0px 2px 0px 0px
- Use: Corporate recruit call-to-action ("인재영입 페이지 바로가기") — the signature pink pill
Pill Outline (Consumer CTA)
- Background:
#ffffff
- Text:
#4e5968
- Radius: 999px
- Padding: 0px 24px
- Border: 1px solid
#e5e8eb
- Font: 16px / 600 / Pretendard
- Height: 56px
- Use: Consumer content CTA ("캐릭터 소개 보기", "더보기") — outline pill on white
Header Utility Chip
- Background:
#ffffff
- Text:
#4e5968
- Radius: 999px
- Padding: 0px 12px
- Border: 1px solid
#e5e8eb
- Font: 14px / 600 / Pretendard
- Height: 40px
- Use: Header utility chips ("한국어", "로그인")
Inputs & Forms
- Background:
#ffffff
- Border: 1px solid
#e5e8eb
- Radius: 999px (chip/search) or 12px (field)
- Text:
#191f28
- Placeholder:
#b0b8c1
- Use: Search / login fields — pill or soft-rounded, hairline border, no shadow
Cards & Containers
Soft-Pink Feature Block
- Background:
#ffe0ef
- Radius: 24px
- Padding: 96px 0px
- Use: Soft-pink feature section block (flat, no shadow)
Character Panel
- Background:
#75ddff (swaps per IP: #003c7d, #ff4b78, #f0bd64, #a262f3, #fff1aa)
- Text:
#191f28
- Padding: 48px
- Use: Full-bleed vivid per-character IP panel — the brand's loudest color moment
Badges
D-day / Status Badge
- Background:
#ff66af
- Text:
#ffffff
- Radius: 999px
- Padding: 0px 12px
- Font: 14px / 500 / Pretendard
- Height: 28px
- Use: Event/D-day status pill ("종료까지 D-198")
Navigation
- Background:
#ffffff
- Text:
#4e5968
- Radius: 12px (per-item button)
- Padding: 8px
- Font: 16px / 600 / Pretendard
- Active:
#191f28 ink text
- Use: Top horizontal nav (CHARACTERS / BUSINESS / MEET & PLAY / WATCH / STORE / NEWS)
Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, two brand-owned surfaces)
Tier 1 sources: https://www.thepinkfongcompany.com (corporate — recruit CTA, family-site pill, brand chrome); https://www.pinkfong.com/ko (consumer — character IP panels, content carousel, D-day badges, pill CTAs)
Tier 2 sources: getdesign.md/pinkfong — 0 DESIGN.md files (not covered); styles.refero.design/?q=pinkfong — no pinkfong entry (returns unrelated trending cards, first result "Agence Foudre" verified ≠ Pinkfong)
Conflicts unresolved: none (Tier 2 has no coverage for this KR entertainment-IP brand; Tier 1 two brand-owned surfaces carry the proof)
5. Layout Principles
Spacing System
- Base unit: 8px
- Scale: 4px, 8px, 12px, 16px, 24px, 48px, 96px
- Notable: Feature blocks use generous 96px vertical padding for an airy, breathable kids-content rhythm; character panels use 48px internal padding
Grid & Container
- Centered single-column hero with a 64px Pretendard headline as the anchor
- Character IP panels presented as full-bleed split panels (504×378 / 396×378 measured) — vivid color background + character art + tag copy
- Content carousels (NEW / CONTENTS sections) with oversized translucent-pink watermark display type behind cards
- Feature sections alternate between white (
#ffffff) and tinted blocks (soft-pink #ffe0ef / cool-grey #f0f2f5)
Whitespace Philosophy
- Breathing room over density: despite a content-rich franchise catalog, sections are airy with generous vertical rhythm (96px block padding)
- Flat segmentation: sections separate by background tint (
#ffe0ef, #f0f2f5) and the single hairline (#e5e8eb), not by shadow
- Color as the loud layer, layout as the calm layer: vivid IP panels provide the energy; the surrounding grid stays quiet and orderly
Border Radius Scale
- Small (12px): nav buttons, soft-rounded fields
- Medium (24px): feature section blocks, content cards
- Large (32px): corporate recruit CTA
- Full (999px): header chips, consumer pill CTAs, D-day badges
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat (Level 0) | No shadow | Page background, nav, character panels, pill CTAs, section cards |
| Tint (Level 1) | #ffe0ef / #f0f2f5 background shift | Section/card separation without elevation |
| Hairline (Level 2) | 1px solid #e5e8eb border | Pill outlines, dividers, card edges |
| Pink Lift (Level 3) | rgba(255,5,88,0.06) 0px 2px 0px 0px | The single shadow — faint pink-tinted lift under the corporate recruit CTA |
Shadow Philosophy: Pinkfong is a near-flat system. Live inspection found box-shadow: none across the consumer nav, character panels, pill CTAs, and feature blocks. Depth and grouping are communicated entirely through tinted surfaces (#ffe0ef, #f0f2f5) and the single hairline (#e5e8eb). The one exception is a faint pink-tinted lift (rgba(255,5,88,0.06)) under the corporate recruit CTA — even the rare shadow stays on-brand. When emphasis is needed the system reaches for the signature pink (#ff66af) or a vivid character color, never for elevation. This keeps the UI feeling modern, fast, and friendly rather than heavy.
7. Do's and Don'ts
Do
- Use the signature pink (
#ff66af) as the single brand accent — CTA, D-day badge, eyebrow label
- Give each character IP its own vivid, high-saturation panel color (sky
#75ddff, coral #ff4b78, gold #f0bd64, purple #a262f3)
- Use ink (
#191f28) for text and headings instead of pure black
- Keep geometry rounded — 999px pills, 32px / 24px / 12px radii, never a sharp interactive corner
- Separate sections with tinted surfaces (
#ffe0ef, #f0f2f5) and the #e5e8eb hairline, not shadows
- Set hero headlines in Pretendard 700 at large sizes for a friendly, confident voice
- Let the character panels be the loud color moment; keep surrounding chrome calm
- Reserve oversized translucent-pink watermark display type for playful editorial accents
Don't
- Spread the signature pink across many elements — it dilutes the single-action signal
- Use drop shadows for elevation — Pinkfong is a near-flat system (only the faint pink CTA lift exists)
- Use pure black (
#000000) for body text — use ink navy #191f28
- Use sharp or square corners on buttons, chips, or badges — everything rounds
- Dull the character palette into pastels — the IP colors are deliberately saturated and joyful
- Use the default link blue (
#1677ff) as a brand accent — it is a bare-link fallback, not brand
- Set headlines in a light weight — display is bold (700)
- Crowd the layout — keep generous vertical rhythm so the bright colors have room to breathe
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|
| Mobile | <640px | Single column, hero headline compresses, character panels stack, nav collapses |
| Tablet | 640-1024px | 2-up character/content cards, moderate padding |
| Desktop | 1024-1440px | Full layout, centered hero, full-bleed split character panels |
Touch Targets
- Consumer pill CTAs at 56px height with 24px horizontal padding — comfortably tappable
- Header chips at 40px height, full pill
- D-day badges at 28px (informational, not interactive)
- Nav buttons at 38px with rounded 12px hit area
Collapsing Strategy
- Hero: 64px Pretendard headline scales down on mobile, weight 700 maintained
- Character IP panels: split panels stack to single-column on narrow viewports
- Content carousels: horizontal scroll on mobile; watermark display type shrinks
- Tinted/white alternating sections maintain full-width treatment
Image Behavior
- Character art and content thumbnails carry no shadow at any size, consistent with the flat system
- Cards maintain 24px radius across breakpoints
- Vivid panel backgrounds remain full-bleed across sizes
9. Agent Prompt Guide
Quick Color Reference
- Primary accent / CTA: Pinkfong Pink (
#ff66af)
- Soft pink surface: (
#ffe0ef)
- Background: Pure White (
#ffffff)
- Tinted surface: Surface Grey (
#f0f2f5)
- Heading / ink text: (
#191f28)
- Body / nav text: Body Slate (
#4e5968)
- Muted text: (
#8b95a1)
- Faint / disabled: (
#b0b8c1)
- Hairline: (
#e5e8eb)
- Character palette: sky
#75ddff, ocean #003c7d, coral #ff4b78, cream #fff1aa, gold #f0bd64, mint #9deff8, purple #a262f3
Example Component Prompts
- "Create a kids-IP hero on white background. Headline at 64px Pretendard weight 700, color #191f28. Below it an outline pill CTA: #ffffff background, 1px solid #e5e8eb border, #4e5968 text, 999px radius, 0 24px padding, 16px Pretendard weight 600 — '캐릭터 소개 보기'."
- "Design a full-bleed character panel: #75ddff sky background (swap to #ff4b78 coral or #a262f3 purple per character), #191f28 text, 48px padding, no shadow. Include a pink D-day badge: #ff66af background, white text, 999px radius, 0 12px padding, 14px weight 500."
- "Build a soft-pink feature block: #ffe0ef background, 24px radius, 96px vertical padding, no shadow. Eyebrow label 20px Pretendard weight 700 in #ff66af, then body 16px weight 400 in #4e5968."
- "Create a corporate recruit CTA: #ff66af background, white text, 32px radius, 32px 15px padding, 24px Spoqa Han Sans Neo. Add a faint pink lift shadow rgba(255,5,88,0.06) 0px 2px 0px 0px."
Iteration Guide
- Pink (
#ff66af) is the single brand accent — don't spread it
- Each character IP gets its own saturated panel color — keep them vivid, not pastel
- No shadows — separate with
#ffe0ef / #f0f2f5 tint and the #e5e8eb hairline
- Pill geometry throughout — 999px chips/CTAs, 32px corporate, 24px blocks, 12px nav
- Text color is
#191f28 ink, never pure black for body
- Pretendard for consumer/product surfaces; Spoqa Han Sans Neo for corporate
- Headlines are bold (700); body is 400 — weight carries hierarchy
10. Voice & Tone
The Pinkfong Company's voice is warm, joyful, and family-inclusive — playful enough to delight a preschooler yet clear and trustworthy enough to reassure the parent browsing alongside. The consumer hero line "전 세계가 사랑하는 온 가족이 함께 즐기는 패밀리 IP" ("A family IP loved worldwide, enjoyed by the whole family") sets the register: globally proud, family-framed, inclusive — it sells togetherness, not just cartoons. Copy speaks to "온 가족" (the whole family) and frames content as something to share. Functional labels (CHARACTERS, WATCH, STORE, MEET & PLAY) stay short and bright; the warmth lives in the color and roundness, not in baby-talk.
| Context | Tone |
|---|
| Hero headlines | Globally proud, family-framed. "전 세계가 사랑하는 온 가족이 함께 즐기는 패밀리 IP." Warm, inclusive. |
| Nav labels | Short, bright, English-forward. "CHARACTERS", "WATCH", "STORE", "MEET & PLAY". |
| CTAs | Direct, low-pressure, inviting. "캐릭터 소개 보기", "더보기". |
| Character tags | Playful hashtag-style descriptors. "#무한긍정 #모험심 #호기심" (aging shark), "#애교부자 #호기심 #성장 #패밀리" (Bebefinn). |
| News / D-day | Concrete, time-bound, celebratory. "종료까지 D-198", global partnership announcements. |
| Corporate | Confident, mission-led, recruiting-forward. "인재영입 페이지 바로가기". |
Voice samples (verbatim from live surfaces):
- "전 세계가 사랑하는 온 가족이 함께 즐기는 패밀리 IP" — consumer hero H2 (global + family framing). (verified live 2026-06-17)
- "#무한긍정#모험심#호기심" — Baby Shark character tags (playful, positive). (verified live 2026-06-17)
- "종료까지 D-198" — event D-day badge (time-bound, celebratory). (verified live 2026-06-17)
Forbidden register: condescending baby-talk, fear/pressure marketing aimed at parents, dense jargon, exclamation-heavy hype that undercuts the calm-confident chassis.
11. Brand Narrative
The Pinkfong Company (더핑크퐁컴퍼니, formerly SmartStudy) is a Seoul-based family-entertainment company best known for Pinkfong and the global phenomenon "Baby Shark" — the most-viewed video in YouTube history. Founded in 2010, the company built its identity around educational, sing-along content for young children, then turned a single catchy song into a worldwide multimedia franchise spanning video, music, apps, live shows, licensing, and merchandise.
The brand's positioning, stated plainly on its consumer site, is a "전 세계가 사랑하는 패밀리 IP" — a family IP loved around the world. That framing matters: Pinkfong is not marketed as a children's-only product but as shared family entertainment, content that parents and kids enjoy together. The company has expanded the original Pinkfong/Baby Shark universe into a portfolio of distinct character IPs — Bebefinn (베베핀), the Dino series (다이노링스), and newer properties — each given its own vivid color world and personality.
What the design refuses, visible in its system: the chaotic, over-decorated clutter of much children's media (no rainbow-vomit gradients, no clashing comic chrome), and the cold institutionalism of corporate entertainment. What it embraces: one disciplined signature pink that means "Pinkfong," a calm modern product chassis (clean Pretendard type, flat surfaces, generous whitespace), and per-character saturated color as the place where joy is allowed to be loud. The result is a system that scales across a growing IP portfolio while staying unmistakably, friendly-confidently Pinkfong.
12. Principles
- One pink, many worlds. The signature pink (
#ff66af) is the constant that ties the franchise together; each character IP gets its own vivid palette. UI implication: reserve #ff66af for the brand-level accent (CTA, badge, eyebrow) and let character panels own the saturated color.
- Joy is loud, chrome is calm. Energy belongs to the IP color; structure stays quiet. UI implication: vivid full-bleed character panels against clean white chrome with generous whitespace — never both loud at once.
- Family-inclusive, never condescending. Content is for "온 가족," not just kids. UI implication: clean, readable type and grown-up product patterns; warmth comes from color and roundness, not baby-talk.
- Soft geometry everywhere. No sharp corner on an interactive element. UI implication: pills (999px), rounded blocks (24px), rounded nav (12px) — roundness signals friendliness.
- Flat and fast. Modern product clarity beats decorative depth. UI implication: no shadows; separate with tint (
#ffe0ef, #f0f2f5) and the #e5e8eb hairline; keep the page light and quick to scan.
13. Personas
Personas below are fictional archetypes informed by publicly observable Pinkfong audiences (parents of preschoolers, the children themselves, and IP/licensing partners), not individual people.
김서연, 34, 서울. Mother of a 3-year-old who watches Baby Shark daily. Browses the Pinkfong site to find new content and merchandise. Trusts the brand because it feels safe, friendly, and consistent — the same pink and the same calm layout everywhere reassures her it's a real, careful company.
Ethan, 5, London. Knows Pinkfong by its colors and characters, not its words. The vivid per-character panels (sky-blue shark, coral Bebefinn) are how he navigates — he points at the color world he wants before he can read the label.
박지훈, 41, 경기. A licensing/partnerships manager evaluating Pinkfong for a co-branded product. Reads the corporate site (thepinkfongcompany.com) for credibility. Values that the brand presents as a modern, global IP house — confident pink chrome, clear recruit and business surfaces — rather than a one-hit cartoon.
14. States
| State | Treatment |
|---|
| Empty (no content results) | White canvas. Single ink (#191f28) line at body size explaining nothing matches, with one outline pill CTA to browse all. Friendly, uncluttered. |
| Empty (saved/favorites, none yet) | Muted Slate (#8b95a1) single line inviting the user to explore characters; a character-color illustration may anchor it. Warm, never scolding. |
| Loading (content fetch) | Skeleton cards at final dimensions, 24px radius, on #f0f2f5 tint. Flat pulse — no shadow shimmer, consistent with the flat system. |
| Loading (carousel) | Inline placeholder cards keep the row's rhythm; previous content stays visible during refresh. |
| Error (fetch failed) | Inline message in ink (#191f28) with a plain, friendly explanation and a retry pill. No bare "오류가 발생했습니다" — say what to do next. |
| Error (form validation) | Field-level message below the input in a warm tone; describes what's valid, not just "필수". |
| Success (action complete) | Brief inline confirmation in calm tone; a pink (#ff66af) accent or check marks the moment. Celebratory but not noisy. |
| Skeleton | #f0f2f5 blocks at final dimensions, 24px radius, flat pulse. |
| Disabled | Faint Blue-Grey (#b0b8c1) text on reduced-opacity surface; pink actions fade rather than turn grey to preserve brand read. |
15. Motion & Easing
Durations:
| Token | Value | Use |
|---|
motion-fast | 120ms | Hover, chip press, focus |
motion-standard | 240ms | Card/panel reveal, carousel slide, sheet |
motion-playful | 360ms | Character panel entrance, hero reveal |
Easings:
| Token | Curve | Use |
|---|
ease-enter | cubic-bezier(0.2, 0.7, 0.3, 1) | Arriving — cards, panels, carousels (gentle overshoot-free settle) |
ease-exit | cubic-bezier(0.4, 0.0, 1, 1) | Dismissals |
ease-playful | cubic-bezier(0.34, 1.3, 0.6, 1) | Reserved character-panel pops — a touch of bounce where joy is allowed |
Motion rules: Motion is friendly and light — consistent with the bright, flat aesthetic. Pill CTAs and chips respond to press with a subtle scale/opacity shift; content cards and character panels fade-and-rise in at motion-standard / ease-enter. A small, controlled bounce (ease-playful) is permitted only on character-panel entrances — the one place the brand lets motion be as joyful as the color. Chrome (nav, CTAs) stays steady and overshoot-free so the product feels trustworthy to parents. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the playful bounce is removed; the product stays fully functional.
