Radius: A quick start tool for your
design system
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.