Case study · MNTN · Design systems

Everest.

Everest is a set of core components based on Ant Design, built to establish a UI system for the existing MNTN platform. Designed to streamline workflows, promote consistency, and foster creativity across teams, Everest is the foundation for creating intuitive, user-focused experiences.

Role
Head of Product Design
When
My first project at MNTN
Built on
Ant Design
Status
Succeeded by a newer system; Everest is deprecated
Where it started

An established system with a lot of holes.

Everest already existed when I joined MNTN, but it had a lot of gaps. As my first project, I focused on how the system was run as much as on what was in it. I created a release system and a way for teams to collaborate and get components approved. The system was organized in three months.

Branching and releases

In Everest, a release is the merging of a Figma branch. We branch when a design already in production needs significant changes, such as rethinking a whole section of the UI, and to bring older global files up to date after a feature ships. Most features don't need a branch. Small changes get their own simple file, which keeps files easy for stakeholders to follow.

Collaboration and approval

Every branch merge is reviewed by at least two members of the design team. Early on, reviews came through me. As the team settled, any peer could review, so approval became a shared responsibility.

The foundations

Every token has a job written next to it.

Everest's styles page documents color, type, and shadow, with usage rules beside each one. Values below come from the Everest file in Figma.

Open the Everest file in Figma ↗
Blues.
B1
#96A8B9 · Primary text on dark
B2
#5A758B · Secondary text on dark
B3
#283E4E · Accents on B4
B4
#182B39 · Dark background over B5
B5
#12222F · App background
Table selected row
#EDF6FF · Selected table rows
States.
Menu item hover
#F5F5F5
Menu item active
#E6F7FF
Grays.
White
#FFFFFF · Card backgrounds
G0
#FAFAFA · Backgrounds on white
G1
#F0F0F0 · Borders and accents
G2
#BFBFBF · Disabled states
G3
#595959 · Secondary text
G4
#262626 · Primary text, titles
Black
#000000 · Hardly used, if ever
Primary colors.
Primary blue
#1890FF · Buttons and links
Success
#59B52C · Primary green
Warning
#FAAD14 · Primary yellow
Error
#E62F38 · Primary red
Hover colors.
Default hover
#E6E6E6
Primary hover
#329CFF
Secondary hover
#314B5F
Success hover
#5FC12F
Danger hover
#E84149
Marketing colors.
Cotton Candy
#0AABC5
Mint
Brand headline period
Berry
#1C5984
Ube
#6B34AF
Kimchi Red
#D6001C
Orange Chicken
#FF6D11
Reporting colors.
Chart solids, in order of usage
What came next

The basis for its successor.

Everest was the basis for the design system that now powers MNTN's newest product, and it has since been deprecated. Some of its thinking is still visible in the successor:

The Cotton Candy teal (#0AABC5) lives on in the successor's palette as Teal.600.
Brand headlines still end in a period set in a signature green.
Usage rules are written next to every color, in both systems.
Reflection

A design system depends on process as much as components. Everest was my first lesson in that at MNTN, and I carried it into the system that replaced it.

Want to talk design systems?

I've built three of them, and I'm always up for comparing notes.

[email protected]
© Matthew Cassella · Northport, NY
LinkedIn