Foundations
Brand Colours
One accent per product, applied only to the “· Product” half of the wordmark — the “AMOLEO” half never changes colour. See Wordmark for the colour rule itself.
Amoleo-Website has a colour, just not a product one.
Its wordmark is plain “AMOLEO” — the shared first half every family site's mark
starts from, never a “· Website” suffix (there's nowhere for the family's own
site to link to). Rendered from --brand-amoleo directly.
Public facing
#2f7994
#D9603F
#0b6e8f
#8a6d1a
#DC143C
#1E8A5C
#9346B9
#BA2C99
Behind the scenes
#6e7178
#62665C
#6B6661
#7A756E
no colour chosen yet
no colour chosen yet
no colour chosen yet
no colour chosen yet · this site
The AMOLEO half of every mark above is --brand-amoleo (#1c1c2e) — never a product's own accent. Chips with no fill are repos (and, for Family itself, the umbrella workspace this whole site lives in) with no --brand-* token yet.
Why these colours
Every accent has a real history — AA contrast failures, revisions, what it replaced. Pulled straight from each token's own $description in tools/tokens/base.tokens.json, not retold.
Rissbrook #2f7994
Changed 5 Aug 2026 from #183d4a (his 'dk teal', ADR-008). #183d4a measures 1.63:1 against the family's dark background (#101013) — fails WCAG AA at every text size. #2f7994 is 'Side Bar Header' from Robert Bickley's own site CSS — not an invented colour, one he actually used — and is the one value in his site's blue palette that clears the 3:1 large-text AA bar on both the dark background (3.87:1) and the light one (4.59:1, which also clears full 4.5:1 normal-text AA on light).
Pets #D9603F
Was #c45032 until 6 Aug 2026, when it changed to #D9603F to match what pets.amoleo.com's own CSS actually ships — #c45032 was the family's approximation, not a value lifted from the live site, and the two had drifted apart. Already a single value (not a light/dark pair) before the 4 Aug 2026 single-colour policy landed — the example the policy generalised from. #c45032 was known to fail AA at the 7.8px the lockup suffix used to render at (4.11:1 vs the 4.5:1 normal-text bar); fixed not by changing the colour but by the footer type-size increase in docs/family-footer.md §6, which crosses into the 3:1 large-text bar instead. #D9603F is 3.69:1 on white and 5.15:1 on #101013 — still clears the 3:1 large-text bar at lockup scale, still short of 4.5:1 normal-text on either background. Fixed in every theme including Pets' own nine cat themes: it used to track --secondary there, which meant the wordmark changed colour on every theme switch — corrected 4 Aug 2026. See also brand-policy.json's pets-ink entry, whose dark value (#d9603f) is now identical to this token.
Connections #0b6e8f
Single value as of 4 Aug 2026 — previously #0b6e8f light / #3fb6dc dark. The lighter dark-theme value is gone; the footer's larger, bolder type is what makes #0b6e8f itself work on a dark ground now, rather than a second hex.
Accounts #6e7178
Real fixed colour as of 4 Aug 2026 — previously neutral (var(--muted) / var(--text-light), back when Accounts was pure unshipped infrastructure). 'Slate grey', deliberately boring rather than a hue that competes with the other four.
Todo #8a6d1a
Added 4 Aug 2026 for Amoleo-Todo, still design-only. 'Olive gold' — picked clear of the existing cluster (Pets' red-orange, Connections/Rissbrook's teal/cyan).
Editions #DC143C
Added 17 Aug 2026 for Amoleo-Editions, still design-only. Crimson, chosen for the 'red carpet' association rather than reusing Pets' terracotta — ~25° apart on the hue wheel. Clears WCAG AA at the wordmark's actual render size: 4.99:1 on white, 3.81:1 on the dark ground (#101013) via the large-text accommodation.
Upnext #1E8A5C
Added 27 Aug 2026 for Amoleo-Upnext, still design-only. Emerald, sitting in the one open stretch of the hue wheel over 100° wide with nothing else claimed. Best-balanced pair in the family: 4.33:1 on white, 4.06:1 on the light panel, 4.38:1 on the dark ground.
Collections #9346B9
Added 27 Aug 2026 for Amoleo-Collections, still design-only. Amethyst, 68° clear of Editions' crimson. 5.50:1 on white, 5.15:1 on the light panel (clearing full normal-text AA on light), 3.45:1 on the dark ground via the large-text accommodation.
Communications #62665C
Added 1 Sept 2026 for Amoleo-Communications, still design-only. Near-neutral grey (85° hue, 5% saturation) — a deliberate full match to Registry and Accounts' saturation once Communications/Images were reclassified 'behind the scenes'. Originally a vivid moss green (#597434); the move to grey trades away that visible identity on purpose. 5.88:1 on white, 3.23:1 on the dark ground.
Reviews #BA2C99
Added 1 Sept 2026 for Amoleo-Reviews, still design-only. Vivid magenta-rose (314° hue), in the family's second-widest open gap. Unlike Communications/Images, Reviews is a real consumer-facing product, so it gets a saturated accent rather than the infra products' muted register. 5.37:1 on white, 3.53:1 on dark.
Images #6B6661
Added 1 Sept 2026 for Amoleo-Images, revised twice the same day. First a muted sage green (rejected — the product is about photos, not editing), then a developed-negative sepia (#915E30), then moved to a full grey match (28° hue, 5% saturation) once Images was reclassified 'behind the scenes' alongside Communications. 5.68:1 on white, 3.35:1 on dark.
Registry #7A756E
Added 27 Aug 2026 for Amoleo-Registry, still design-only. Warm taupe, same 'boring on purpose' idiom as Accounts' slate grey, at 35° hue where Accounts leans cool (222°). 4.57:1 on white, 4.16:1 on the dark ground. Amoleo-Registry is internal/non-advertised — see tools/brand-policy.json for the surfaces it must never appear on.
Generated from tools/tokens/base.tokens.json + tools/repos.json. Edit there and re-run npm run build in docs-site-src/ — never hand-edit a page.