Design System
Highly scalable systems
Scroll down
Colors
A good color system brings coherence, clarity, and consistency to the entire product ecosystem. When colors are properly defined from the start, designing more complex elements becomes more agile and flexible.
Grid
The grid system is built to support responsive layouts across breakpoints, using a 12-column desktop grid, 8-column tablet grid, and 4-column mobile grid, all aligned to a 4px spacing system.
Corner radius
Corner radius values are standardized to support consistency, scalability, and flexibility across all interface components.
Text
Typography defines how content is read and understood across the interface.
Buttons
Buttons play a key role in the design system by defining actions, hierarchy, and interaction patterns across the product.
Spacing
Spacing is a key element of design: it organizes information and defines visual rhythm, structure, and hierarchy.
Iconography
Iconography is a fundamental element of interface design. It enables quick understanding of actions and content, reinforces visual hierarchy, and brings consistency to the system. A well-designed icon set reduces cognitive load and improves clarity and usability.
Dark & Light Mode
Dark mode and light mode are not just an aesthetic choice. They are a way to adapt the interface to the context, lighting conditions, and user preferences.
