Design systems Art direction Color systems

[REDACTED]
Design System

From cotton candy to cohesion

4
Years in production
2
Major versions shipped
1
Designer
100%
Product adoption

A skeleton that was never going to be finished

I inherited a half-built design system that needed a stronger foundation. Marketing and product were visually disconnected - not broken enough to stop shipping, but inconsistent enough to erode trust over time.

The existing color and type stack was not purpose-built for a data-heavy application. That constraint defined V1 and made the opportunity for a deeper V2 rebuild clear.

My role was to bring direction, system logic, and execution discipline into the gaps: defining the library, shaping implementation, and making the system useful enough for teams to adopt.

Full component rebuild in Figma. Layout and design directed end to end. UI development shaped through to shipping. V1 created immediate cohesion, then exposed exactly where the system needed to mature.

When the constraint lifted, we did it right

V2 started with color. The inherited palette was not built for data density, dark mode, or the product's real interface needs.

I rebuilt it from scratch using OKLCH, a perceptually uniform color space that produces mathematically derived ramps with consistent visual weight across the full scale. Every semantic color was chosen intentionally: primary actions, states, feedback, and data visualization.

From there, the system extended into marketing. The public-facing site needed to feel connected to the product it represented, and the design system gave both sides of the organization a shared visual language.

Mathematically derived.
Perceptually uniform.
Built for data.

Semantic color system for product UI, data visualization, state, and dark mode.

[REDACTED] Design System V2 — updated component library
DS V2 — component library

Product to marketing.
One system.

Marketing had been operating outside the system, adapting components to fit workflows the DS had not been designed to serve. The result was cohesion on paper and fragmentation in practice.

I redesigned the marketing direction around DS V2 so the public-facing experience and product interface could finally speak the same language. The before and after speak for themselves.

Before
[REDACTED] marketing site before DS V2 — dated, inconsistent with product
After
[REDACTED] marketing site after DS V2 — modernized, unified with product

Full adoption.
One system.

Product

Every product team running on V2. Components in Storybook, tokens in Figma, adoption without a mandate because the system actually fit how teams worked.

Marketing

Public-facing site brought into the same visual language as the product for the first time. Years of divergence resolved through one system and a focused redesign direction.

Color

OKLCH-based ramps replacing an inherited palette that was never built for data-heavy interfaces. Semantic, scalable, dark-mode-ready.

Execution

One designer owning the connective tissue: system logic, visual direction, implementation details, documentation, and adoption across the organization.

Available on request for qualified opportunities.

Storybook
Full component library with variants, states, and documentation
Figma
Token architecture, component library, design documentation
Brand guide
Color system rationale, typography standards, usage documentation
← Back to work Next: Character IP →