Color system Design system

Use colors that have a clear role and maintain meaning in every interface.

8 checks · 2 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Determine the foundation color paletteSet shared color levels with managed names and values.Components should use colors according to their role instead of directly choosing a shade.Example The “error text” variable is used for form errors and failed submission warnings.Associate color with roleSeparate background color, text, border, action and response.Color names by role help change the interface in one place; Don't let each element choose its own base shade.There are enough colors for the statusCheck default, hover, click, focus, selected and disabled.Unify response colorKeep the same meaning for successes, warnings, errors, and information across the product.Try the same condition on every background used in both light and dark; Error colors that are easy to read on one background may not be usable on another background.

Interaction and usability

Try the operation, change the status and continue working.

Measure the color pairs usedContrast text, icons, and controls against the actual background, not just the color palette.Record allowable text and background pairs so developers don't have to guess which colors go together.Light and dark tests independentlyDefine individual values for each interface and check all states.Test each color pair after switching skins instead of just switching light to dark; Highlights and borders need their own roles.Keeps identification intact and legibleUse brand colors in appropriate locations; Adjust hue when contrast is insufficient.If the identifying color is difficult to read, keep it decorative and use a clear enough color for meaningful text or operations.Don't let color carry its meaning aloneIncorporate labels, shapes, or symbols when you need to differentiate data and status.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Determine the foundation color palette

Components should use colors according to their role instead of directly choosing a shade.

EXAMPLES

Usage examples

Determine the foundation color palette

The “error text” variable is used for form errors and failed submission warnings.

Color system Design system

Structure and meaning

Interaction and usability

How to review

Determine the foundation color palette

Usage examples

Determine the foundation color palette

Find a checklist

No checklists found