Skip to content
Foundations

Status colour & approval icons

Status colour is generic. What approvals a property needs is carried by icons and words — never by hue.

Status colour

Four meanings, and only four. Each hue ships as a quartet — solid, ink, wash, tint — and the quartet travels together. Taking the solid without the ink is how type ends up set in a 4:1 fill.

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.
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 srgb, #8FBF87 14%, #17181E)

the success ground — alerts, callouts, washed chips

--gd-success-tint#CFE3D5color-mix(in srgb, #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 srgb, #7FB3E6 14%, #17181E)

the info ground — alerts, callouts, washed chips

--gd-info-tint#C5DAEEcolor-mix(in srgb, #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 srgb, #DDB63F 14%, #17181E)

the caution ground — alerts, callouts, washed chips

--gd-caution-tint#EBD9A2color-mix(in srgb, #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 srgb, #E97B7B 14%, #17181E)

the danger ground — alerts, callouts, washed chips

--gd-danger-tint#EFCACAcolor-mix(in srgb, #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

Four authorities, four icons, drawn in the 2px line style and always in neutral ink. They answer "who has to say yes" — and because approvals stack in real life, the icons layer.

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

The stack reads left to right as "and then". 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.

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

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, because it is the one that decides how hard the project is.

Rules

  • Fixed order, always: building → council → public notification → state.
  • "No approval" never stacks — it is the absence of the others, shown alone.
  • Tiles sit side by side with a 4px gap, never overlapped, so every authority stays fully legible. Icons are never coloured; the words beside the stack carry the verdict.
  • The stack must be legible in pure greyscale.
  • Plain English leads. A statutory term belongs beside it as a chip, never instead of it.

Navigate

Esc