VISUAL DESIGN & DESIGN SYSTEM
2024 - 2025
CONCEPT
As Toddle grew across regions and formats, the visual design team needed a system that could scale without limiting creativity. This design system was created to bring consistency and structure to brand design — removing repetitive decisions, enabling faster execution, and giving designers more space to focus on creative thinking.
Since I work independently, some mockups are generated using AI and may contain minor inconsistencies. All ideas, concepts and creative direction are mine; AI is used solely as a visualization tool.
GRIDS
The grid system was designed to work across a wide range of formats — from posters, social media posts, and GDN ads to videos, presentations, digital learning resources (A3, A4, A5), and responsive websites.
We defined a fixed column structure based on an 8px base unit that allowed our system to scale in harmony. For web requirements, clear breakpoints were established for key screen sizes (1440, 1280, 768, and 360px) to ensure our user experience remained the same across devices.
This approach removed guesswork around layout decisions and gave designers and developers a reliable structure that supported both speed and creative freedom.
TYPOGRAPHY
The typography system was designed to be responsive and accessible from large screens to mobile. We took a hybrid approach — assigning fluid properties to text styles that could potentially break layouts, such as display text, allowing them to scale smoothly across breakpoints. Smaller text styles, like body copy, were kept fixed to maintain strong readability.
The type ramp, styling, and formatting rules were built in Figma using variables and tokens. We introduced a dynamic leading system with compact and relaxed modes that adapt to text length, and defined Toddle’s font stack across websites, presentations, and emails to ensure a consistent experience across all touchpoints.
COLOR
Color required a careful approach. While Toddle already had an extensive palette, it lacked harmony and accessibility — some color combinations failed contrast standards, brightness levels were inconsistent within the same scale, and usage guidelines were missing. This made it difficult to achieve consistency across different applications.
We thoroughly evaluated the existing palette and made subtle refinements to improve contrast, harmony, and accessibility while preserving the brand’s original character. The updated system aligns with WCAG and APCA standards, resulting in a more cohesive and accessible color foundation across the entire design ecosystem.
CONCLUSION
This system gave designers a strong, shared foundation by removing repetitive decisions and freeing up time for creative thinking. With a single source of truth in place, onboarding new designers became significantly faster, quality checks more streamlined, and collaboration between design and development much smoother. In many cases, execution timelines were reduced from 4–5 days to just 1–2 days without compromising quality.
All of this was supported by clear internal documentation, complete with examples and best practices, giving both designers and developers a reliable reference to ensure consistency, efficiency, and long-term scalability.
