Color System

Colors in UI design can speak in ways that are every bit as powerful as copy. They not only affect how your design looks, but can go as far as to elicit emotion and reflect the personality of your brand. Colors also play an important role in how your designs “look & feel”, and are the first impression.

While color can be subjective, it’s clear that good colors can attact and convert users. Bad colors, on the other hand, can turn away users and even make designs inaccessible and unusable.

Defining the right color palette for a project is one of the most important steps in the design process, but it can be quite difficult to get right. Hues affect the style and mood of the design, create the “look & feel” and are highly memorable. Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project.

The primary color is your “brand” color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

The secondary colors is color highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out. These colors are also usually defined in the brand guidelines.

The tertiary color is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers, outline card — are usually gray.

The Accent Colors is emphasis different semantic states, used to provide visual feedback and/or warnings to users as they use your interface

Success colors communicate a positive action, postive trend, or a successful confirmation. If you’re using green as your primary color, it can be helpful to introduce a different hue for your success green.

Warning colors can communicate that an action is potentially destructive or “on-hold”. These colors are commonly used in confirmations to grab the users’ attention.

Infomation colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.

Error colors are used across error states and in “destructive” actions. They communicate a destructive/negative action, such as removing a user from your team.