As Five Below's digital footprint expanded, the need for a cohesive, scalable design infrastructure became critical — and the existing workflow was actively working against it.
Handoffs were manual, visual regressions were constant, and both design and engineering teams spent more time on pixel-pushing than on solving customer problems. By restructuring how we treat design decisions — translating them into Tailwind code tokens and syncing them directly to GitHub — we transformed the design system into a shared, automated engine.
The result: a pipeline that exponentially cuts development time, virtually eliminates visual QA bugs, and lets every team member focus on work that actually moves the needle.
Before the rebuild, design and engineering operated from entirely separate sources of truth. Designers produced high-fidelity Figma mockups; engineers translated them by hand. Every pixel value, hex code, and spacing decision had to be manually inspected, documented, and re-entered in code — a process riddled with room for error and nearly impossible to maintain at scale.
Engineers inspected Figma files and hardcoded values, leaving room for human error and styling inconsistencies across every page of the Five Below site.
Because design and code were entirely separate, the QA team spent an inordinate amount of time logging visual bugs — wrong padding, incorrect brand colors, mismatched typography.
Every new project required redundant effort from both designers and developers, inflating costs and timelines beyond what the business could sustain.
We rebuilt the foundation of the design system using Tailwind code tokens — abstracting every design decision into a semantic variable. Every choice, color, spacing, radius, maps directly to a named Tailwind utility that exists identically in Figma and the codebase. What a designer applies in the tool is exactly what an engineer ships in the browser. No translation required.
Using Figma Variables and automated pipelines, any token update a designer makes generates a pull request directly to the engineering repository. Upon approval, the Tailwind configuration updates across the entire codebase automatically. The handoff phase for foundational styles is eliminated entirely — engineers no longer guess values or write custom CSS. They consume the tokens design controls.
The automated pipeline between Figma and the codebase produced measurable results across both teams. Development cycles shortened significantly. Visual QA bugs — the largest time sink — dropped sharply. And teams regained hours previously lost to UI debt, redirecting that capacity toward higher-complexity UX work.
An exponential decrease in time required to spin up new features — from weeks to days — across the Five Below digital experience.
Near-elimination of QA visual bugs. Any component consuming the correct token is guaranteed to render accurately — no manual checks needed.
Resources previously absorbed by UI debt were freed up for complex UX flows, user testing, and feature innovation.
A single token update now propagates instantly across the entire Five Below site — guaranteeing a unified experience for every customer.