Radius Design System

Free

Dark Mode, Design Tokens

Radius Design System: The Ultimate Design System Accelerator

The Radius Design System by Rangle.io works as a powerful “meta-framework.” It quickly creates custom, enterprise-grade design systems. Radius is not a typical, finished UI kit; instead, it provides open-source tools and proven blueprints. Organizations use these resources to efficiently govern, scale, and maintain a proprietary system. Therefore, your teams gain maximum flexibility and control. Rangle.io built this approach based on years of experience. We successfully deployed large-scale design systems for major global organizations, which informed the building of this framework.

Building Blocks and Core Technology

The core architecture uses modern, flexible tooling. We build components using React and TypeScript. Specifically, Radius 3.0 relies on shadcn/ui, a component collection that uses Radix UI Primitives for essential unstyled logic and accessibility. Furthermore, we style everything with Tailwind CSS variables. This modular, token-driven foundation makes the architecture highly adaptable.

Synchronizing Design and Code with Tokens

The system is fundamentally token-driven. This approach achieves a high degree of theming and customization, making the system ideal for complex multi-brand or multi-theme applications. Design teams use Token Tango, a Figma plugin developed by Rangle.io, to push, verify, and version design tokens. In addition, the Radius CLI (Command Line Interface) extracts these tokens directly from Figma. This action populates a new design system boilerplate, ensuring perfect synchronization across design and development environments.

Native Dark Mode support is facilitated by the reliance on CSS variables. The system simply swaps these variables to implement various themes, including Light and Dark Modes, as well as high-contrast variations. The architecture automatically inherits this feature from the Tailwind/Radix foundation. To further aid in governance, Radius Tracker is a separate, fully automated tool. This tool collects component adoption statistics from a codebase. In summary, the Radius Design System meta-framework accelerates product design and development across the enterprise.