This design system helps you build clear and flexible layouts in Figma. You can use ready components and styles to design pages fast. The setup is simple, and you can change it to fit your brand.
Fast Design Workflow
You get many pre-built parts that you can drag into your file. This helps you design pages in less time. You also get color, text, and spacing styles that stay the same across your work.
The system uses new Figma features like auto layout, variables, and component properties. You can update parts in one place and see changes across your file.
Accessible and Clear Design
Each component follows good design rules. The system supports WCAG 2.1 AA, so your layouts stay accessible for all users.
Customizable Styles
You can change colors, spacing, and text styles without breaking your layout. Variables make updates fast and safe.
- Color variables
- Light and dark modes
- Spacing variables
- Typography variables
- Shadow styles
- 4px grid layout
Color System
The color set is small and easy to learn. Names follow a clear pattern, so you know when to use each color. The system also switches between light and dark modes with no extra work.
Depth and Elevation
In light mode, shadows show depth. In dark mode, lighter background layers do the same job. This keeps the design clear in both themes.
Components
You get a wide set of components that work for many screen types. Each one is built with auto layout and follows best practices.
- Many variants
- Clear properties
- Easy to update
- Interaction states
- Auto layout support
Interaction States
Interactive parts respond to hover and press states. This helps you build better prototypes without extra steps.
State Layers
Hover and press styles use a clear overlay. This works for buttons, inputs, menus, and more. You do not need extra colors to show these states.
Icon Set
You get a set of clean Feather icons, or you can add your own.
- 300+ open-source icons
- 2px stroke
- 24px grid
Built with Practical UI
This system uses lessons from Practical UI and common design patterns. You can build pages fast and keep them easy to read and use.
Design Principles
You learn a simple method to design clear and accessible interfaces. The guides help you grow your design skills with real examples.
