All Work

envision

Design System

Role
Lead Product Designer
Product
Virtual Design Center
Disciplines
Product Design, Design System, 3D Visualization
Envision design system: the color-token table and the Button state matrix

The objective

Building a scalable component library on a tokenized infrastructure for a white-label product, so an entire team could contribute safely.

Overview

Envision is a virtual design center where homeowners can customize their new home through an interactive 3D experience. I built a machine-ready design system that could adapt to different homebuilder brands. It needed to keep design and development aligned and give developers a reliable source of documentation.

I built a three-tier token architecture and connected Figma to code through Style Dictionary. I developed a reusable component library supported by Storybook documentation and a dedicated Developer Center that established guidelines for implementation and maintenance.

The result demonstrates how a machine-ready design system can support multiple brands and scale across products.

View website

Context and my role

I owned the design system from the start, making the architectural decisions and carrying the work through implementation. I established a three-tier token structure that could support multiple brands through shared components. I also defined what belonged in the component library and built the pipeline connecting Figma to code. To support future contributions, I created the governance model and documentation that would keep the system consistent as it grew.

Decision 1

Three tiers of tokens

The system is built on a three-tier token architecture that separates raw values from how they're used in the interface. I established this structure early to keep tokens organized and reusable without making the system difficult to maintain as it grows.

I built theming into the architecture so the same component library can support multiple brands. Each theme defines its own visual identity, which the components inherit. This makes changes predictable across the system.

The color/brand/primary ramp in Figma: steps 50 to 900, with a separate hex value in each of the four brand modes
Tier 1 brand tokens: Shared color ramps with unique values for each homebuilder theme.
The color/content tokens in Figma: roles such as primary, brand and utility-error, each mapped to a primitive value in every brand theme
Tier 2 semantic tokens: Shared UI roles mapped to primitive values across homebuilder themes.
The T3 Components collection in Figma with the button group selected: padding, font-size, line-height, gap, border-radius, font-weight and icon-size tokens for small and medium, each mapped to a semantic token
Tier 3 component tokens: Button-specific properties and states mapped to semantic tokens.

Decision 2

A naming system built around intent

A design system needs a shared language that designers and developers can understand. I established a naming convention based on each token's purpose, with a predictable structure that carries from Figma into code.

I established a consistent naming structure across all three token tiers. Each name follows a predictable order from broad to specific. The color examples below break down that structure and show the possible values for each part.

Color Token Naming Algorithm. Tier 1: color-yellow-100, broken into category, color and value. Tier 2: ds-theme-color-background-brand-subtle-hover, broken into global prefix, tier identifier, category, property or surface (content, border), intention (default, disabled, utility, dataviz, accent, transparent), variant (strong, error, success, warning, info, knockout, primary, secondary, tertiary) and state (focus, active, pressed). Tier 3: ds-theme-button-primary-color-background-hover, broken into global prefix, tier identifier, component or category (link, table, header, form, focus-ring), variant (secondary, tertiary, link, knockout), property (content, border) and state (focus, active, pressed, disabled)

Why it matters

Naming is part of how a design system works. A predictable structure helps designers find the right tokens and developers understand how they're used. It also gives AI tools explicit rules to follow when working with the system.

As more people contribute, that shared language helps keep the system consistent.

Decision 3

Connecting design directly to code

The values defined in Figma variables had to be the same ones used in the product, so I built a pipeline that turns design tokens into assets the application can use. Figma variables are exported into JSON and processed through Style Dictionary to generate CSS variables and TypeScript files. These outputs are committed to the codebase and reviewed by the dev team.

  1. Figma Variables
  2. JSON
  3. Style Dictionary
  4. CSS / TypeScript
  5. Components
  6. Product
The large button in Figma: constructive, neutral and destructive hierarchies across default, hover, pressed, focus, disabled and applying states
Large button system: Six states across eight variants, all connected through the shared token architecture.

Storybook

I built Storybook using the actual components, with interactive examples showing their different states and how they behave. The library includes 66 stories across 14 components, with automated tests to check functionality and accessibility.

View Storybook

Decision 4

Governance built into the system

The Envision Design Center gives designers and developers one place to understand the system and how to contribute. It covers foundations, component usage and guidelines for managing changes. Storybook shows how components work, while the Design Center explains how to use them and keep the system consistent as it grows.

The Buttons page in the Envision Design Center: component status by platform, the button anatomy, and the states matrix for the large button View Documentation

Tracking changes and releases

I built component changelogs to document updates and make release history easy to follow. Changes are classified as Major, Minor or Patch, with migration guidance for breaking changes.

I also created an Add Change workflow that captures proposed updates and generates a ticket for review. Changes are documented before they're introduced into the system.

The Field component's Changelog tab in the Envision Design Center: a Major v3.0.0 entry with an Action required migration note and a Minor v2.4.0 entry marked No action required, with an Add change button

Accessibility as a default, not a final check

I made accessibility part of the system from the start, including keyboard navigation, screen reader support and color contrast. Automated tests caught issues in the Right Rail and Option Card that weren't obvious in the designs. I also improved inactive tab contrast from 3.5:1 to 7.5:1. Fixing these issues in the components means they don't have to be addressed every time they're used.

Results

The system in use

I applied the design system across Envision's homeowner portal and 3D Design Center, bringing the components together into complete product experiences.

A persistent configuration rail

The Right Rail is a composite component built from smaller, reusable components. Each component maintains its own states and behavior which allows them to be reused independently. The same structure adapts from a desktop side panel to a bottom sheet or drawer on mobile.

The Right Rail in Figma: the anatomy with six numbered parts and a legend naming each one, RightRailHeader tabs, section title, OptionCard, group header, swatch grid of MaterialSwatches and RailFooter, and its two states, Customize with Cabinet Style, Hardware, Flooring and Countertops sections, and Packages with a list of package cards, each with a fixed header and footer

Package and material selection

Package Cards combine media, pricing, descriptions and material selections. Configurable properties control elements like the Popular badge. The footer automatically adjusts swatch sizes and spacing based on the number of finishes available.

Card-Package documentation in Figma: the anatomy with five numbered parts, Badge, Package Card Media, Package Card Header, Package Description and Package Card Footer, with a legend; Variants showing the Default card with the Popular badge off and on; and Footer finishes showing six cards whose swatches grow from 20px at six finishes to 24px at five and 36px at four, then stay 36px and pack next to Customize at three, two and one

Impact

Envision now has a working design system with the architecture, components and processes in place to scale across multiple brands and products. I connected design directly to code and established clear standards for how the system can be maintained and extended by other teams.

  • Three-tier token architecture supporting multiple homebuilder themes.
  • Automated Figma-to-code pipeline generating CSS and TypeScript tokens.
  • 14 working Web Components with React adapters and 66 Storybook stories.
  • Design system documentation covering components, accessibility and governance.
  • Machine-readable specifications supporting AI-assisted development.