Case study 2 min read
Playful project management with unique design challenges
How can gamification and playfulness drive a project management system? We support Codecks in growing a unique platform, driven by a scalable design system with multi-dimensonial theming.
The challenge
Our client’s project management platform, built specifically for game designers, faced a puzzle: Managing playful, multi-dimensional themes alongside nearly a decade’s worth of legacy design and code. To build new features more reliably and also faster, we started to implement a scalable design system based on W3C design tokens. The kicker: Every element can be influenced by its context on screen, leading to a highly complex multi-dimensional theming structure.
What we’re proud of
For Codecks, we built a multi-dimension design tokens engine. By interchanging container themes, element themes and component tokens in day and night mode, designers and developers have unprecedented control over the UI design. As an example, form fields are fully adapting their background and foreground colors – based on the container they are placed upon and based on a light or dark appearance modifier. By setting up the complex rules on a design token architecture, developers could make use of that to speed up integrating very custom UIs in seconds.
What we delivered
Token Architecture & Theming
We developed a multi-dimensional token architecture and started to re-implement components into the new system. The combination of themes and cleverly designed component tokens allow for control and playfulness at the same time.
Refined Features & Components
As Codecks wanted to implement new features, we rebuilt core functions of the platform in delivery and worked on future UIs in discovery in parallel. As a bootstrapped product with a small team, lots of legacy designs have been in place, requiring careful refinements or bold redesigns.
Design-to-development pipeline – updated
Together with the in-house development team, Inverse created a frictionless workflow for translating Figma designs into pixel-perfect front-end code – ensuring clarity, consistency, and zero surprises. The latest stage of the engagement saw a switch from Figma to a code-first design approach, aided heavily by the design token setup.
Impact & Outlook
We delivered a flexible, powerful token architecture that enabled precise, nuanced theming across the entire platform. Our streamlined design-to-code pipeline enhanced collaboration, empowering both designers and developers. Existing features were refined, modularized, and tokenized, future-proofing the system and allowing the rapid rollout of new capabilities – while keeping the platform true to its playful roots. In the current phase, we continue to both deliver refined components and discover the UI and UX of new features.