Radicle Design System

Consistency By Design

Company

Radicle

Role

Design Audit, Design System, Design Tokens

Year

2024

Tags

Design System, UI, Front End

Tech

Figma, Tokens Studio, Style Dictionary, Svelte

Radicle design tokens

Summary

Complete design system for the Radicle ecosystem. Design tokens, component library, Figma integration, CSS variables, icon system — connecting design tooling directly to code.

Problem

Radicle Explorer is open-source and anyone can deploy it. Design consistency is particularly challenging in distributed open source projects with diverse contributors.

Process

UI audit → color system + typographic scale + components in Figma → stakeholder sign-off → token export pipeline (Tokens Studio + Style Dictionary) → Svelte implementation. Tokens stored in a shared Radicle repo as single source of truth.

Outcome

Adopted by three Radicle clients at the time: the web app, the desktop app, and a mobile app that was never released. It replaced per-app styling with one token source the three shared. Daniel ran the audit, designed the system and built the Figma-to-CSS pipeline. Radicle has since moved on and the system is no longer in use.

Highlights

• Semantic tokens create a shared language between designers and developers
• Components in Figma match production behaviour exactly
• Dark and light mode support
• Style pays homage to 90s programming interfaces — developer tools with character

Best for

• Companies scaling a design system
• design-engineering collaboration
• platform teams
• open-source product work