What each color does.

1 / PAGE AND CARDS

bakedwith’s process section

Look outside the panels, then inside them. The large background is a cool pale gray. Each panel is almost white, so it feels like a separate object without a large colored block.

The fine border helps define each panel. Color is concentrated in the illustration and the small step number.

For Wholeverb: your selected cream is the page. A white information card can sit on it; a faint wash can sit behind a label inside the card. We don’t need to tint every section.

Saved October 3. Process section only. Click the capture to inspect it at full size.

2 + 3 / TEXT, ACCENTS AND LINKS

Gumloop’s opening

Look at the headline, the navigation and the small colorful shapes above the headline. The main words are dark. The shapes supply brighter color in a small area. The outlined and filled buttons make actions easy to identify.

In the interface picture, the smaller gray labels are quieter than the main titles. The page gives text different levels of emphasis.

For Wholeverb: dark ink for main text, quieter ink for supporting text, bright turquoise in artwork, and deeper turquoise for small links. Gumloop shows the separation of jobs; the turquoise shades are our selected roles.

Saved October 2. Actual Home opening. The pictured interface is source presentation evidence.

4 / BOUNDARIES AND FOCUS

A field before and after focus

Focus means “this is the control I’m on.” Pressing Tab moves through links, buttons and fields. The visible outline follows that position.

The GOV.UK field has a normal black border. Once focused, it gains a yellow outline and thicker black edge. The outline is temporary; it isn’t decoration around every field.

For Wholeverb: a clear field border, then a deeper turquoise focus outline on a light background. Orange is the selected focus outline on midnight. Try the field in our example below.

5 / LIGHT WORDS ON A DARK FIELD

The text reverses when the surface darkens

“Inverse text” simply means the light words used on a dark background. GOV.UK’s confirmation panel uses white text on green. That panel also communicates a completed task.

For Wholeverb: the same readability job on our midnight closing section: light heading, quieter light supporting text, and a little orange emphasis. The dark-section atmosphere remains a working treatment; this doesn’t make every section dark.

6 / COLORS THAT EXPLAIN STATUS

A message belongs beside the thing it explains

Here, red connects an error message to the field that needs fixing. The text tells the visitor what to correct; the field’s red border points to where.

On Wholeverb, the four selected families mean:

• Information: a useful note, such as “This example stays on your device.”
• Positive: a task succeeded, such as “Your message was sent.”
• Attention: something needs notice, such as “Your message hasn’t been sent yet.”
• Validation: an answer needs fixing, such as “Enter a complete email address.”

These colors appear when the situation needs them. They aren’t four badges to scatter through the Home page. Words carry the meaning too.