Project Overview
As Sequence scaled, so did the need for a more unified and purposeful design system. What began as a loose collection of components evolved into a structured initiative to create a scalable, well-documented, and developer-friendly foundation for all product teams.
This revamp wasn’t a dedicated sprint — it was a parallel effort, gradually built alongside other design and product priorities. Over six months, we incrementally evolved the system while shipping features, ensuring it remained grounded in actual use cases.
The project focused on bringing clarity, consistency, and collaboration to our design practices — enabling faster decision-making, smoother handoffs, and a shared visual language across teams. It also laid the groundwork for a design system culture rooted in documentation, governance, and continuous evolution.
My role: I Led the design system revamp in collaboration with other designers, covering architecture, documentation, Figma optimization, and developer handoffs.
Ux tools: Figma component properties, variable tokens, docs templates, dev handoff specs
Time frame: ~6 months (designed gradually as a side initiative while supporting other projects)
Ux tools: Figma component properties, variable tokens, docs templates, dev handoff specs
Time frame: ~6 months (designed gradually as a side initiative while supporting other projects)
* To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Sequence or any other partners involved in the project.
____________
Discovery & Framing the Problem
Before any components were touched, the design team conducted a full UX audit of the existing design system to understand what was working, what was missing, and where the friction lived for both designers and developers.
Key gaps identified
• Design system templates were inconsistent or missing altogether
• Styleguide foundations lacked clear documentation and semantic consistency
• Component libraries were disorganized and inconsistent in naming and variant structure
• Governance systems didn’t exist — there was no transparent decision-making process for adding or updating components
• UX workflows were ad hoc and lacked defined handoff points
• Tickets and communication weren’t standardized across sprints
Turning audit into action
This audit became our blueprint — aligning the team around specific, actionable next steps.
• Establishing documentation templates for all components
• Introducing branching workflows in Figma
• Standardizing UX ticket handoff templates linked to GitHub issues
• Formalizing a governance model for contribution and approval
• Researched other established design systems like Apple's human interface guidelines and Google's Material Design.
• Defining a new token structure using Tailwind-based primitives and semantic tokens
____________
Foundations & Framework
Example of a component sheet
We rebuilt the system with a documentation-first mindset, structuring every component around five key pillars:
1. Documentation – Clear overview of usage, behavior, accessibility, and relevant information
2. Component Sheet – Source of truth for the component and all variants organized by states and variants.
3. Specs – Padding, layout, and interaction logic ready for dev handoff
4. Best Practices – Dos and don’ts with contextual screenshots for visual alignment. Useful not only for developers but also for other designers joining the team.
This ensured that designers and devs had everything they needed right in Figma.
____________
Variables & Tokens Redesign
Design Variables (primitive vs semantic tokens)
In collaboration with our developers, we aligned on a shared system language by adopting Tailwind as the foundation for both code and design. This ensured consistency and improved handoff clarity between teams.
We restructured our variables into two distinct layers:
Primitive Variables – Based on Tailwind conventions: spacing scales, t-shirt sizing, border radii, etc.
Semantic Variables – Used to define purpose-driven styles like primary/secondary colors, input states, and light/dark mode themes.
This dual structure made the system atomic for builders and semantic for branding, allowing it to scale confidently across multiple themes, products, and contexts.
Examples of token variables being applied on surfaces (dark vs light mode)
____________
Component Improvements
Unified component states nomenclature + dark vs light mode component comparison
We refactored all components to align with Figma’s modern best practices:
• Consistent use of boolean toggles, property controls, and variant sets
• Optimized layer structure for cleaner editing and override logic
• Formalized component sizes and interaction states to create UI rhythm
• All icons were redesigned or restyled for consistent stroke weight and visual language
Iconography guidelines
Governance Workflow
To prevent regressions and keep quality high, we introduced a formal governance model:
• Figma Branching for all new component work
• Design System Contribution Flow with approval checkpoints
• Defined criteria for inclusion (must be atomic, reusable, or used in 2+ handoffs)
• Visual flowchart to clarify what gets into the system vs. what stays in prototype space
Dev Handoff Process
Example of a handoff file ready for dev
We also revamped how design-to-dev handoffs are done:
• Each design handoff is now linked to a GitHub ticket number, allowing traceability
• Introduced a handoff file template with usage notes, state visuals, and context
• Implemented Figma Code Connect together with devs to directly inspect and pull component data, reducing back-and-forth
This made collaboration smoother, and gave devs more autonomy during implementation.
Collaboration & Rituals
To maintain system quality over time, we introduced a bi-weekly design system sync — a recurring touchpoint for:
• Reviewing proposed components or changes
• Sharing usage feedback from designers
• Prioritizing cleanup and improvements
• Tracking design debt across products
This lightweight ritual helped keep the design system alive and evolving — not just a static file.
Outcomes & Reflections
This project dramatically increased confidence in the Sequence Design System. Components became easier to use, handoffs smoother, and our UI more polished across surfaces.
• Design files were easier to maintain and scale
• New team members were onboarded faster with standardized templates
• Developers reduced rework thanks to better specs and Code Connect integration
• Visual consistency improved across all apps
. . .
