Building a Primary Color Scale from Real UI Components

1 Requirements

Development requirement: Let buttons, prompt backgrounds, and dark text reference the same blue color scale to reduce repeated color picking across pages.

This section covers selecting a base color, light/dark endpoints, and intermediate stops from real components, then reusing them by purpose.

2 Initial Implementation

Initially, each button chose its own blue, and prompt backgrounds and text colors were set separately. The same role used different blues in different locations.

Figure 1: Buttons and prompts using locally chosen blues.

3 Problem Analysis

3.1 Main Problems

Each ad-hoc lightening or darkening adds a similar color. The same role gradually accumulates multiple variants, making it hard to judge which differences are necessary.

Looking at isolated color swatches is insufficient. A color that works for a button may need different intensity and contrast when used as text or a prompt background.

3.2 Design Principles

First select a limited color scale, then validate with components. Start from a base color suitable for primary actions, define the light background and dark text endpoints, then fill the middle stops.

Interpolation and numbering help organize colors but cannot replace observation. Labels like 100, 500, 900 are sequential markers, not lightness percentages or unified business semantics.

4 Optimization Implementation

4.1 Color Scale Selection

First apply the candidate base color to buttons, then combine the lightest and darkest stops for prompts. After confirming these uses, fill the middle values segment by segment.

This example shows three stops: light blue background ( #eff6ff), primary action blue ( #2563eb), and dark blue text ( #1e3a8a). A full project can add stops based on actual needs; not every stop must be used in a single diagram.

4.2 Style Implementation

.palette {
  --blue-100: #eff6ff;
  --blue-700: #2563eb;
  --blue-900: #1e3a8a;
}
.run-action { background: var(--blue-700); }
.run-notice {
  background: var(--blue-100);
  color: var(--blue-900);
}

These numbers are conventions for this example. Projects can also add semantic aliases like "primary-action" or "prompt-background" so business components depend on purpose.

4.3 Combination Validation

Return the scale to the requirements, pipeline, and release components to check text, buttons, and backgrounds. Stops that look washed out or jump too much can be adjusted; mathematical uniformity is not required.

When a combination fails, first decide whether to revise an existing stop, then whether to add an exception, avoiding nominal reuse that still leads to unlimited color picking.

5 Effect Acceptance

Figure 2: Buttons, light prompts, and dark text referencing the same set of stops.

The diagrams show role application; shared variables and full state coverage need implementation verification.

☐ Primary action, prompt background, and prompt text have suitable stops.

☐ Same role reuses the same parameters.

☐ Stops are checked in real components and backgrounds; text is clear and readable.

6 Application and Exercise

Use the same blue set to implement requirement prompts, log entries, and approval summaries, recording each color's role.

Deliver a color scale usage table marking stops that need adjustment, and explain whether each change revises an existing value or adds an exception.