Color System
Last updated
Last updated
Color provides an intuitive way of communicating information to users in your app, it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.
Colors are primarily determined by accent color and theme. Here we'll discuss how you can use color in your app, how to use accent color(Primary & Secondary color) and theme resources to make your app usable in any theme context.
Use color meaningfully. When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.
Use color to indicate interactivity. It's a good idea to choose one color to indicate elements of your application that are interactive. For example, many web pages use blue text to denote a hyperlink.
Primary color
Secondary color
Primary and Secondary color mainly represent your brand to enhance your Interface in a consistent way.
Primary color
Secondary color
Background Color
Surface Color
Error Color
All of these colors can be customized for your app.
When a color appears “on” top of a primary color, it’s called “on primary color.” They are labelled using the original color category (such as primary color) with the prefix “on.” This category of colors is called “on” colors.
“On” Primary Color
“On” Secondary Color
“On” Background Color
“On” Error Color
“On” colors are specifically applied to text, iconography, and strokes.
A disabled state communicates a non-interactive component or element.
