Structural, Action, and Status Colors: Building a Scalable UI Color System

Requirements Goal

The objective is to supplement a platform's color roles for surfaces, boundaries, auxiliary text, primary actions, and delivery states. The approach organizes colors by interface responsibility so that structure, primary actions, and business states each have appropriate expression.

Initial Implementation

The first version presented a set of vivid brand colors and status colors as a candidate palette for the platform, with each color block labeled by its intended name.

Figure 1: Initial display of a few vivid candidate colors.

Problem Analysis

Main Issues

A single set of brand color blocks only answers part of the color-usage questions. Real interfaces also need backgrounds, surfaces, boundaries, body text, and auxiliary text, each requiring different intensity levels. Applying strong colors to all structural areas creates excessive emphasis, while having only very light and very dark steps leaves middle layers insufficient.

Design Principles

First establish color categories by responsibility, then prepare sufficient depth steps. Neutral colors carry most structural needs; the primary color serves primary actions or selected relationships; other accent colors handle necessary states and categories. The system must cover scenarios without requiring every screen to use all colors. Important meanings still need to be conveyed by text, shape, or icons.

Optimized Implementation

Role Organization

List the surfaces, boundaries, text, actions, and states that actually appear in the platform and assign roles to them. Similar responsibilities can share rules, while different meanings retain distinct names. In this example the mapping is:

Neutrals: background, surface, boundary, auxiliary text, primary text
Primary: primary actions, current selected items
Status colors: success, pending, failure, and other necessary feedback

State Mapping

Associate each state with accurate copy, appropriate symbols, and color. States such as awaiting approval, running, cancelled, and failed must each carry real meaning and not be merged due to a limited palette. Different business objects may share visual roles but keep their own state enumerations. For example, a pipeline passing and a deployment completing may use similar positive expressions yet represent different outcomes.

Scene Calibration

Apply candidate colors to tooltips, buttons, and cards to observe whether middle steps are missing. Light backgrounds, dark text, and boundaries need to be checked as combinations. Supplement color scales based on real usage, avoiding the continual addition of similar colors without purpose. The warmth/coolness of neutrals and the suitability of pure black are judged per project context.

Effect Validation

The adjusted materials demonstrate the color division of labor. After applying to real pages, each combination must be checked for readability and state accuracy.

Figure 2: Colors organized by structure, action, and business state roles.

☐ Backgrounds, boundaries, and text have clear intensity division.

☐ Primary action and business state color rules are explicit.

☐ Important states remain recognizable even when color is removed.

Application & Exercise

List the states found in requirements, pipelines, and releases. For each item record the copy, symbol, and color role. Deliver a mapping table that indicates which roles can be shared and which state names and consequences must remain independent.