Design system

Personal

Building a design system from scratch

Tokens, type and 148 components, documented so a new designer ships on day one.

Building a design system from scratch
Building a design system from scratch
Building a design system from scratch

My part

Designer and maintainer

Duration

Ongoing

Crew

Just me

Ships on

Figma and Framer

Brief

Atlas is my own design system, built in Figma and Framer. It covers tokens, type and 148 components.

Challenge

Every project started from zero

Each new client meant rebuilding buttons, inputs and spacing. Small differences crept in everywhere.

Foundations first: colour, type, buttons and inputs.
Foundations first: colour, type, buttons and inputs.
Foundations first: colour, type, buttons and inputs.

Foundations first: colour, type, buttons and inputs.

Every component ships with its states documented.
Every component ships with its states documented.
Every component ships with its states documented.

Every component ships with its states documented.

Results

What moved after launch

148
components
148
components
148
components
2 days
to start a new project
2 days
to start a new project
2 days
to start a new project
100%
states documented
100%
states documented
100%
states documented

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