Style Family: playful

Signature: Rounded, saturated, bouncy motion, illustrative, friendly. Reference products: Duolingo, MailChimp, Slack early, Notion early, Headspace. Best for: education, consumer apps with onboarding, kids products, gamification, habit/lifestyle apps.

Token defaults

Color

Primary: saturated and friendly — coral, teal, sunny yellow, grass green. Avoid muted enterprise blues.
Palette: 2–3 accent colors are encouraged (the "single primary" rule from other families is relaxed).
Background: warm off-white or soft tinted background; pure white feels sterile here.
Avoid in this family: cool grays, navy/charcoal, monochrome palettes.

Typography

Heading: friendly humanist sans or rounded sans — Nunito, Quicksand, Poppins, Fraunces (soft serif), Inter Display (rounded variant).
Body: rounded humanist sans — Nunito, DM Sans, Manrope, Open Sans (yes, even this one).
Weight: medium-to-bold for headings (600+). Light weights look fragile.

Radius

Generous: 12 / 16 / 24 px. Pills and full-rounded buttons are common and correct here.

Spacing

4px base, scale 4 / 8 / 16 / 24 / 32 / 48.
Density: balanced. Generous touch targets (mobile-friendly).

Shadow

Soft and tinted: shadows often inherit a hint of the surface or primary color, not pure black.
Multiple elevation tiers welcome.

Motion

Bounce is encouraged. Spring physics, elastic easing, micro-celebrations on success.
Lottie illustrations are in family.
Empty states and 404 pages are opportunities for character, not minimalism.

Anti-patterns within this family

Sharp corners (0–4px) on primary surfaces.
Pure black or pure gray text on white. Use a slightly warm dark color.
Geometric sans like Geist or Inter as body — too cold.
Flat illustrations with no character.
Skipping the empty state — playful family thrives on personality in edge cases.
Rigid grid alignment with no asymmetry.

Typical surfaces

This family does well on:

Onboarding flows
Consumer mobile apps
Education products
Streak / progress / gamification surfaces
Marketing for B2C

This family does poorly on:

B2B dashboards used 8 hours a day (the personality wears)
High-stakes interfaces (medical, financial trades)
Enterprise procurement processes
Long-form reading (rounded body fonts fatigue)

Notes

There's a cliff between "friendly" and "infantilizing". For adult-targeted products in serious domains (finance, healthcare), playful is usually the wrong family — but warm-content may give the same warmth without the gamification feel.

2.6 KiB Raw Blame History Unescape Escape