Overview
I was mainly in charge of visualization in Spatial. I built from 0 to 1 in the design system, taking on the components that are in charge of the product's main visual identity: logos, typos, and buttons.
Spatial is a platform that allows non-tech users to build and share virtual experience. It primarily serves as a SaaS tool for enterprise teams or as a creation tool for Devs. I added detailed specs to the components for better communication with the ENGs in the team.
Role
Team
3 Designers
Timeline
Background
From fragmented patterns to a shared system
As Spatial expanded across conventional web, mobile, and immersive environments, similar UI patterns began appearing in different forms across the product.
Without a shared system, maintaining consistency and managing these patterns across design and engineering became increasingly difficult.
Challenge and Approach
Building a system that scales with the product
01
Cohesion across contexts
Spatial spans immersive and conventional interfaces, requiring one product language across fundamentally different environments.
01
Shared foundation, adaptive expression
We defined core visual rules consistent and tried to iterate them on the immersive environment to find the most proper values.
02
Flexibility within constraints
As use cases expanded, the system needed to support variation without fragmenting into one-off patterns.
02
Controlled configurability
I built reusable components around recurring patterns, with focused properties and states for flexible adaptation.
03
Alignment beyond design
The system needed to translate design intent clearly across design and engineering.
03
A shared system language
I used semantic tokens, consistent naming, and explicit specs to turn design decisions into shared rules.
What I value here
The design system was built on
four foundational principles.
Token Structure
Tokenized colors increase productivity as they are scalable and systematically consistent. Each element has a accessible name, making communication with designers and devs much smoother.
I picked high saturated colors to express exciting and gamified experience, while conveying a variety of experiences created by creators and enterprises.
Structure
primitive
to semantic
semantic
to component
Token to Component
Components reference semantic tokens instead of raw values, enabling consistent updates across the system.
Typo
Documented specs for better communication with devs.
Bold fonts make the product energetic and improve the legibility, and naturally reveal the dynamic feeling to gamified experience. A moderate round makes the product friendlier and more accessible. It conveys "not difficult" for creators and delivers an unduly casual sense of balance to enterprise users.
Below each types, I added detailed specs of the font. This exposes basic font data to the surface, making it easier for engineers in the team to understand the typo system.
Configurability
Designers can easily and intuitively configure components in figma.
Components were configured through a simple set of properties instead of manual modifications. This reduces duplication, preserves consistency, and enables the design system to scale efficiently.
Button
Toast
Icon Instance
Modal Instance
Input
System to Product
Immersive environments
overlaying the system
We designed it to blend seamlessly into the immersive space, ensuring visual consistency between the space and the interface. By creating a subtle boundary between the space and the interface to keep legability, we iteratively refined and incorporated the value of making background projection.
