Skyweaver
2024
How I scaled Sequence's design system across products and teams
Standardizing foundations, governance, and dev handoffs to reduce design drift and improve product quality
Overview
Sequence's design system was a loose collection of Figma components shared across several products. I rebuilt it into a documented, tokenized, governed system, built in parallel with feature work rather than as a dedicated sprint.
My contributions
An audit showed why nobody trusted it: missing templates, conflicting variant names, tokens that couldn't theme, documentation that wasn't dev-friendly, and no process for proposing a change. The result was drift, with every product moving a little further from every other one.
My Role
I set one documentation template every component had to follow, restructured the variables into primitive and semantic tokens aligned with Tailwind so design and code shared a vocabulary, and rebuilt the interactive components with consistent props, naming and sizing. Then I made it stick: Figma branching with peer review, criteria for what earns a place in the system, handoffs linked to GitHub tickets, and a bi-weekly sync to track design debt.
Team
Led the revamp, 1 of 2 designers. Worked with 2 front-end developers across 3 products. Reported to CTO.
Users
Sequence product designers & front-end developers.
Timeline
2025 · ~6 months, made in parallel with other projects.
Product
Season pass and daily quest systems in a free-to-play trading card game
Impact
86 → 40
Components consolidated, every one documented
4 of 5 products
Migrated to the new system; every product since starts on it.
0 dedicated sprints
Shipped in parallel with feature work over 6 months
Problem & Discovery
We audited the current design system to understand its problems
The audit revealed a number of critical gaps that made the system difficult to trust, scale, or maintain:
- Templates were missing, outdated, or inconsistently used
- Components had unclear or conflicting variant names
- No shared process existed for proposing or updating parts
- UX handoffs were ad hoc and lacked clear workflows
- Tokens weren’t structured for theming or reuse
- Documentation wasn’t standardized or dev-friendly
Defining the problem:
”How might we build a system that brings order to component maintenance and aligns design and dev workflows”
We aligned on next steps...
Our specific actionable next steps were:
- Establishing documentation templates for all components
- Introduce branching workflows in Figma
- Standardize UX ticket handoff templates linked to GitHub issues
- Formalize a governance model for contribution and approval
- Research 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
Standardizing every component through a shared documentation template
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.
⭐ Value added: Reduced onboarding time and design ambiguity by making every component follow a consistent, well-documented structure.
Variables & Tokens
By then, the new token feature from Figma was just released and we wanted to use it on our new design system to ensure we can do a smooth transition between dark and light modes.
We aligned our tokens with Tailwind to bring consistency and clarity across platforms
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 tokens – Based on Tailwind conventions: spacing scales, t-shirt sizing, border radii, etc.
Semantic tokens – Used to define purpose-driven styles like primary/secondary colors, input states, and light/dark mode themes.
Component improvements
We refactored components using Figma’s best practices
We rebuilt all interactive components with consistent properties, naming logic, and states. Each variant is now cleanly organized using Figma’s structured props, making overrides faster and editing more intuitive.⭐ Value added: Designers and developers could now work faster with less back-and-forth thanks to cleaner props and predictable interaction logic.
We standardized atomic sizing for consistency and scale
We defined a shared sizing system for buttons, toggles, and icons based on Tailwind conventions. Each size maps to specific dimensions and spacing, ensuring consistency, accessibility, and better alignment across the UI.⭐ Value added: Made easier to scale across breakpoints and component types.
Governance Workflow
To prevent regressions and keep workflow smooth, we introduced a formal governance model:
🌱 Figma Branching with peer-review for all new component work
🌱 Defined criteria for inclusion (must be atomic or reusable in handoffs)⭐ Value added: Prevented regressions and design drift by setting clear quality gates and enabling peer-reviewed contributions.
New dev handoff files
We also revamped how design-to-dev handoffs are done.
• Each design handoff is linked to a GitHub ticket for better traceability
• Introduced a handoff template with usage notes, visuals, and context
⭐ Value added: Reduced guesswork for developers by packaging flows, specs, and tickets into a single, ready-for-dev handoff.
Collaboration & Rituals
A simple ritual to keep the system evolving
We held a bi-weekly design system sync to review proposals, share feedback, and track design debt. This recurring touchpoint kept the system active, relevant, and collaborative.
Learnings
This project proved that strong documentation and shared structure are essential for scaling design in async environments. With clearer specs and a consistent system, delivery became faster, smoother, and more predictable.
Thank you for reading :)
Back to home
Skyweaver
2024
How I scaled Sequence's design system across products and teams
Standardizing foundations, governance, and dev handoffs to reduce design drift and improve product quality
Overview
Sequence's design system was a loose collection of Figma components shared across several products. I rebuilt it into a documented, tokenized, governed system, built in parallel with feature work rather than as a dedicated sprint.
The problem
An audit showed why nobody trusted it: missing templates, conflicting variant names, tokens that couldn't theme, documentation that wasn't dev-friendly, and no process for proposing a change. The result was drift, with every product moving a little further from every other one.
What I did
I set one documentation template every component had to follow, restructured the variables into primitive and semantic tokens aligned with Tailwind so design and code shared a vocabulary, and rebuilt the interactive components with consistent props, naming and sizing. Then I made it stick: Figma branching with peer review, criteria for what earns a place in the system, handoffs linked to GitHub tickets, and a bi-weekly sync to track design debt.
My Role
Lead Product Designer. Led the revamp with the design team and eng team.
Team
Led the revamp, 1 of 2 designers. Worked with 2 front-end developers across 3 products. Reported to CTO.
Users
Sequence product designers & front-end developers.
Timeline
2025 · ~6 months, made in parallel with other projects.
Product
Season pass and daily quest systems in a free-to-play trading card game
Impact
86 → 40
Components consolidated, every one documented
4 of 5 products
Migrated to the new system; every product since starts on it.
0 dedicated sprints
Shipped in parallel with feature work over 6 months
Problem & Discovery
We audited the current design system to understand its problems
The audit revealed a number of critical gaps that made the system difficult to trust, scale, or maintain:
- Templates were missing, outdated, or inconsistently used
- Components had unclear or conflicting variant names
- No shared process existed for proposing or updating parts
- UX handoffs were ad hoc and lacked clear workflows
- Tokens weren’t structured for theming or reuse
- Documentation wasn’t standardized or dev-friendly
Defining the problem:
”How might we build a system that brings order to component maintenance and aligns design and dev workflows”
We aligned on next steps...
Our specific actionable next steps were:
- Establishing documentation templates for all components
- Introduce branching workflows in Figma
- Standardize UX ticket handoff templates linked to GitHub issues
- Formalize a governance model for contribution and approval
- Research 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
Standardizing every component through a shared documentation template
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.
⭐ Value added: Reduced onboarding time and design ambiguity by making every component follow a consistent, well-documented structure.
Variables & Tokens
By then, the new token feature from Figma was just released and we wanted to use it on our new design system to ensure we can do a smooth transition between dark and light modes.
We aligned our tokens with Tailwind to bring consistency and clarity across platforms
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 tokens – Based on Tailwind conventions: spacing scales, t-shirt sizing, border radii, etc.
Semantic tokens – Used to define purpose-driven styles like primary/secondary colors, input states, and light/dark mode themes.
Component improvements
We refactored components using Figma’s best practices
We rebuilt all interactive components with consistent properties, naming logic, and states. Each variant is now cleanly organized using Figma’s structured props, making overrides faster and editing more intuitive.⭐ Value added: Designers and developers could now work faster with less back-and-forth thanks to cleaner props and predictable interaction logic.
We standardized atomic sizing for consistency and scale
We defined a shared sizing system for buttons, toggles, and icons based on Tailwind conventions. Each size maps to specific dimensions and spacing, ensuring consistency, accessibility, and better alignment across the UI.⭐ Value added: Made easier to scale across breakpoints and component types.
Governance Workflow
To prevent regressions and keep workflow smooth, we introduced a formal governance model:
🌱 Figma Branching with peer-review for all new component work
🌱 Defined criteria for inclusion (must be atomic or reusable in handoffs)⭐ Value added: Prevented regressions and design drift by setting clear quality gates and enabling peer-reviewed contributions.
New dev handoff files
We also revamped how design-to-dev handoffs are done.
• Each design handoff is linked to a GitHub ticket for better traceability
• Introduced a handoff template with usage notes, visuals, and context
⭐ Value added: Reduced guesswork for developers by packaging flows, specs, and tickets into a single, ready-for-dev handoff.
Collaboration & Rituals
A simple ritual to keep the system evolving
We held a bi-weekly design system sync to review proposals, share feedback, and track design debt. This recurring touchpoint kept the system active, relevant, and collaborative.
Learnings
This project proved that strong documentation and shared structure are essential for scaling design in async environments. With clearer specs and a consistent system, delivery became faster, smoother, and more predictable.
Thank you for reading :)
Back to home
Skyweaver
2024
How I scaled Sequence's design system across products and teams
Standardizing foundations, governance, and dev handoffs to reduce design drift and improve product quality
Overview
Sequence's design system was a loose collection of Figma components shared across several products. I rebuilt it into a documented, tokenized, governed system, built in parallel with feature work rather than as a dedicated sprint.
The problem
An audit showed why nobody trusted it: missing templates, conflicting variant names, tokens that couldn't theme, documentation that wasn't dev-friendly, and no process for proposing a change. The result was drift, with every product moving a little further from every other one.
What I did
I set one documentation template every component had to follow, restructured the variables into primitive and semantic tokens aligned with Tailwind so design and code shared a vocabulary, and rebuilt the interactive components with consistent props, naming and sizing. Then I made it stick: Figma branching with peer review, criteria for what earns a place in the system, handoffs linked to GitHub tickets, and a bi-weekly sync to track design debt.
My Role
Lead Product Designer. Led the revamp with the design team and eng team.
Team
Led the revamp, 1 of 2 designers. Worked with 2 front-end developers across 3 products. Reported to CTO.
Users
Sequence product designers & front-end developers.
Timeline
2025 · ~6 months, made in parallel with other projects.
Product
Season pass and daily quest systems in a free-to-play trading card game
Impact
86 → 40
Components consolidated, every one documented
4 of 5 products
Migrated to the new system; every product since starts on it.
0 dedicated sprints
Shipped in parallel with feature work over 6 months
Problem & Discovery
We audited the current design system to understand its problems
The audit revealed a number of critical gaps that made the system difficult to trust, scale, or maintain:
- Templates were missing, outdated, or inconsistently used
- Components had unclear or conflicting variant names
- No shared process existed for proposing or updating parts
- UX handoffs were ad hoc and lacked clear workflows
- Tokens weren’t structured for theming or reuse
- Documentation wasn’t standardized or dev-friendly
Defining the problem:
”How might we build a system that brings order to component maintenance and aligns design and dev workflows”
We aligned on next steps...
Our specific actionable next steps were:
- Establishing documentation templates for all components
- Introduce branching workflows in Figma
- Standardize UX ticket handoff templates linked to GitHub issues
- Formalize a governance model for contribution and approval
- Research 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
Standardizing every component through a shared documentation template
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.
⭐ Value added: Reduced onboarding time and design ambiguity by making every component follow a consistent, well-documented structure.
Variables & Tokens
By then, the new token feature from Figma was just released and we wanted to use it on our new design system to ensure we can do a smooth transition between dark and light modes.
We aligned our tokens with Tailwind to bring consistency and clarity across platforms
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 tokens – Based on Tailwind conventions: spacing scales, t-shirt sizing, border radii, etc.
Semantic tokens – Used to define purpose-driven styles like primary/secondary colors, input states, and light/dark mode themes.
Component improvements
We refactored components using Figma’s best practices
We rebuilt all interactive components with consistent properties, naming logic, and states. Each variant is now cleanly organized using Figma’s structured props, making overrides faster and editing more intuitive.⭐ Value added: Designers and developers could now work faster with less back-and-forth thanks to cleaner props and predictable interaction logic.
We standardized atomic sizing for consistency and scale
We defined a shared sizing system for buttons, toggles, and icons based on Tailwind conventions. Each size maps to specific dimensions and spacing, ensuring consistency, accessibility, and better alignment across the UI.⭐ Value added: Made easier to scale across breakpoints and component types.
Governance Workflow
To prevent regressions and keep workflow smooth, we introduced a formal governance model:
🌱 Figma Branching with peer-review for all new component work
🌱 Defined criteria for inclusion (must be atomic or reusable in handoffs)⭐ Value added: Prevented regressions and design drift by setting clear quality gates and enabling peer-reviewed contributions.
New dev handoff files
We also revamped how design-to-dev handoffs are done.
• Each design handoff is linked to a GitHub ticket for better traceability
• Introduced a handoff template with usage notes, visuals, and context
⭐ Value added: Reduced guesswork for developers by packaging flows, specs, and tickets into a single, ready-for-dev handoff.
Collaboration & Rituals
A simple ritual to keep the system evolving
We held a bi-weekly design system sync to review proposals, share feedback, and track design debt. This recurring touchpoint kept the system active, relevant, and collaborative.
Learnings
This project proved that strong documentation and shared structure are essential for scaling design in async environments. With clearer specs and a consistent system, delivery became faster, smoother, and more predictable.
Thank you for reading :)
Back to home