Designing the DSL Design System
Building a scalable foundation for enterprise admin products
OVERVIEW
This project established DSL’s first enterprise internal design system, creating a scalable foundation to support multiple admin products while improving design–engineering alignment and reducing rework.
Each product shipped with ad hoc components, inconsistent patterns, and growing UI debt.
CONTEXT & SYSTEM OVERVIEW
Dreamscape Learn delivers immersive VR learning experiences through physical VR pods distributed across ASU campuses. Supporting these experiences requires several internal tools for booking, operations, and content workflows.
Despite this growth, DSL had no formal design system, only a small UI kit that couldn’t scale with the number or complexity of products being built.
THE CORE PROBLEM
As DSL products scaled, the absence of a design system became a systemic bottleneck:
While building the Admin Portal, these issues became unavoidable, slowing delivery and increasing friction across teams.
CONSTRAINTS & RISKS
GOALS
RESEARC & INSIGHTS
This work centered on internal workflow friction rather than end users.
Key Insight
The core issue wasn’t missing components, it was the lack of shared definitions and constraints.
RESULTING SYSTEM DIRECTION
Three principles guided the build:
PHASE 1
I defined tokens and variables to ensure consistency and accessibility:
Semantic color tokens
Typography and spacing scales
Responsive variables
Accessibility defaults
PHASE 2
I built flexible components (buttons, inputs, navigation) with:
PHASE 3
I designed 35+ atomic + compound components, assembling them into reusable patterns that could drop into multiple DSL products with minimal customization.
DEVELOPER HANDOFF & ADOPTION
A design system only succeeds if it translates cleanly into production. To ensure adoption, I treated handoff as part of the system, not a downstream task.
Figma Dev Mode + annotations provided spacing, tokens, states, and behavior directly in design files
Storybook served as the source of truth for live components, enabling engineers to validate behavior and props
Coda documentation connected design intent to implementation details, usage guidelines, and QA checks
IMPACT & VALIDATION
Quantitative
Qualitative
REFLECTION
This was the first design system I built from the ground up, and it reshaped how I think about scale. Beyond components, the work required defining structure, constraints, and documentation that teams could rely on over time.