Cboe Global Markets · 2022–Present

Building two design systems at Cboe

Role: Led the project and owned its direction
Timeline: 2022–Present
Selected outcome: Component work that once took two full sprints now usually fits into one, with occasional overflow.

Cboe needed one design system for its public website and another for internal applications. I led the work on both, including tokens, components, documentation, and how teams request and review changes.

The ask

Create two systems for different kinds of products without making teams learn two completely different ways of working.

Building two design systems at Cboe project overview

My role

Led the project and owned its direction
Ran weekly checkpoints and sprint planning
Designed the token architecture, components, patterns, and Figma libraries
Set up governance for requests, token changes, reviews, and adoption

What I used

Figma · FigJam · Token Studio · Storybook · Docusaurus · Claude Code

What changed

Component work that once took two full sprints now usually fits into one, with occasional overflow.

Three large application teams use the systems. Cboe’s AI team also uses them for internal dashboards and portals.

What got in the way

02-01

The challenge

Handoffs had become huge annotated files that were slow to navigate and easy to misread.

What I did

I brought engineers in earlier and replaced the big handoff with shorter working sessions throughout the project.

02-02

The challenge

Marketing teams regularly needed new patterns and variants, often on short notice.

What I did

I set up a request process so we could review the need together before adding another one-off solution.

02-03

The challenge

Tokens were new to many of the people expected to use and maintain them.

What I did

I ran small hands-on sessions where teams could work through real token decisions and ask questions.

A closer look

Annual roadmap with parallel Cboe design-system and website work streams, milestones, dependencies, and blockers — 03-01
A shared annual roadmap made dependencies, blocked work, and delivery milestones visible across the design-system and web teams.

Cboe design token architecture — 03-02
The two systems share a token foundation but can still support different brands and levels of density.

Tokens Studio showing primitive, semantic, contextual, and theme token groups — 03-03
The token structure separates primitives, semantic decisions, themes, and product context so teams can update the system without changing values one component at a time.

Cboe primitive component library — 03-04
Components are reviewed, documented, released, and updated based on how teams use them.

Figma specification pages for input field, label, radio, and checkbox components — 03-05
Every component follows the same documentation structure, covering anatomy, properties, spacing, styling, and the details engineers need to implement it.

Cboe Storybook documentation — 03-06
The documentation explains what each component does, when to use it, and how it should behave.

Claude skill file describing how to create Contour design-system governance pages in Figma — 03-07
I turned our documentation standards into a reusable Claude skill so teams could generate a consistent first draft without skipping design review.

What I’d do next

04-01Add a simple view of usage, exceptions, and contribution activity.
04-02Give teams more ways to contribute while keeping the review process in place.
04-03Measure how the systems affect the products, not just how quickly components get built.