Acropolis Design System

Setting up and scaling a Design System across Freeletics products, from brand alignment to a shared components and assets library.

Design System Setup and Maintenance

Problem: Brand team was running a brand refresh our challenge was to align Marketing and Product in one clear vision and make the change create less friction for the user. Solution: an approach that delivered the new branding while letting us improve and change the experience at scale through a Design System implemented across all platforms —> Acropolis DS.

Design System Setup and Maintenance — Acropolis DS

Fig. 01 — Acropolis DS Problem

Fig. 02 — Acropolis DS Libraries cross platforms: Component Library, Exercise Assets Library, and Service Map.

Fig. 02 — Acropolis DS Libraries cross platforms: Component Library, Exercise Assets Library, and Service Map.

Fig. 03 — Acropolis DS Component Library

Component Library was organized on Figma and reflected in native repositories.

Fig. 04 — Exemple of a component on Figma with variations and stayling controls.

Design System Brand Design

The Acropolis DS mark comes from a piece of the company's logo that scales — bold, consistent, intuitive, memorable. Applying it in a grid became a way to show the value of consistency, inspiring the team to build creatively within the system.

Design System Brand Design — logo evolution and principle posters

Fig. 05 — Logo evolution and Design System principle posters.

Introduce Light and Dark Modes

We implemented a system that could adapt to users' preferences, increasing the feeling of personalization — built on a simplified color palette optimized to work in both light and dark mode.

Light and Dark Modes — system colours

Fig. 06 — System colours, built to work across light and dark mode.

Color System Prepared to Expand Themes

Beyond light and dark, the color system was built to support entirely new themes — including a playful “Ancient Greek mode” exploration — without touching the underlying component logic.

Fig. 07 — Light, Dark, and an exploratory “Ancient Greek mode.”

↑      Back to Top
← Back to Freeletics case