I'm Jesse.

Step 1.

Research & Analysis

The spark for a new system came from the rebrand itself: think a vibrant rainbow gradient for the parent brand, distinct product colors spun from it, Inter for typography, and a fresh set of Material Symbols with some custom icons to round things out. The new brand was energetic, modern, and very different from what we had before.

threecolts.com 1.0 → threecolts.com 2.0

When I audited our existing UIs, the issue wasn’t that we were missing components—it was that they looked tired and didn’t live up to the new aesthetic. On top of that, we weren’t taking advantage of newer Figma features like variables and Auto Layout, which slowed everyone down.

Talking with the design team confirmed what I suspected: we needed a modernized component library that felt aligned with the brand, but also actually worked with Figma’s latest capabilities. The challenge was translating a complex brand identity into something that was both scalable and easy for designers to use every day.

Guiding Principles

From this analysis, I set five north stars for the new system:

• Brand Identity, But Controlled: Use the gradient, black/white contrast, and product-specific colors—but sparingly and with intent.
• Modern Refresh: Update outdated components so they actually look like they belong in present day.
• Figma Superpowers: Leverage variables, Auto Layout, and other advanced features for efficiency and scale.
• Cross-Product Consistency: Every product should feel like part of the same family—distinct but related.
• Beyond Product: The system should be useful everywhere—products, marketing, even video.

Step 2.

Defining the Solution

Our strategy was simple: take the shiny new Threecolts visual identity and bake it into a design system that was structured, flexible, and designer-friendly.

Color and Typography

• Visual Language Framework: Set clear rules for how to use gradients, product palettes, and accents—enough brand recognition without overwhelming.
• Component Library Overhaul: Give every element a facelift: cleaner lines, better hierarchy, and locked-in brand consistency.
• Figma Feature Integration: Build components with variants, properties, Auto Layout, and color variables. That meant easier updates, theming, and fewer headaches down the road.
• Foundations Definition: Documented design tokens for color, typography, spacing, and sizing. These served as our rock-solid baseline for everything else.

Step 3.

Building and Iterating

I worked side-by-side with the other UX designers, splitting up component work but constantly syncing through review sessions to keep everything consistent.

Button and Calendar Components

Our process looked like this:

• Prototype: Build out early versions of key components in Figma.
• Review: Share them with design + engineering, get feedback, refine.
• Pilot: Drop new components into live product work and tweak based on real-world usage.

Step 4.

Final Design System and Outcomes

The end result was a polished, centralized design system in Figma that the entire design org could rely on.

Key wins included:

• Brand Alignment: A UI that actually reflected Threecolts’ bold, modern identity.
• Speed: Designers could spin up polished screens faster using flexible, ready-to-go components.
• Consistency: Shared tokens and standard components made products look and feel related.
• Scalability: With design tokens and Figma variables in place, future updates will be a breeze.

InventoryLab and Tactical Arbitrage User Interface Examples

What I learned

Design systems aren’t just about colors and buttons—they’re about people. To succeed, I had to balance the complexity of a multi-product brand with the day-to-day realities of a design team.

Big takeaways:

• Document just enough: Clarity is key, but bloat kills adoption.
• Collaborate early and often: Feedback loops made the system stronger.
• Iterate, always: A design system isn’t ever “done.” It gets better with use.