Angular components
Setproduct Design System
A powerful design system where Angular components match with Figma design files. Equip your design team with Figma library, and deploy Angular components for devs. All-in-one solution to speed up the development
Color System
Setproduct Design System is based on a flexible and simple color palette contains an equal amount of tints and shades to apply for default and dark themes. Blue, Green, Red, and Yellow are the Primary colors. Indigo, Teal, Orange, and Pink are Secondary. Use this palette upon your imagination for the Action, Positive, Warning and Error statements.
Shadows & Elevation
Setproduct Design System is powered by advanced elevation principles based on reflex effect. Use deep levels of depth to demonstrate the priority in your application most clearly. Use primary or secondary fill for any component or surface and attach a shadow same colored. The elevation library contains raise levels from 2dp to 24dp and uses all the SCSS colors.
Specifications & Guidelines
Setproduct Design System guarantees you 100% compliance between design & code. Global styles from Figma was extracted for Angular components within attention to every pixel. Every component clearly described by simple visual language for specs:
>Designed in Figma
Setproduct Design System starts with a component-driven library for Figma. Hundreds of production-ready perfectly crafted responsive UI components (and templates soon) available for your hi-end prototyping mission. Just publish for a team and invite developers to quickly establish a semi-automatic connection between design & code.