Design System / Project "Next"
05/ A new, integrated tech stack means creating a new design system to address technical & operational challenges.
Company / Client
Distinct AI
Year
2025
Type of Work
Full Stack
User Interface
Design System System Architecture
Experience Design
Legacy Debt: The team inherited legacy code and accumulated technical debt from a “build-as-we-go” mindset, resulting in multiple codebases and inconsistent conventions.
Outdated Processes: Operations originally relied on Google Spreadsheets rather than professional project management tools like Jira or Confluence. Design workflows were also limited, relying on schematics and mockups rather than integrated systems.
Strategic Goals for "Next": To address these issues, the project aimed to create an integrated tech stack, modernise the UI to boost revenue, signal intent to major tech partners (like Intel and AMD), and transition toward subscription and API-driven revenue models.
Pain Point: Shown above is a sample schematic to communicate intent and align stakeholder understanding.
Outdated Processes: Design, code, product, marketing were using separate tools.
A key focus is simplifying workflows by using Jira for project management, Confluence as a single source of truth, and Figma for the design system.
I began to turn Project "Next" concepts (above) into reality by building a design system based on Atomic Design, progressing from atoms, molecules, organisms, templates, pages (below).
Leveraging Brad Frost's Atomic Design methodology, we are building scalable, reusable systems where changes to atoms (such as colours) propagate automatically across molecules, organisms, and pages.
We're evolving to reusable components from buttons, icons, typography styles, color swatches, input fields, checkboxes, radio buttons, sliders, tags, badges, tooltips to links (below).
Measure Twice, Cut Once
The Human Touch
Distinct AI's design system was developed in close collaboration between development and design.The team inherited legacy code, technical debt from a "build-as-we-go" philosophy, resulting in multiple codebases and inconsistent theming conventions.
Our 3-Step Collaborative Approach
Step 1 - Theming: This step focused on the perception of "newness" to align with the company’s rebrand and the release of new applications like Render FX and Model Hub.
Step 2 - Layout (Components Library): This involved building standardized front-end building blocks (fonts, colors, control types) and detaching rigid UI elements into modular containers using QT. This stage also focused on aligning back-end naming structures with the UI
Step 3 - System Integration: The final phase established a responsive grid and platform-agnostic use cases. It leveraged heavy Figma integration, using Primitive and Semantic Variables for typography, color, and corner radius to enable features like dark mode and highly customizable workspace environments