Building the Deeds design system
Creating a scalable design system for a new wearable tech platform.
Deeds is a wearable tech startup reimagining the friendship bracelet through connected technology. Users send energy to each other daily to unlock collectibles & experiences in the app and in the real world. When I started my contract, Deeds had a growing product, a strong brand, and no formal design system. Screens had been designed and built quickly to support live experiments, which meant the product worked, but the foundations were fragile.
My role was to work backwards from what already existed, extract the underlying design logic, and turn it into a scalable system that product, brand, and engineering could rely on.
Deeds was growing quickly, but design and engineering were struggling to keep up.
The product had:
• No defined typography scale or colour system
• No shared components in Figma
• No tokens or variables feeding into code
• Engineers recreating UI from screenshots
• Designers duplicating screens and tweaking values by ey
This led to:
• Inconsistent UI across features
• Visual drift away from the brand
• Slower iterations
• Bottle neck in the design phase
The challenge was not just to create a design system, but to retrofit one onto a live product without stopping development.
Contracted sole Senior Product Designer, responsible for:
• Auditing and reverse engineering the existing UI
• Defining fonts, colours, spacing, and motion from what was already built
• Creating Figma variables, tokens, and components
• Aligning design tokens with the developer’s existing code
• Rebuilding product screens using the new system
• Identifying gaps, missing assets, and areas needing more design work
I started by auditing the entire product and existing design files.
Key findings:
• The same card component had different spacing, radius, and shadow across features
• Colours were being used inconsistently, especially for surfaces & text
• Text styles & sizes were being used inconsistently
• Relying on hard coded values instead of reusable styles
• Engineers were rebuilding components screen by screen instead of reusing them
I also mapped:
• Core user actions like sending energy, viewing worlds, opening the wallet
• Repeated UI patterns like cards, modals, sheets, and toasts
• Brand moments that needed to feel special, such as gifting, streaks, and achievements
This helped define what needed to be systemised versus what could remain expressive.
After compiling the actions from my audit, I began building out a new system for Deeds.
1. Define primitives
I captured raw values as primitive tokens:
• Colour values
• Font sizes and weights
• Spacing units
• Border radii
• Opacity and elevation
2. Map to semantics
Those primitives were then mapped into semantic meaning:
• Brand
• Surface
• Text
• Buttons
• Status
• Energy
• Icons and collectibles
3. Align with engineering
I worked directly with the developer to align these tokens with what already existed in the codebase. Hard coded values were replaced with semantic tokens so design and dev were using the same source of truth.
4. Prove the system by rebuilding the product
Once the system existed, I recreated all core pages using only design system components. This validated what worked, revealed gaps, and showed exactly where the product needed more design effort or new assets.
Building this system fundamentally changed how I was able to work at Deeds. Once the primitives, semantics, and components were in place, I could move incredibly fast as a product designer. New features were assembled from existing building blocks instead of being designed from scratch, which meant less rework, clearer handover, and higher quality output.
The system will continue to be super valuable to the team after my contract. Because design and engineering now share the same tokenised language, Deeds can iterate, experiment, and evolve the product without breaking consistency or rebuilding foundations each time. It gives the team speed now and flexibility for whatever comes next.