EXPANDED PALETTE
Brand one-pager rule for this step: "Build out the existing forest green / hi-vis orange / sage with proper neutrals (warm greys, off-whites), semantic colours (success / warning / error), and rules for when each is used."
The palette is built in three layers — brand, neutrals, semantic — and each one has a specific job. Brand carries identity. Neutrals carry information. Semantic carries state. They never swap roles: orange does not mean warning, and red does not appear in marketing.
Three brand colours.
Nine neutrals.
Three states.
Brand
Identity. Forest, orange, sage.
Neutrals
Information. Warm Stone scale, paper to ink.
Semantic
State. Success, warning, error — UI only.
Brand · three colours, three jobs
Forest 700 · Orange 500 · Sage 500Forest
Green
Carries the brand. Logo mark, headlines, primary buttons, large fields. The default voice of the company on screen and in print.
Hi-vis
Orange
Says scan, says action. Tag corners, primary calls-to-action, the strapline closer. Used sparingly — orange that's everywhere is orange that means nothing.
Sage
The breath between forest and orange. Charts and data viz, secondary chips, large flat fields where forest would feel heavy. Never the primary action.
Neutrals · the Stone scale
9 stops · paper → inkWarm greys, not cold. The whole scale is built off the same hue family as paper — so off-whites, rules, and ink all read as one material rather than three. Pure white and pure black are banned outside semantic and accessibility roles.
No pure white
Paper is Stone 50, not #FFFFFF. Pure white is for tag corners (where it's a colour role) and PDF print only.
No pure black
Ink is Stone 900, not #000000. Reads as warm and printed; pure black reads as cheap.
Three text levels
Stone 900 for headings, Stone 700 for body, Stone 500 for labels and metadata. Anything else needs a reason.
One rule colour
Stone 300 is the only border — solid for hard edges, dashed for soft ones. Don't introduce a second rule weight.
Semantic · state, not identity
UI only · never marketingWorking green
Logged. Saved. Synced. Use for confirmation toasts, "tag scanned" feedback, completed checklists, and clear-state badges.
Distinct from forest. Brighter and more chromatic so a "saved" tick never looks like a brand badge.
Amber heads-up
Pay attention. Not broken yet. Use for missing data, expiring passports, low signal, sync delays, anything the user should see before it becomes an error.
Warm amber, not orange. Pulls back from the brand accent so a warning never looks like a button.
Something's wrong
Stop. Fix this. Failed scans, validation errors, sync failures, destructive confirmations. Pair with clear copy on what to do next.
Rust-red, not fire-engine. Sits with the warm palette. Marketing never uses it — it lives entirely inside the app.
Why orange isn't warning
Orange means scan this. It's the brand's call-to-action. If we used it for warnings, every "tag here" cue on the website would read as a problem. Warning is amber and lives only in UI.
Why red doesn't appear in marketing
Error red means something is broken. Putting it on a homepage banner trains users that brand surfaces are something to be alarmed about. Semantic colours are tools, not paint.
Surfaces · three pages, three voices
Paper · Forest · InkTag a cow.
Tag a gate.
Tag a crate.
Get AgTag →
Marketing, web, documents. Forest on paper carries identity; orange used for accents only.
Keep track
of livestock
movements.
Tag it →
For section breaks and feature splashes. Orange is the only call-to-action colour on this surface.
One tap.
Where the
work happens.
Scan a tag
App dark mode, trade-show banners, photography backdrops. Reverse logo (variant 02) sits here.
Pairings · do & don't
Combinations that surviveTokens · every value, named
Hex · CSS var · role| Token | Hex | Role | |
|---|---|---|---|
| Brand · Forest | |||
| --forest-900 | #1A2D1A | Headings on light · darkest brand fill | |
| --forest-700 | #2C4A2B | PRIMARY brand · logo · CTAs · headings | |
| --forest-500 | #3F6B3D | Hover · charts · secondary fill | |
| --forest-300 | #8AA589 | Quiet brand tint · disabled CTAs | |
| --forest-100 | #D4DDD0 | Backgrounds · brand-tinted cards | |
| Brand · Orange | |||
| --orange-700 | #B14A0C | Hover · pressed CTA | |
| --orange-500 | #E8651A | PRIMARY accent · scan cue · CTA | |
| --orange-300 | #F08C4F | Highlights · charts | |
| --orange-100 | #FAE3D3 | Tinted backgrounds · sticker stock | |
| Brand · Sage | |||
| --sage-700 | #6B7E58 | Chart series · secondary heading on paper | |
| --sage-500 | #8FA07A | Supporting chips · large flat fields | |
| --sage-300 | #B6C4A4 | Surface tint · subtle dividers | |
| --sage-100 | #E2E8D6 | Section background | |
| Neutrals · Stone | |||
| --stone-25 | #FBF9F3 | Card · raised surface | |
| --stone-50 | #F4F1EA | Paper · page default | |
| --stone-100 | #ECE7DB | Section background | |
| --stone-200 | #E3DCCB | Subtle fill | |
| --stone-300 | #D8D2C2 | Rules · borders (only) | |
| --stone-400 | #B3AD9D | Disabled state · hint text | |
| --stone-500 | #8A8779 | Labels · metadata · ink-3 | |
| --stone-700 | #4A4A40 | Body copy · ink-2 | |
| --stone-900 | #14140F | Headings · ink (warm black) | |
| Semantic · UI only | |||
| --success-500 | #4A8B3F | Logged · saved · synced | |
| --success-100 | #DDE9D4 | Success toast background | |
| --warning-500 | #D99518 | Heads-up · expiring · low signal | |
| --warning-100 | #F6E7C2 | Warning toast background | |
| --error-500 | #B73A2C | Failed · destructive · stop | |
| --error-100 | #F3D4CF | Error toast background | |