Color
The color system supports 12 categories of color that can be applied to components, text, icons, and surfaces.
2. Primary Variant
3. Secondary
4. Secondary Variant
5. Background
6. Surface
7. Error
8. On Primary
9. On Secondary
10. On Background
11. On Surface
12. On Error
Typography
The type system supports 13 categories that, when combined, form the typescale. This typescale is evident in the variety of text styles and sizes that appear on screen, ranging from body copy to buttons. Type appears across the UI, in places such as in components and on surfaces.
Type attributes are controlled by values that can be customized for the type family, font, case, size, and tracking.
Shape
The shape system currently supports two types of shapes that can be applied to component corners to suit your brand and app: rounded shapes and cut shapes.
- Rounded shapes have curved corners
- Cut shapes have angled corners
These shapes can be applied to corners of a component, to create either a symmetrical (all corners use the same shape) or asymmetrical effect (not every corner uses the same shape). Corners can customize their size and shape type.
Scaled to 500%. The height of the shapes in images 1-3 is 36dp. The height of the shape in image 4 is 64dp.
Scaled to 500%. The height of the shape in images 1-3 is 36dp. The height of the shape in image 4 is 64dp.
Icons
2. Sharp
3. Rounded
4. Outlined
5. Two-Tone
In addition to the original filled Material Design Icons, four additional icon themes are available. Each icon set should be used consistently across an app to maintain visual consistency, without mixing multiple icon sets in a single UI.