Designing systems that outlast teams

Context

I set out to build a system that would actually hold up under real product growth, not just a visual refresh that drifts the moment nobody's watching. Cordial's existing system had fallen behind both brand standards and the product itself, and I wanted the replacement to be something the team could trust by default, not something they had to double-check.

Problem

What I inherited had drifted from brand standards and produced an inconsistent, fragmented UI:

• The primary color overused everywhere, well past where it carried meaning
• Font sizing and font styles inconsistent across surfaces
• Buttons and inputs failing basic accessibility across their own states
• Improper grey usage, which broke both the flat design language and the data visualization built on top of it
• Navigation that lost its own state when collapsed, which was quietly killing adoption of whatever sat underneath it

Process

I didn't want to just rebuild components. I wanted a system the team couldn't quietly drift away from again, which meant proving the new bar before building to it.

Discovery & audit: I benchmarked the existing system against AAA references (IBM Carbon, Adobe Spectrum, Shopify Polaris), so the new bar wasn't just my opinion of "better." It was a standard I could point back to.

Brand collaboration: I partnered with brand and marketing before touching a single component. Deciding tokens ahead of brand meant relitigating the same color and type calls later, so I settled that layer first.

Design execution: I moved the system from Adobe XD into Figma for the variables and dev-mode inspection XD couldn't give the team, then built every component on semantic and static tokens with a {category-type-subcategory-state} naming convention, so a component could be trusted by its name alone, not by opening the file to check. A disabled text color, for example, resolved through --global-color-text-disabled, aliased to --color-gray-700, which the theme set to #858585: one readable chain from intent to hex, not a guess.

Variants and variables kept it scalable, and I wrote documentation structured the same way, right down to component pages that name each state before showing it:

Implementation & handoff: I rolled the new system out across roughly 40 views myself, including content builders, workflow builders, dashboards, and the code editor, the hardest surface of the set to systematize. The reskin landed in stages instead of one disruptive cutover, so the interface stayed usable throughout the rollout rather than a single high-risk cutover moment.

Solution

A Figma-based component library with variants and variables, a clear token structure and naming convention, organized documentation, and a consolidated set of components with the redundancy designed out.

Outcome

Adoption of the design system increased, UI consistency improved, and design and development time dropped, with fewer UX and QA review cycles and faster shipping. The company followed with its largest pipeline and sales quarter next. A design system alone doesn't close deals, but shipping something consistent and accessible, faster, removed one more objection standing between the sales team and a signed contract.