Skip to main contentSkip to footer
Contact Us →

Radius: A quick start tool for your  
design system

The Radius design system starter kit is a collection of open-source tools and libraries that guide and help you to build your design system faster. Design systems need to match your brand and product needs, and your current and future digital workflows. Too much, too little, too complex, or too off-brand, and you will fight your design system as much as benefit from it.

Why use Radius to build your design system?

  • Eliminates ⅔ of time and money needed to build your core design system
  • Lays the foundation for scaling to greater levels of business reuse
  • Provides the workflows needed for adoption across internal teams
  • Enables better flexibility and less complexity than off-the-shelf options
  • Created with best-in-class tooling for a great user experience

What will the Radius DS help me do?

Focus on the decisions that matter

Building a new design system from scratch isn't easy. You have several choices to make about frameworks, libraries, tooling and architecture. Radius takes the guesswork out of how to build the foundation of a scalable and easily adopted design system by ensuring you answer the important questions. Using Radius, you can start building an app today with a high quality, fully tested and carefully selected stack. It eliminates much of the mundane technical decision making, so you can focus on the business decisions.

Radius accounts for:

Branding Flexibility

Updating a brand built on a design system can be 10x less expensive than traditional models, and changes go live quickly.

Performance

Optimized designs and components solve the harder problems up front, and can be scaled across all your teams.

Accessibility

Your designs and foundational components are built to AA accessibility standards.

Automated QA

Robust testing is built into the customer experience layer and flows through to all projects that use your design system.

Build your app now, work on your design system later

Radius also works as a foundation for a greenfield application. You can start building an app today with all the tooling, infrastructure and a set of base components required for any application with a constraints-based system. As the need arises, you can easily extract your design system components from the application, since all the foundation work is already done!

Opinionated, yet flexible

Radius is a seed project and not a library. It is built with composition in mind. You can replace any component, any part of the stack or create new things to extend it.

Getting started

Design kit

Built and maintained in Figma, it includes a set of foundational components and a reference architecture.

Component Library

Designs created in Figma are mirrored by React components built using Typescript, Styled System and Styled Components.

Documentation & sandbox

Storybook acts as both the developer sandbox and the documentation platform.

Test, build & deploy

Chromatic runs visual regression tests. CircleCI runs all other forms of testing. Netlify builds and deploys Storybook as a static site.

The power of a design system, without starting from scratch

Remove the guesswork from building your design system, and reduce the risk and effort required to to get started. Let's talk about how Radius can work for you.

Subscribe to Rangle's Scaling Digital newsletter for the latest updates on design systems.