Status colour & approval icons

Status colour

Success: Success

Something the user asked for has finished. Confirmation, not celebration.

Information: Information

A fact about the view that the user did not ask for and should know. Not a warning.

Caution: Caution

Acting without reading this costs time or money. Nothing has broken yet.

Error: Error

Something failed, or is about to be destroyed. Always say what is unaffected.

--gd-success is 4.39:1 against white — fine for a dot or an icon tile (3:1), under the floor for a sentence. Each hue's -ink is the only member of the quartet that may be set in type.

Code

<GdAlert tone="success" title="Packaged">…</GdAlert>
<GdAlert tone="info" title="For your information">…</GdAlert>
<GdAlert tone="caution" title="Check this">…</GdAlert>
<GdAlert tone="danger" title="It broke">…</GdAlert>

success

--gd-success#1B8A4C#8FBF87

success fill — dots, icon tiles, progress bars. Never set type in it AA-nontext on --gd-surface

--gd-success-ink#15703D#8FBF87

the only success value that may carry text. Re-derived for dark rather than lightened — a tint that reads as caution on white reads as sickly on charcoal AA on --gd-surface

--gd-success-wash#F1F7F2color-mix(in oklab, #8FBF87 14%, #17181E)

the success ground — alerts, callouts, washed chips

--gd-success-tint#CFE3D5color-mix(in oklab, #8FBF87 34%, #17181E)

the border of a success wash

--gd-success-on-solid#FFFFFF#14151A

the GLYPH on a filled success tile. Non-text: these tiles carry a 15px icon, never prose — success at 4.4:1 would not clear AA for a sentence AA-nontext on --gd-success

info

--gd-info#2F6FB0#7FB3E6

info fill — dots, icon tiles, progress bars. Never set type in it AA-nontext on --gd-surface

--gd-info-ink#285F96#7FB3E6

the only info value that may carry text. Re-derived for dark rather than lightened — a tint that reads as caution on white reads as sickly on charcoal AA on --gd-surface

--gd-info-wash#EDF3FAcolor-mix(in oklab, #7FB3E6 14%, #17181E)

the info ground — alerts, callouts, washed chips

--gd-info-tint#C5DAEEcolor-mix(in oklab, #7FB3E6 34%, #17181E)

the border of a info wash

--gd-info-on-solid#FFFFFF#14151A

the GLYPH on a filled info tile. Non-text: these tiles carry a 15px icon, never prose — success at 4.4:1 would not clear AA for a sentence AA-nontext on --gd-info

caution

--gd-caution#A8850F#DDB63F

caution fill — dots, icon tiles, progress bars. Never set type in it AA-nontext on --gd-surface

--gd-caution-ink#8A6D09#D9B34A

the only caution value that may carry text. Re-derived for dark rather than lightened — a tint that reads as caution on white reads as sickly on charcoal AA on --gd-surface

--gd-caution-wash#FCF6E6color-mix(in oklab, #DDB63F 14%, #17181E)

the caution ground — alerts, callouts, washed chips

--gd-caution-tint#EBD9A2color-mix(in oklab, #DDB63F 34%, #17181E)

the border of a caution wash

--gd-caution-on-solid#FFFFFF#14151A

the GLYPH on a filled caution tile. Non-text: these tiles carry a 15px icon, never prose — success at 4.4:1 would not clear AA for a sentence AA-nontext on --gd-caution

danger

--gd-danger#C43D3D#E97B7B

danger fill — dots, icon tiles, progress bars. Never set type in it AA-nontext on --gd-surface

--gd-danger-ink#A83232#E97B7B

the only danger value that may carry text. Re-derived for dark rather than lightened — a tint that reads as caution on white reads as sickly on charcoal AA on --gd-surface

--gd-danger-wash#FCEFEFcolor-mix(in oklab, #E97B7B 14%, #17181E)

the danger ground — alerts, callouts, washed chips

--gd-danger-tint#EFCACAcolor-mix(in oklab, #E97B7B 34%, #17181E)

the border of a danger wash

--gd-danger-on-solid#FFFFFF#14151A

the GLYPH on a filled danger tile. Non-text: these tiles carry a 15px icon, never prose — success at 4.4:1 would not clear AA for a sentence AA-nontext on --gd-danger

Approval icons

No approval needed

Nothing to lodge and nobody to ask. Keep the work inside the published limits and you may start.

e.g. A garden shed under 10 m² behind the building line

Building approval

A private building certifier confirms the structure is safe and engineered to the National Construction Code. Nobody assesses the design.

e.g. A deck more than a metre off the ground

Council approval

The local government assesses the proposal against its planning scheme and decides. A formal application, with fees and a decision period.

e.g. A second dwelling on a lot in a low-density zone

Public notice

A notice goes on the fence and in the paper, and neighbours have a legal right to make submissions the council must consider.

e.g. A use the zone does not anticipate

State approval

A state agency is a referral or assessment authority — because of a road, a waterway, a heritage listing or a state interest.

e.g. A crossover onto a state-controlled road

Layering

Nothing to lodge

A deck over a metre high

A second dwelling

A use the zone does not anticipate

A crossover onto a state road

Try it in dark mode, and then try it with your monitor's colour turned off — it says the same thing, which is the point.

Code

<GdApprovalStack :required="[]" />
<GdApprovalStack :required="['building']" />
<GdApprovalStack :required="['building', 'council']" />
<GdApprovalStack :required="['building', 'council', 'public', 'state']" />

Inline

In a row, a card or a table cell, a single 13px icon and label stands in for the full stack. The HIGHEST authority wins the slot.

Code

<GdApprovalStack inline :required="['building', 'council']" />

Rules

Keep the fixed order, always: building → council → public notification → state. It is not a sort key.
Build a stack with stackFor(). It is the only sanctioned way to make one.
Never stack "no approval". It is the absence of the others, shown alone.
Never colour an approval icon. The stack must read in pure greyscale; the words beside it carry the verdict.
Never overlap the tiles. Side by side with a 4px gap, so every authority stays fully legible.
Never set type in a status solid. Each hue's -ink is the only member of the quartet that may carry a sentence.
Take the whole quartet or none of it. Solid, ink, wash and tint travel together.
Never let a status hue mean a planning outcome. A red toast is an error, not a verdict.
Lead with plain English. A statutory term belongs beside it as a chip, never instead of it.

Behavior & Anatomy

Colour is decoupled from content

The obvious system encodes the planning outcome in HUE: green for accepted development, red for impact assessable. It holds until colour has to do anything else. A failed network request drawn in the app's error red then reads as an impact-assessable verdict, and a success toast reads as a planning approval. Colour would be carrying content, so it could not also carry status, and every new status would have to be argued against the ramp.

So the two are separate. Colour is generic and means what it means in any product. What approvals a property needs is CONTENT, and content is carried by these four icons plus the words beside them. That separation is what buys the ability to show a red toast without it reading as an impact-assessable verdict.

Why the quartet travels together

Taking the solid without the ink is how type ends up set in a 4:1 fill.

Caution is the one every system gets wrong exactly once. #C9A21A on white is 2.41:1 — a caution dot drawn in it is a graphic you cannot reliably perceive, which WCAG 1.4.11 does not allow for a mark that carries meaning. The darker #A8850F the design already used for its filled tile is promoted to BE the caution solid, so the failing value has no role left to leak into; #C9A21A survives only as --gd-editorial-caution-accent, a callout's left rule, where the heading ink beside it carries the meaning.

Why the icons are never coloured

An approval stack must be legible in pure greyscale, which is the accessibility story and the honesty story at once: nobody can mistake a colour they cannot see for a verdict.

Why the order is fixed

Building → council → public notification → state is not a sort key. The stack reads left to right as "and then", so re-ordering it changes what it claims about the sequence a person faces. The four authorities stack because approvals stack in real life.

In the inline form the HIGHEST authority wins the slot, because it is the one that decides how hard the project is.