Gold as Brand Colour
The site is called Writ in Light. The brand colour should be the colour of light. Not rose, not slate. Gold.
This is the reasoning behind the change.
How rose became the default
Rose (#A87776) was the first accent colour chosen for the site. It’s warm, emotive, and tied to Arc 2: To Feel. It was a good first instinct: a muted, dusty tone that felt considered rather than arbitrary.
But rose didn’t become the default interactive colour by design. It became the default by inertia. Links, hover states, focus rings, the logo highlight: all rose, because it was the first accent that worked well enough. No one questioned it.
The result was a site where the brand colour was borrowed from one of its four arcs. Arc 2 owned the colour of everything, even things that had nothing to do with emotion or feeling.
The problem with arc-dynamic accents
The alternative was to let each arc colour the entire site dynamically: slate when exploring perception, rose when exploring emotion, gold when exploring application. This is clever. It’s also a branding problem.
Without a fixed accent colour, the site has no visual identity. A screenshot of the homepage during Arc 1 looks like a different site from a screenshot during Arc 2. Shares, previews, first impressions: all inconsistent. The site’s content has a clear identity (colour theory, structured arcs, editorial writing). The site’s colour identity was shifting under it.
Arc-dynamic accents
Every arc colours everything. Immersive but inconsistent. No single colour represents the brand. Screenshots and shares look different depending on when they're captured.
Brand colour + arc accents
Gold owns global UI (nav, links, CTAs). Arc colours own their content pages. Consistent brand identity with immersive content experiences.
Why gold
The name answers this.
Writ means inscribed, marked, written down. In light is golden hour, projected light, photographic light, the luminance that makes colour visible at all. The site’s name is a metaphor for writing with light, and the colour of that light is gold.
Gold at hue 41 degrees sits in the golden hour colour temperature range (approximately 3000K). It evokes illuminated manuscripts, warm light on paper, the moment before sunset when everything turns amber. It’s the only colour in the palette that directly embodies the site’s name.
The hex value
The previous gold was #D6B273 (HSL: 37 degrees, 52% saturation, 64% lightness). It worked as a tertiary accent. As a brand colour, it needed scrutiny.
The problem with #D6B273: at hue 37 degrees, it leans toward amber-tan. At body text sizes (14px), on the dark canvas, it could read as “highlighted beige” rather than gold. A brand colour needs to be unambiguous at every size.
The new value is #DBBA6E (HSL: 41 degrees, 56% saturation, 65% lightness):
- Hue 41 degrees (from 37 degrees): pulls decisively into gold territory, away from amber-tan. At 37 degrees, you’re flirting with “warm neutral.” At 41 degrees, it reads as gold without hesitation.
- 56% saturation (from 52%): enough to carry the brand at small sizes (link text, thin underlines), restrained enough to sit in the palette’s “don’t shout, orient” philosophy.
- 65% lightness (from 64%): a marginal increase that makes it feel luminous. This is a colour about light, not metal. It should glow, not gleam.
- Contrast ratio: approximately 9:1 against canvas (#0C0C0F). Exceeds WCAG AAA. Works everywhere: body text, small labels, thin underlines, focus rings.
Purple rebalanced
Auditing the palette for gold’s promotion revealed a deeper problem.
| Colour | Hex | Saturation |
|---|---|---|
| Rose | #A87776 | 22% |
| Slate | #8893C0 | 31% |
| Gold (old) | #D6B273 | 52% |
| Purple (old) | #A855F7 | 91% |
Purple was Tailwind’s default purple-500, dropped in without calibration. At 91% saturation, it belongs to a different design system entirely. Next to rose at 22%, it’s visually jarring. The palette’s principle is that accents orient without shouting. Purple was screaming.
The new purple is #9B84C4 (HSL: 263 degrees, 35% saturation, 65% lightness). Still clearly violet, still distinct from slate’s blue, but now sitting as a family member rather than an outlier. The hue shifted from 271 degrees to 263 degrees (more blue-violet), which gives it better separation from rose’s warm red.
“To Reflect” is about identity, archetype, and narrative. A contemplative, muted violet fits the arc’s character better than electric purple ever did.
The palette as a system
After the changes, the four accent colours form a coherent saturation gradient:
| Colour | Hex | Saturation | Character |
|---|---|---|---|
| Rose | #A87776 | 22% | Quietest. Emotive. |
| Slate | #8893C0 | 31% | Measured. Analytical. |
| Purple | #9B84C4 | 35% | Contemplative. Reflective. |
| Gold | #DBBA6E | 56% | Luminous. The brand. |
Gold leads because it’s doing double duty: Arc 3 accent and brand colour. The saturation increase gives it the authority that role demands. The others support, each calibrated to their arc’s emotional register.
The hybrid model
Gold owns global UI. Arc colours own their content.
Gold surfaces: navigation hover and active states, prose links, CTA buttons, focus rings, the logo highlight, the homepage hero glow. When you’re on a non-arc page (about, contact, tools, search), gold is the only accent you see.
Arc colour surfaces: learn post reading progress bars, arc badges on post previews, article accent elements. When you enter a learn post tagged “Arc 2: To Feel,” rose takes over for that page’s accents. The arc colour system still creates immersive, differentiated experiences within content.
The distinction: gold means interactive or brand . Arc colour means content category.
What changed
- CSS variables: —color-gold updated to #DBBA6E; —color-accent added as semantic alias
- Tailwind config: gold and purple hex values updated; prose link colour changed from rose to gold
- Buttons: focus ring changed from rose to gold; primary variant uses gold borders
- Logo: hover state changed from rose to gold
- Navigation: active and hover states use gold
- Homepage CTAs: gold borders and text (no longer arc-dynamic)
Write something in the light
Leave a thought, reflection, or a quiet ripple below.