Tyler Wain

ToptalBASE design system

From 54 text colors to one system

Toptal’s first design system

Toptal’s platform had grown for years without a shared system. Designers passed styles around in Google Drive, and engineers kept rebuilding UI that was similar but not the same.

As the team’s second UX designer, I started BASE and led it: principles, a Sketch library, React components with an engineer, and a site the whole company used.

Role
Project lead
Team
Design team, front-end engineer
Timeline
2017–2019
Status
Shipped
Tilted collage of BASE site pages: color swatches, photo grids, type specimens and guideline text, with Slack and Sketch windows.
The BASE documentation site: brand, marketing, and product sections in one place.

Overview

A growing product with no shared system

Toptal connects companies with freelance engineers and designers. Its platform had barely changed since 2010, and updates were made in isolation, one feature at a time. It looked outdated, and the inconsistencies ran deep: designers shared a handful of styles through Google Drive, and nothing guaranteed that a design had a matching counterpart in code.

I joined as the team’s second UX designer. After weeks of shadowing calls with users and reading the design and engineering channels, the pattern was clear. Engineers got designs that were similar but not exact. Designers kept rebuilding the same elements. I proposed a design system, got the go-ahead to spend part of my time on it, and led it from there.

There needs to be more collaboration between the design and engineering teams.

Courtney M.

Evidence

Starting with an audit, not a redesign

Not everyone wanted a system. Some designers worried it would disrupt the process and chip away at their creativity. So before proposing any new styles, I documented what already existed.

I audited the logged-out marketing pages and the logged-in platform using CSS Stats, screenshots, design files, and prototypes, then organized everything into shared InVision boards. The numbers made the case on their own: more than 10 button styles, 24 font sizes, 14 background colors, 54 text colors, and 8 versions of the logo.

The tradeoff was time before anything new appeared. But the audit turned a debate about taste into a shared list of problems, and it gave the system a clear starting inventory.

The audit turned a debate about taste into a shared list of problems.
An audit board of Toptal's buttons and links in four columns: green, blue, outlined and pill-shaped, in many sizes.
Button styles collected from across Toptal’s UI during the audit.
The top of an InVision board titled BASE: Interface inventory, with a marketing home page and a product dashboard.
The BASE interface inventory, an InVision board of Toptal’s marketing and product screens.

Principles

Defining principles with the team before building components

Toptal had no design principles, so I used our weekly design meetings to define them together. What is Toptal’s purpose? What do we prioritize? How do we want users to feel? After a lot of deliberation, we settled on four: Bold, Authentic, Serious, and Energetic.

Then we ran quick, high-level explorations of future directions. Nothing was off the table, and it brought in designers who hadn’t had time to contribute yet.

The tradeoff was a slower start. The payoff showed up later: once BASE was available across Toptal, teams outside design used the principles to make their own hard decisions.

By sharing how we made decisions, we invited other teams to solve problems like designers.

A wide canvas of about forty Toptal screens in loose rows, mostly white and blue pages with a few dark ones.
Quick, high-level design directions the team explored once the principles were set.
The four BASE principles: bold, authentic, serious, and energetic.

Design and code

Building the system in design and code together

I built components with an Atomic Design approach, starting from core styles and combining them into buttons, avatars, inputs, and larger patterns. A shared Sketch library put them in every designer’s files.

A BASE Colors page with swatch cards under Brand, Extended and Neutrals, each listing hex, RGB and CMYK values.
The BASE color palette: brand, extended, and neutral colors.
A BASE Typography page showing Display sizes, Headings 1 to 6, a caption sample and long-form text in three sizes.
The BASE type scale: display sizes, headings, long-form text, and captions.

Word got around, and a front-end engineer asked to contribute. We paired Semantic UI with React so product teams could adjust and swap elements. That turned BASE from a design library into a system both design and engineering could build from.

A library alone wasn’t enough, so I wrote the guidance around it: best practices, dos and don’ts, and accessibility guidelines. A documentation site became the single source of truth, with the Sketch library, a sticker sheet, release notes, and implementation notes for developers. An engineer who liked tinkering built BASEbot, a Slack bot that answered common questions like which colors and fonts to use.

More pieces meant more to maintain, but each one removed a reason not to use the system.

BASE turned from a design library into a system both design and engineering could build from.

Outcome

A system Toptal used across design and engineering

Five BASE resources side by side: Sketch library, sticker sheet, documentation site, developer docs and a Slack channel.
Everything BASE grew into, from the Sketch library and sticker sheet to the website, developer guidelines, and Slack support.

Looking back

The basics mattered more than more components

Getting teams to adopt BASE took time, because it was a different way of working, not just a redesign. As it matured, the most valuable work wasn’t adding elements. It was returning to fundamentals: accessibility and localization, motion, and a move from Sketch to Figma.