London

·

Design systems

·

2024

Fern

A token-based design system that let a wellness startup ship three apps from one source.

Deliverables

Design tokens

Design tokens

Component library

Component library

Documentation

Documentation

Figma kit

Figma kit

Timeline

16 weeks

16 weeks

Fern design system mark on a light background

Approach

One foundation, three products, each with its own voice.

An audit of every screen across three apps became a shared set of tokens for color, type, spacing and motion. On top sits one component library in Figma and code, themed differently for each product.

Green fern leaves on a black background
Close-up of a green plant in the dark
Dense green leafy plants

Result

Three apps now ship from a single source of truth.

Within two quarters every app ran on the system. Design reviews got shorter, accessibility issues dropped sharply, and a fourth app went from kickoff to launch in six weeks.

Plants photographed with a shallow focus
Close-up of green leaves

Feedback

“I was amazed by how intuitive and user-friendly everything felt. It’s clear Alex is obsessed with every pixel — every transition designed to create an experience that blows your mind.”

6 wks

Kickoff to launch for app four

−60%

Accessibility issues

man wearing eyeglasses

John Murdoch

Client · Fern

Create a free website with Framer, the website builder loved by startups, designers and agencies.