Material Design System

for prototyping with Angular • React

Solid, customizable and scalable design system allows rapid prototyping with free popular material frameworks: Material.angular.io & Material-ui-next.com

Components

Made with symbols /

This design system is based on components / symbol-elements. Simply change the instance for every element. Custom ghost-buttons / gradient-buttons included.

Organized

Grouped with pages and

Buttons

Flat, Raised, FAB, Ghost, Iconic and even Gradient buttons

Text fields

This design system contains classic inputs better for web

Cards

Custom layouts with 24px rounded corners and default

Navigation drawer

Every color fits the navigation. It's great to have a choice

Dialogs

Customized with 24px rounded corners, defaults available

over 240+ components

and more categories with

Application bar, Avatars, Badges, Bottom navigation, Buttons, Cards, Chips, Dialogs, Drawers, Expansion panels, Grids, Lists, Menus, Modals, Pickers, Selection controls, Snackbars, Steppers, Tables, Tabs, Text fields / Inputs shaped with care in 8pt grid

Explore the system

Preview Material Design System directly in browser, use + / - keys to zoom

Angular
100% compatible with material.angular.io
React
100% compatible with
Material-ui-next.com
Figma
This design system
was made for Figma

Limited offer!

Material Design System is absolutely free to download during next
Days
Hours
Minutes
Seconds