Dark mode, and the pigments do not move.
Nightworking swaps the role tokens — surface, text, line, shadow — and leaves ink, petrol, chalk, ochre and claret exactly where they are. That is a deliberate decision and it is the opposite of what most design systems do.
What actually changes.
A dark mode has two possible strategies. The first is to invert or re-derive the whole palette, producing a second set of brand colours that only exist at night. The second is to swap only the semantic roles — what is the surface, what is the text, what is a line — and leave the pigments untouched.
This build does the second. In nightworking, surface becomes #16150F, text becomes chalk, lines become chalk at sixteen per cent, and the shadows go from tinted warm to plain black because a warm shadow on a dark ground reads as smudge.
What does not change is the identity. Petrol is still #1D5C72. Claret is still #B0292B. The seasonal pigments are exactly the values they are at noon. A poster does not repaint itself when the sun goes down, and neither does this.
A poster does not repaint itself when the sun goes down.
What swaps and what does not.
Role tokens that swap
- --surface
- #EDE6D6 becomes #16150F
- --surface-raised
- #F6F1E6 becomes #201E18
- --surface-sunk
- #E3DAC6 becomes #100F0B
- --text
- Ink becomes chalk
- --text-soft
- #57524A becomes #BCB4A3
- --line
- Ink at 14% becomes chalk at 16%
- --grain-opacity
- .07 becomes .05Paper grain reads heavier on a dark ground
- Shadows
- Tinted warm becomes plain black at higher opacity
Pigments that do not swap
- Ink #23211E
- Unchanged
- Petrol #1D5C72
- Unchanged
- Chalk #EDE6D6
- Unchanged
- Ochre #E2871B
- Lifted very slightly to #F0972B for the CTA, and only the CTA
- Claret #B0292B
- Unchanged
- Moss, corn, sunset, sky, blossom
- All unchanged, in all four seasons
The one category that is re-derived
- Per-pillar accent-deep
- Lightened, per pillarA deep accent on a dark ground is invisible, so the deep step inverts into a light step
- Hero veil
- Re-mixed against #0A0906 rather than ink
How the mode is chosen.
| State | What sets it | What wins |
|---|---|---|
| System, default | No data-theme attribute at all | prefers-color-scheme decides |
| Explicit light | data-theme="light" on the root element | Light, even at night |
| Explicit dark | data-theme="dark" on the root element | Dark, even at noon |
| The dark media query | :root:not([data-theme="light"]) | So an explicit light choice survives a dark system |
| The dark attribute block | :root[data-theme="dark"] | So the toggle wins in both directions |
Nightworking, in two columns.
Swaps
- Semantic roles: surface, text, line, shadow, grain
- The per-pillar deep accent, which inverts to a light step
- The hero veil, re-mixed against a darker base
- Focus rings, which get a lighter companion
Deliberately does not
- Ink, petrol, chalk, claret — all unchanged
- Every field pigment, in every season
- The seasonal state itself, which is unrelated to theme
- The illustration plates, which are the same files
- Any brand colour, re-derived into a "dark variant"
Three states
System, explicit light, explicit dark.
Season is separate
A winter night is still winter.
Roles only
Surface, text, line, shadow.
Pigments fixed
The identity does not change after dark.
The questions dark mode gets.
#16150F is a very dark warm brown, because the light ground is a warm cream and pure black under a warm palette reads as a hole rather than a surface. It also reduces the halation people with astigmatism get from chalk text on true black.
No. They are orthogonal. It can be a winter night, a winter day, a summer night or a summer day, and the site handles all four because they are two independent attributes on the same element.
Because the call to action is the one element that has to be found instantly, and #E2871B against #16150F is slightly duller than it should be. It goes to #F0972B and nothing else moves with it.
No. They are the same files. A printed plate does not know what time it is, and giving them a night variant would double the asset count for no gain.
The other thing that ships on day one.
Reduced motion, and what every piece of animation on this site degrades to.
