Design System · AI
Used AI to migrate the entire system from primitive to semantic tokens, and built a workflow that lets product teams go from design straight into code.
- Client
- SoSafe
- Role
- Senior Design System
- Team
- 1 designer (me), 3 engineers
- Year
- 2024
SoSafe is a human-centred cybersecurity platform that trains employees to recognise and respond to threats through gamified microlearning and phishing simulations, grounded in behavioural science and meeting standards such as ISO 27001 and GDPR.
Context
I joined during a period of rapid growth, with no mature design system or culture of working with one. I worked cross-functionally with design and engineering to lay the foundations: tokens, components, governance and AI implementation.
Objective
Restructure the token architecture and set clear governance, with a strong focus on AI, so the system works as a business enabler, not just a visual toolkit, and becomes the foundation for the rebrand and the product’s evolution.
Solution
A primitive → semantic token architecture on top of Mantine, a governance model and contribution process, and existing libraries (Mantine, Tabler Icons, Apache Charts) to move faster. AI (Supernova + Claude + Figma Make) built into the system’s own workflow, to migrate tokens and to let designers prototype in code.
- Component contracts that define each component’s properties, variants and states, so design and development build from the same definition.
- A code-to-Figma skill that turns coded components into Figma components automatically, with no manual rebuilding.
- Drift detection that compares Figma and code and catches inconsistencies before they reach users.
- Automated accessibility checks for contrast and keyboard navigation on every component, for a WCAG-compliant product.
- Quality gates that label each component as draft, beta or stable, so teams know at a glance what’s ready.
- Machine-readable rules and tools, so AI-generated code follows brand and quality standards from the start.
- Led a multi-month restructuring of the product’s navigation and information architecture.
- Made sure every page was properly indexed and structured for usability, beyond surface-level changes.
- Redesigned the layout to improve flow between pages and give content more room.
- Validated the new architecture with product and engineering against real usage patterns.
- Used the design system as the single source of truth to keep the new structure consistent.
- Semantic tokens for colour, typography and shadows across the whole product.
- Existing libraries (Mantine, Tabler Icons, Apache Charts) instead of building from scratch, to deliver faster without losing quality.
- A naming and structure convention that keeps the token system scalable as the product grows.
- “Build vs. leverage” decisions balanced to maximise team velocity.
- The technical foundation that made the later token migration and AI workflows possible.
- Used primitive tokens and Mantine’s theming engine to move the whole interface from turquoise to a deeper green without rebuilding component styles.
- Delivered a fully functional, on-brand MVP on time while keeping the palette flexible.
- Prioritised speed without sacrificing scalability, laying the groundwork for the semantic layer.
- Decided where to allow exceptions and where to enforce consistency under time pressure.
- Validated the new palette with product and brand stakeholders.
- Workshops and meetings to align stakeholders on the goals and benefits of the design system.
- Cross-functional collaboration for a shared vision of the design goals.
- Communication channels for ongoing alignment and feedback.
- Clear roles and responsibilities for accountability and ownership.
- Data to show the design system’s impact on business outcomes.
Want results like these for your team?
Book a call →