§02 · Colour
Paper, ink and one gold.
Marketing pages are always warm paper with navy ink, whatever the visitor's theme. Gold is a signal, not a colour scheme: it marks a citation, an action or the one focal accent in an illustration. A page that looks gold is wrong.
The page is a cited document.
Four papers and four inks carry almost every pixel. Each text colour shows an Aa sample on card.
Accents that mean something.
Gold and moss are fills and lines. When they need to be text, use their ink versions.
Gold marks a citation
A footnote marker lights gold when the demo page turns Seen by Google.
Gold marks an action
The call to action on navy: Check my pages free
Gold marks the focal point
One accent per illustration: the horns, the spark, the page that got found. Never headings or body text on paper.
For the dark moments.
The footer, social cards and live panels sit on night and navy. Ice blues carry the text there.
The app's tokens, light and dark.
The product uses its own theme, “Midnight Sun”, in src/app/globals.css. Anything on a marketing page that copies the app uses the light column.
| Token | Light | Dark | Name |
|---|---|---|---|
--gold / --primary | #D4AF37 | #D4AF37 | Solstice Gold |
--gold-ink | #7A5F0E | #E8CB6A | |
--moss / --success | #8FA382 | #8FA382 | Icelandic Moss |
--moss-ink | #46593D | #B5C7A9 | |
--iceberg / --info | #2A4365 | #7FA3D6 | Iceberg Blue |
--mist | #E2E8F0 | #E2E8F0 | Reykjavik Mist |
--background | #E2E8F0 | #0B1626 | |
--foreground | #13213A | #E2E8F0 | |
--card | #FFFFFF | #12233B | |
--muted | #EDF1F6 | #1A2F4E | |
--muted-foreground | #475569 | #A9B6C8 | |
--destructive | #B42318 | #F0705F | |
--border | #CBD5E1 | #24406A | |
--ring | #B8962E | #D4AF37 | |
--sidebar | #2A4365 | #0E1C30 |
Charts use gold, iceberg, moss, #5B7DB1 and #B8962E in light; gold, #7FA3D6, moss, #E8CB6A and #B5C7A9 in dark.
Status colour means status.
These are the app's own chips, rendered from the real component. Never use moss, iceberg or red to decorate, and keep “not yet” calm: only Invisible and Failed are red.
| Tone | Means | Chips | Border / wash / text |
|---|---|---|---|
| Moss | Seen or done | Seen by Google · Checked · Done | #8FA382 at 30% / #8FA382 at 15% / #46593D |
| Iceberg | In progress | Pushed · Google crawling · Checking · Pushing · Pushing gradually · Sent to Bing | #2A4365 at 30% / #2A4365 at 15% / #2A4365 |
| Red | Invisible or failed | Invisible · Failed | red-500 at 30% / red-500 at 10% / #991B1B |
| Neutral | Nothing to do | Already seen · Scheduled · Cancelled | #CBD5E1 / #EDF1F6 / #475569 |
| Gold | Needs attention | In review · Partly done | #D4AF37 at 30% / #D4AF37 at 15% / #7A5F0E |
Contrast we measured.
WCAG 2.x ratios for the pairs we actually use. Small text needs AA (4.5:1); gold and moss never qualify on paper.
| Sample | Text on background | Ratio | Verdict |
|---|---|---|---|
| Aa | Navy #13213A on Paper | 14.2 : 1 | AAA |
| Aa | Ink #1E2A3D on Paper | 12.7 : 1 | AAA |
| Aa | Slate #3B4760 on Paper | 8.2 : 1 | AAA |
| Aa | Slate 2 #55607A on Paper | 5.5 : 1 | AA |
| Aa | Slate 2 #55607A on Paper 2 | 5.1 : 1 | AA |
| Aa | Gold-ink #7A5F0E on Paper | 5.3 : 1 | AA |
| Aa | Iceberg #2A4365 on Paper | 8.9 : 1 | AAA |
| Aa | Moss-ink #46593D on its chip wash | 6.0 : 1 | AA |
| Aa | Red-800 #991B1B on the Invisible wash | 6.5 : 1 | AA |
| Aa | White #FFFFFF on Navy | 16.1 : 1 | AAA |
| Aa | Navy #13213A on Gold (gold buttons) | 7.6 : 1 | AAA |
| Aa | Gold #D4AF37 on Night | 8.3 : 1 | AAA |
| Aa | Ice #C9D6E8 on Night | 11.9 : 1 | AAA |
| Aa | Ice 2 #9AA9C0 on Night | 7.3 : 1 | AAA |
| Aa | Old gold-ink #8F7016 on Paper · retired for small text | 4.1 : 1 | Large text only |
| Aa | Gold #D4AF37 on Paper | 1.85 : 1 | Fails. Never text |
| Aa | Moss #8FA382 on Paper | 2.4 : 1 | Fails. Never text |
Small gold text
On light surfaces it's gold-ink #7A5F0E. Gold #D4AF37 only on dark. The older #8F7016 is for borders, decorations and artwork only.
Never colour alone
Every chip has words and a tooltip; every scene has text beats. Focus rings are gold at 50–60% opacity.
Take the swatches.
Every colour on this page, named, for design tools and code.