Radius design system

When we were only 5 people between engineering, product and design, I created the Radius Design System. We have since scaled the team to 30+ and expanded the system to include dozens of components, and adapted it to fit our web product - which I also designed and built.

Client

Circle Medical

DELIVERABLES

Research Design

Year

2021-2025

Role

Design and build

Why build a design system?

Creating a design system for mobile apps ensures consistency, efficiency, and scalability. It unifies the user experience, reinforces brand identity, and reduces design inconsistencies. By offering reusable components and clear guidelines, it streamlines collaboration between designers and developers. This speeds up workflows, simplifies onboarding, and reduces technical debt. A good system also makes updates and iterations easier, helping teams adapt to user feedback quickly. Overall, it improves product quality, shortens time to market, and delivers a more cohesive and reliable user experience.

Foundations

This section contains the building blocks required to build out components and create the essentials of any good design. Foundations contain:

Typography
Color
Shadows
Iconography and illustrations
Grid systems

Components

These are the repeatable visual elements that actually make up screens. This is by far the most extensive piece of any design system, and include:

Appointment modules
Badges
Banners
Buttons
Chat elements
Checkboxes
Drawers
File upload
Logos
Modals
Navigation (headers and tabs)
etc.

Patterns

Groups of components and elements that recur in key moments of the app. Creating these as design system elements allow for quickly iterating across key screens while maintaining consistency. Examples in the Radius system include: