Aphrodite

Role

Head of Design

Date

2023 – Ongoing

Responsabilities

Leadership
Design execution
Cross-team collaboration

Timeline

Ongoing

Context

When we kicked off the AskGamblers redesign it was clear that our existing design system had reached its limits. Styles were inconsistent, components were hard to maintain, and every new feature meant reinventing something that should have been reusable. It was the right time to step back and rebuild, not just the visuals, but the entire foundation connecting design and development. That is how Aphrodite was born: a system designed to bring clarity, consistency, and the ability to scale across all Gentoo Media brands.

The challenge

AskGamblers had been evolving for over a decade, built page by page, by many developers, and across three different design languages. Over time this created a patchwork of styles and inconsistent UI patterns.
Although we had previously introduced a basic UI kit and a set of shared components, the site remained labour-intensive to build and maintain. The system lacked a unified design language that could serve as a long-term foundation. Design and development teams often interpreted specs differently, leading to visual drift and rework. The legacy system had also grown monolithic and difficult to scale, making every new feature a challenge to integrate cleanly.
The redesign was our opportunity to break that cycle and rebuild a flexible, future-ready system that would bring coherence, efficiency, and longevity to the entire product ecosystem.

Approach

1.

Consistency

Every visual and behavioural decision should feel part of one ecosystem.

2.

Scalability

The system should support future brands and platforms with minimal friction.

3.

Efficiency

Designers and developers should speak the same visual language.

Foundations

Aphrodite is built on a small set of principles that shape every decision in the system. Rather than prescribing aesthetics, these principles define how components should behave, how information should be structured, and how the system should feel to use at scale.

Aestethics and clarity

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Aestethics and clarity

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Aestethics and clarity

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Gestalt thinking

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Gestalt thinking

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Gestalt thinking

Our components follow familiar visual patterns. If something feels intuitive, it’s because it builds on principles that people subconsciously recognize.

Hierarchy and cognitive Load

Typography, colour, and spacing work together to guide attention. We reduced the use of heavy weights and introduced more natural rhythm across layouts.

Hierarchy and cognitive Load

Typography, colour, and spacing work together to guide attention. We reduced the use of heavy weights and introduced more natural rhythm across layouts.

Hierarchy and cognitive Load

Typography, colour, and spacing work together to guide attention. We reduced the use of heavy weights and introduced more natural rhythm across layouts.

Consistency and adaptability

Repetition isn’t a flaw, it’s how users learn. But adaptability matters too. Components are flexible enough to evolve as needs change.

Consistency and adaptability

Repetition isn’t a flaw, it’s how users learn. But adaptability matters too. Components are flexible enough to evolve as needs change.

Consistency and adaptability

Repetition isn’t a flaw, it’s how users learn. But adaptability matters too. Components are flexible enough to evolve as needs change.

System Architecture

Primitives

The foundation of Aphrodite starts with design tokens; colour, typography, and spacing definitions structured for scalability. Each primitives page in Figma includes context, usage rules, and live examples, helping new designers onboard faster and ensuring teams stay aligned.

Colours

Expanded palette with improved contrast and accessibility.

Typography

We introduced a typography system that is both strict and flexible. It’s divided into productive styles, used for UI elements, and expressive styles, designed for larger, more dynamic use cases. Instead of relying on HTML tags, all styles are defined on a consistent scale, ensuring clarity and visual harmony across the interface.

Spacing

Defined semantic spacing tokens to create consistent vertical and horizontal rhythm across components.

Components library

The library follows the principles of atomic design. Tokens form the foundation, defining the visual language and behaviour of the system. From there, we built simple components such as avatars, badges, breadcrumbs, and buttons. These elements became the building blocks for more complex structures like cards and carousels, eventually shaping entire pages.

We also introduced boolean and variant logic to reduce complexity. Instead of dozens of near-duplicate components, designers can now toggle states or styles directly within a single component, simplifying maintenance and ensuring consistency.

Good practices

Design for one screen, instance for others: We adopted a responsive-first approach where a single master component adapts seamlessly to all breakpoints.

Tokens before visuals: Every visual choice links to a token, ensuring scalability across multiple brands and themes.

Atomic design thinking: Components build from atoms upward, making it easier to modify one level without breaking the rest.

Impact

This is an abridged version of the case study. The full version, including detailed token documentation, component library structure, and file organisation, is available on request.

Used by 5 teams

Used by 5 teams

Used by 5 teams

93,950 inserts in past year

93,950 inserts in past year

93,950 inserts in past year

122 components

122 components

122 components

320 inserts weekly

320 inserts weekly

320 inserts weekly

278 variables

278 variables

278 variables