← All work
Lynx Design System

One system. Three products. Built to move faster.

I built the Lynx Design System from scratch to create one scalable product language across Expanse, Launchpoint, and Allyance.

What began as a foundation for consistent design and development now helps designers ship faster, gives engineers clearer implementation patterns, and enables leadership to turn feedback and new ideas into testable concepts much earlier.

Lead Product Designer Design Systems Design → Code AI-assisted Prototyping
40%

faster design production

70%

faster prototype builds

~1.5 mo

to design Lynx Launchpoint, a product for government users, and move it to developer handoff

3 → 1

products working from one shared design language

2

designers mentored and onboarded into the system

LDS started as a way to build consistently. It became infrastructure for testing and shipping ideas faster.

01 · Impact first

The system changed how Lynx builds and how Lynx thinks.

Designers move from ideas to realistic prototypes faster, test them with users, and iterate without rebuilding the UI foundation. Developers work from established tokens, coded components, Storybook, and clearer design-to-code relationships instead of repeatedly interpreting design decisions. Leadership and product teams use the system as the foundation for AI-assisted prototyping, turning customer feedback, small feature ideas, workflow changes, and product hypotheses into tangible concepts much earlier.

Design

Ideas become testable prototypes, without rebuilding the foundation.

Development

Established tokens and coded components, not repeated interpretation.

Leadership

Feedback becomes tangible concepts, much earlier.

LDS didn't just help us ship faster.
It helped us learn faster.

02 · The problem

We were rebuilding decisions we had already made.

Lynx Expanse, Launchpoint, and Allyance were evolving across different designers and teams. As the company moved faster, foundational and component decisions were being remade across products, while the Lynx brand was beginning to drift.

I brought designers and engineers together in working sessions to audit what already existed, compare decisions across the products, align the Lynx brand, challenge one-off patterns, and agree on the shared system we would move forward with.

Expanse
Launchpoint
Allyance
Converging toward one shared language
lds.color.action.primary · lds.space.400 · lds.radius.12

So I built a system the company could keep building from.

03 · Foundations

I built the system from the foundations up.

I built LDS across color, typography, spacing, borders, radius, responsive modes, components, states, and reusable product patterns, then worked with designers and engineers to reduce those decisions into a shared semantic system.

Color

Selected ramps, resolved into semantic roles

lds.color.action.primarylds.color.surface.defaultlds.color.text.secondarylds.color.status.success
Typography

The finalized semantic roles

Display
XL · L
Headline
M · S
Title
M · S
Body
XL · L · M · S
Label
Section label
Caption
Supporting detail, set small and quiet.
Link
View documentation
8 roles
rationalized set
Explored broadly, then reduced to what the products needed.
Responsive

One role, three responsive expressions

Display XL
lds.type.display.xl → 48 / 56
One role. Three responsive expressions.
Spacing

A numeric scale with semantic names, built for implementation

lds.space.100
lds.space.400
lds.space.800
padding: var(--lds-space-400);
gap: var(--lds-space-800);
Borders + radius

Compact specimens

hairline
default
strong
lds.radius.4
lds.radius.12
lds.radius.full
Components

A complete product system, not a token exercise

Button
Get started
Input
Search…
Card
Form control
Navigation
DefaultHoverFocusDisabledLoadingError

The goal wasn't more styles.
It was fewer decisions.

04 · Naming

Naming became part of the architecture.

I structured the naming so the intent stayed clear even when the underlying value changed. The names needed to make sense to designers, developers, and eventually machine-readable workflows.

lds.type.display.xl
systemcategoryrolescale
lds.color.action.primary
systemcategoryrolevariant
lds.color.surface.defaultlds.space.400lds.radius.12lds.type.body.m

The system could explain itself without me in the room.

05 · Design to code

The system didn't stop in Figma.

I built the design language with engineering, not for engineering.

I worked with designers and developers to align naming, semantic roles, responsive behavior, component states, Tailwind compatibility, and implementation conventions.

The syntax could differ.
The meaning could not.

06 · Implementation

Semantic intent carried into implementation.

I worked with engineering to make sure shared components held the same intent across design and production, including variants, states, responsive behavior, token mappings, and coded counterparts.

Color
lds.color.action.primary
Typography
lds.type.label
Spacing
lds.space.400
Radius
lds.radius.12
Responsive
adapts per mode
Get started
Primary · Medium
<Button
  variant="primary"
  size="medium"
/>
Focus
visible ring, keyboard-first
Disabled
reduced opacity, no action
Loading
spinner replaces label
Code Connect
Figma ↔ coded component
Storybook
all variants covered

The goal was not pixel parity.
It was system parity.

07 · Engineering

Storybook made the system real in code.

Engineering built the production components in Storybook. I worked with them on token mappings, variants, interaction states, responsive behavior, component usage, and visual QA. So the system covered more than the default component.

Default
Get started
Hover
Get started
Focus
Get started
Disabled
Get started
Loading
Loading…
Error
Try again
token mappingsvariantsstates responsive behaviorusagevisual QA

Figma defined the intent.
Storybook proved the implementation.

08 · Machine-readable

Then the same structure became useful to machines.

Semantic naming was originally helping designers and developers speak the same language. But explicit structure also reduces what a machine has to guess. With structured components, semantic variables, Code Connect, and Figma MCP, AI-assisted tools could work from system context, not just screenshots.

Unstructured
Rectangle 47
#3B82F6
Untitled frame
17px
appearance

intent
Structured · LDS
product-card

semantic component

lds.color.action.primary

semantic role

mode: tablet

responsive mode

ProductCard.tsx

coded counterpart

state: hover

state

Code ConnectFigma MCPClaudecodebase context

I wasn't teaching the machine what Lynx looked like.
I was teaching it how Lynx worked.

09 · AI-assisted prototyping

The system is now helping the company test ideas faster.

The company is moving into an AI-assisted prototyping stage built on top of LDS. Leadership, designers, and product teams can start with customer feedback, a small feature idea, a workflow change, or a product hypothesis, and make it tangible earlier using the existing Lynx product language: components, typography, spacing, responsive behavior, visual hierarchy, interaction patterns.

Inputs
Customer feedback

"Need faster opportunity comparison"

Workflow idea

"Simplify review"

Leadership hypothesis

"Compact summary experience"

Small feature

"Faster opportunity triage"

Concept directions · same system
Compact
Triage list
Review
Compare
Side by side
Compare
Guided
Step through
123
Continue
Different ideas. Same system.
ReviewTestRefine
The prototype isn't the final product. It's a thinking artifact.

AI didn't replace the design process.
It moved the product conversation earlier.

10 · Proof

Launchpoint proved the leverage.

Lynx Launchpoint is a product built for government users. I led its design. Because LDS already contained the shared foundations and reusable components, I could focus much more of the work on government workflows, information architecture, dashboard composition, interaction, and user needs, instead of rebuilding typography, spacing, controls, and common interface patterns.

~1.5 months
Kickoff → developer handoff
Already solved by LDS
  • Typography
  • Color
  • Spacing
  • Responsive behavior
  • Buttons
  • Inputs
  • Navigation patterns
  • Component states
Where I spent the design cycle
  • Government workflows
  • Information architecture
  • Dashboard hierarchy
  • Interaction
  • Product behavior
  • User needs

The system had become infrastructure for launching products.

11 · Next

Can the system help maintain itself?

The next evolution I want to explore uses the same machine-readable structure to surface design-code drift, dead tokens, duplicate semantics, hardcoded values, and missing component mappings. Not autonomous production changes. Proposed changes, reviewed by people.

LDS SYSTEM AUDIT
$ checking Figma ↔ code…
✓ semantic mapping aligned
△ deprecated token detected
△ hardcoded value found
× missing component mapping
$ review proposed changes
Next · future direction, not yet shipped

AI proposes. Humans approve.