Radius
The Radius is an opinionated assemblage of open-source tools and libraries that allow you to accelerate your design system. The choice of tools, their composition, and a set of foundational components guides you on how to build a constraint-based system.
What Does It Include?
Radius is a seed project and not a library. It is built with composition in mind. You can replace any component or any part of the stack or create new things to extend it.
- The design kit is built and maintained in Figma. It includes a set of foundational components and a reference architecture.
- The component library bootstrapped using TSDX, mirrors the Figma components and is built using Typescript, React, Styled System and Styled Components.
- Storybook acts as both the developer sandbox and the documentation platform.
- Chromatic runs visual regression tests, CircleCI runs all other forms of testing and Netlify builds and deploys Storybook as a static site.
Definitions
- Design Kit — a library of shared styles, symbols or components that can be used by product teams to design or prototype new experiences.
- Design Tokens — the overall visual design of a digital product. This foundation defines characteristics such as typography, colors, icons, spacing and information architecture.
- Component Library — a set of JavaScript components that are version controlled and are composed to build one or more products.
- Documentation — a set of guidelines on how to consume the Design System, design and dev considerations and detailed documentation for each component. The documentation site often includes a live playground that is aimed at the consumers to try out components in the browser.
- Developer Sandbox — a tool for developing components in isolation, document use cases and write structural or visual tests.