Codecks

Project Area

SAAS

B2B

Project management

Cornerstones

Figma

Tokens Studio

Design Sprints

Services

UI Design

Design Systems

Feature Discovery

Project Area

SAAS

B2B

project management

Cornerstones

Figma

Tokens Studio

Design Sprints

Services

UI Design

Design Systems

Feature Discovery

Project Area

SAAS

B2B

Project management

Cornerstones

Figma

Tokens Studio

Design Sprints

Services

UI Design

Design Systems

Feature Discovery

Project Area

text

text

text

Cornerstones

Figma

Tokens Studio

Design Sprints

Services

UI Design

Design Systems

Feature Discovery

Project Area

text

text

text

Cornerstones

Figma

Tokens Studio

Design Sprints

Services

UI Design

Design Systems

Feature Discovery

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.

Unique for Codecks

By interchanging container themes, element themes and component tokens in day and night mode, designers and developers have unprecedented control.

What we delivered

Token architecture & themes:

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 fro control and playfulness at the same time.

Refined features & components

As Codecks continuosly grows and implements new features, we rebuild core functions of the platform in delivery and work on future UIs in discovery.

Design-to-development pipeline

Built a frictionless workflow for translating Figma designs into pixel perfect front-end code ensuring clarity, consistency, and zero surprises.

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.

Tell us about your project, we are always curious about your vision.

© 2025 Inverse Digital Design Studio GmbH

Tell us about your project, we are always curious about your vision.

© 2025 Inverse Digital Design Studio GmbH

Tell us about your project, we are always curious about your vision.

© 2025 Inverse Digital Design Studio GmbH

Tell us about your project, we are always curious about your vision.

© 2025 Inverse Digital Design Studio GmbH