We created a design system that fits a variety of situations, without being needlesly complicated.
Simple to use, easy to scale
Components and variants
Styles and variables
Posibilities 😎
Variables are at the heart of our work. Colors, spacings, radius, sizes, themes and components – everything is created using Variables.
What does it mean?
It means that if you’re using our design system, you can do things like these in seconds:
You can switch a frame between devices – sizes, spacings and components will update automatically.
You can switch between light and dark modes for any screens without having to design a thing.
You can add entire color palettes for the project at any time, with just a few clicks, thanks to our Semantic system.
Want to make your project more compact? You can change all spacing and radius values in one place.
Our color system is divided into Primitive and Semantic groups. Thanks to that, you can use a ‘strong’ text style across your designs instead of having to remember to use the ‘Grey-900’ color everywhere.
Fancy a fresh paint? Change the primary color in one place and see the entire design system transform.
Ready to use text styles fitting various design needs. From punchy Hero sections to legible body text. All sizes, line heights and weights were carefully chosen to ensure all text is nice and readable.
We created an extensive library of smart, adaptable and configurable interface components. All created using auto layouts, smart variants, properties, variables and styles.
You can switch between light and dark modes for any screens with just a click of a button. Our variables can change the whole color palette from light to dark on any screen you design.
Accessible forms
You can switch a frame between devices – sizes, spacings and components will update automatically.
