Chronos is a headless design system built for speed and flexibility, ideal for small teams and startups needing to develop web applications efficiently. The design system has been built brick by brick for the past 4 years as an internal tool for Ur Solutions. In 2024 we decided to publish the design system to the Figma community.
Background
When i started working at Ur Solutions as the first designer, we didn’t have a clear process of creating high quality design that is easy to understand for both users and developers. There are tons of design systems out there, but most of them were too granular or didn’t exactly fit into our process. Being a small team, we wanted to create a light-weight design system that allows us to create unique designs fast that are easy to adapt, modify and maintain. Throughout the project i have:
• Continuously gathered insight and defined requirements
• Created and maintained a component library in Figma
• Created foundations for styles containing grids, breakpoints, colors, typography, elevation and border radius guidelines.
• Created a system containing primitive and semantic design tokens
The design system
Given the prerequisites we landed on having the design system in a single file in Figma, containing both foundations such as colors and typography and all the components with their variants, separating them into pages. We mostly wanted to have basic components (atoms and molecules) in our system, giving more creative room for complex components/organisms and templates tailored to each application.
Screenshot of component page in the design system file in Figma
System foundations
The foundations of the design system contains documentation of grids, colors, typography, elevation and borde radius. Colors, typography and border radius is also tokenized, giving us the flexibility to create themes within Figma with a few clicks.
Visualization of a color theme in Figma.
Components
The design system contains 30 main component pages, mostly consisting of atoms and molecules, with a total of 559 components counting all variations.
Basic button component from the design system.
Results
Throughout the years i have continuously developed, maintained, and applied the design system to multiple applications and websites. In 2024 we decided to release the Figma file to the community.
You can get free access here: chronos-ds.com