playtopia screenshot
playtopia screenshot

Playtopia

Developed a vibrant, playful visual style guide for Playtopia, an early education brand. The guide covers logo usage, color palette, typography, imagery, animations, microinteractions, and iconography balancing child-friendly appeal with trust and clarity for parents and grandparents.

Service

Visual design, Style Guide

Sector

Technology

Year

2023

Gridum Aurorium Screenshot
Gridum Aurorium Screenshot

Playtopia is an early education business focused on gymnastics and parkour for children.


Brand Mission:
Playtopia inspires confidence, movement, and joy in young children through engaging gymnastics and parkour classes. Our brand bridges the playful energy of childhood with the trust and reassurance sought by parents and grandparents.


User Goals:

  • Children: Feel excited, safe, and eager to participate.

  • Parents/Grandparents: Trust the environment, feel informed, and see Playtopia as a reliable, nurturing partner in their child’s development.



Gridum Aurorium Screenshot
Gridum Aurorium Screenshot

2. Logo Usage


Logo Variations:

  • Primary Logo: Wordmark with elephant mascot.

  • Secondary Logo: Horizontal version for narrow spaces.


Usage Rules:

  • The mascot’s colors must never be altered.

  • The wordmark is only to be used on a white background.

  • Maintain a clear exclusion zone (minimum height of the mascot’s ear) around all logo variations.

  • Minimum logo size: 32px height for digital, 15mm for print.




3. Color Palette


Primary Colors:

  • Deep Blue: #284459 (Trust, stability)

  • Teal Green: #548642 (Growth, energy)

  • Golden Yellow: #F29F05 (Happiness, playfulness)

  • White Smoke: #F6F6F6 (Clean, approachable)


Secondary Colors:

  • Light Beige: #F2E8DF (Warmth, approachability)

  • Coral Red: #F28F79 (Excitement, action)


Usage Guidelines:

  • Primary colors dominate backgrounds, CTAs, and key UI elements.

  • Secondary colors accentuate, highlight, or provide visual breaks.

  • Maintain high contrast for accessibility.


Gridum Aurorium Screenshot
Gridum Aurorium Screenshot
Gridum Aurorium Screenshot
Gridum Aurorium Screenshot

4. Typography


Primary Typeface:

  • Dongtao

    • Bold: Headlines, titles, quotes, CTAs

    • Regular: Navigation, secondary emphasis


Secondary Typeface:

  • Glacial Indifference

    • Bold: Subheadings, section titles

    • Regular: Body text, labels, captions


Hierarchy & Usage:

  • Headlines (Dongtao Bold, 32-48px web, 24-36pt print)

  • Subheadings (Glacial Indifference Bold, 24-32px)

  • Body (Glacial Indifference Regular, 16-20px)

  • Mobile: Minimum 16px for body text for legibility

5. Imagery


Style:

  • Bright, vibrant photos and illustrations.

  • Children in motion, smiling, exploring, and learning.

  • Settings that are safe, clean, and welcoming.

  • Imagery must instill a sense of trust and excitement.

Usage:

  • Prefer candid, natural shots over posed.

  • Avoid cluttered backgrounds or ambiguous environments.

  • Use images that reflect diversity and inclusivity.


6. Animations & Microinteractions



Animation Principles:

  • Simple, fluid transitions (e.g., fade-ins, gentle slides).

  • Duration: 3-4 seconds max.

  • Use color transformation (e.g., button color change) to indicate progress or status.

  • Avoid jarring or excessive movement.


Microinteraction Examples:

  • Password Validation: Subtle checkmark or error color.

  • Calendar Interaction: Soft highlight on selected dates.

  • Button Press: Gentle scale or color shift for feedback.


Guidelines:

  • Animations should enhance usability, not distract.

  • Prioritize clarity and accessibility.


7. Iconography


Style:

  • Playful, rounded icons with a hand-drawn feel.

  • Easily recognizable and intuitive for both children and adults.

  • Consistent stroke width and color palette.


Usage:

  • Use icons for navigation, actions, and feedback.

  • Maintain sufficient spacing and legibility at small sizes.

  • Avoid overly detailed or abstract symbols.


8. Conclusion

Core Design Principles:

  • Playful yet Trustworthy: Balance vibrant, energetic visuals with cues of safety and dependability.

  • Clarity: Every element is designed for ease of use and understanding by both children and adults.

  • Consistency: Uniform application of color, type, and iconography across all platforms.

  • Accessibility: High contrast, legible fonts, and clear icons ensure inclusivity.


The Playtopia visual style guide translates the brand’s mission into a cohesive, inviting, and accessible design language. By prioritizing both playfulness and trust, the guide ensures that every touchpoint resonates with children and reassures caregivers—building a joyful, reliable brand experience.