Define a Visual Language for System Status

Added 2026-11-05

Success, warning, error and offline must be distinguishable at a glance.

My product needs to show these system states: [states and where they appear]. Define the visual language: 1) for success, warning, error, offline and loading, specify a color, icon and copy structure, plus redundant coding beyond color — icon shape, placement; 2) name the states that get confused and how to separate them; 3) place and word the "what you can do" part of error states; 4) check recognizability for color-vision deficiency and in dark mode; 5) give the minimum spec for a status component — size, spacing, dismissibility; 6) say which states should not be emphasized with color.

Site original

Chinese original

Open in ChatGPT

Replace these placeholders 1

Swap the bracketed parts for your own details before sending.

[states and where they appear]

How to use

Signalling state by color alone leaves part of your audience out.

Try tweaking it

Swap style words for measurable parameters: light, lens, material, composition.
Ask for three variants of one prompt, then compare the differences.

What you should get

A parameter sheet you can act on (light, lens, material, framing)
Two or three alternatives with trade-offs

Common mistakes

Stacking words like "premium, cinematic, 8K" — no two results match.
Asking for a real brand or celebrity look and getting something close but unusable.

How to check the output

Parameters are executable — ready to use in a tool or hand to a designer.
It explains the trade-offs, not just the final look.

Where it works

Good for: breaking vague "premium feel" into concrete light, material, lens and composition parameters.
Watch out: for real brands, celebrities or third-party work, use equivalent descriptions to avoid infringement.