Check out new web design product – Material Websites Toolkit for Figma
Send us your questions or customization on demand requests
We used to reply ASAP
Colors & backgrounds
This design system based on 6 base colors including color of disabled state. Made as components, each color is editable and linked to the most modules. The color change for the master component will cause a color change for all subordinate elements.
There are three types of background declared in the system. First is the common for all cards, second is uplifted for drop-down lists, and the third is floating-like for dialog. This made for quickly customization purposes, e.g. shadow effects, or corner radius.
There are few preset colors as: primary, accent, light, dark and disabled. In terms of that you can simply switch it through the instance dropdown menu.
This is disabled outline. Linked with buttons, inputs, and etc. Customize it in "Colors / Disabled" section for mass effect.
Light color either made as component "Colors / Light"
Backgrounds were made as masters, so you can customize even shadows for dialogs or pop-ups for all linked design modules instantly