Five Below

Design System

Our team worked diligently to establish Five Below's first digital design system. Following Atomic Design Methodology, a 4pt grid system and basing the labeling conventions after the Tailwind CSS framework, this living organism is updated alongside every major release.
 

01 / Atoms

Atoms are the smallest, reusable UI elements that form the foundation of a consistent and scalable design system, analogous to the role of atoms in the physical world. Below are examples of what we used on the Five Below site after the replatform project and why. 

Typography

We chose Inter as the sitewide font for its versatility, readability, and modern design. Our competitive analysis revealed that many large retailers also use Inter as their primary font, giving us confidence that customers would easily adapt to it. Additionally, Inter pairs well with our custom FiveBelowGothic font. With nine weights and corresponding italics (18 styles in total), Inter is optimized for user interfaces. Its large x-height and open letterforms enhance legibility and help reduce eye strain during extended browsing sessions.

Colors

When redesigning our platform, the development team and I decided on the Tailwind CSS framework which is known for its unparalleled blend of design flexibility and developer efficiency. The Tailwind color palette was all based off of Blue-500, #0066ff which is the Five Below blue, and we adjusted the rest of the colors to match saturation and tone. 

Buttons

Pattern

Live Example

Inputs

Pattern

Live Example

Icons

02 / Molecules

Fulfillment CTAs

Alerts

Tooltips

03 / Organisms

The main objective of this redesign was to eliminate white space on top of the left navigation and condense the room taken by the active filters and sorting dropdown.

Carousel Cards

Hotspots

Filters

Store Locator

Visual Navigation