Colour
Colour
Colours have roles, not just values. Four grounds, three inks and one accent, used in that order of frequency, plus three illustration inks for graphics only. Values live in system/tokens.css; see them rendered in guide.html. Part of the SoR design system.
Grounds (backgrounds only)
| Token | Value | Role |
|---|---|---|
--white | #ffffff | Pure white sections: the page at its most open. Statements, calendars, engage, long reading. |
--paper | #fbfaf6 | The default page, warm near-white, under the paper grain. Headers, collections. |
--sunlight | #fbefc4 | Pale yellow, for joy. A whole section's background only: never text, never a highlight. |
--night | #171613 | At most one section per page, plus the footer. Depth: selected work, reflection. |
Inks
| Token | Value | Role |
|---|---|---|
--ink | #1b1916 | All text on light grounds, rules that matter, and every button. |
--muted | #5d584f | Captions, labels, secondary text. |
--rule | #e0dacf | Hairlines on light grounds. |
--chalk | #ece7dc | Text on night. |
--night-muted | #a49e93 | Secondary text on night. |
--night-rule | #38342e | Hairlines on night. |
The accent
| Token | Value | Role |
|---|---|---|
--red | #e5201c | The logo red. Only an occasional link in running text (.link) and footnote marks. |
Illustration inks (graphics only)
| Token | Value | Role |
|---|---|---|
--print-blue | #03296f | Cobalt. A woodcut printed in blue. |
--print-green | #1f3d2b | Deep green. A woodcut printed in green. |
--print-mustard | #c9a227 | Mustard yellow. A woodcut printed in mustard. |
These are the colours a woodcut or animal graphic may be printed in besides black (and chalk on night). They are only for graphics: never text, buttons, rules or backgrounds. One illustration ink per graphic, and keep them occasional: black stays the default.
Which colours each graphic set may use
The illustration inks are for the woodcuts and the animals. Painted and printed sets keep the colours they were made in: never retint them, and never use their colours on other graphics. The line figures and marks are plain ink.
Each set's colours, grounds and rights are in one table: graphics.md.
Proportion
By area on the home page, leaving out photographs: about 64% white and paper, 14% sunlight, 16% night, 5% ink, 1% red. Photographs carry most of the colour.
Do
- Let a photograph be the most colourful thing on the screen.
- Alternate white, paper and sunlight sections to give rhythm without colour.
- Use red for one link in a paragraph, at most.
Don't
- Make a red button, red heading or red background.
- Highlight words in yellow, or use a bright yellow anywhere (tried: rejected).
- Add a second dark section, or a gradient other than the hero scrim.
- Use blue for action (#1F338A was tried and rejected as too cool and corporate). The illustration blue is for graphics only.
- Use an illustration ink for text, a button or a background.
Decisions: planning 2608 · decision log (black buttons and red-only-for-links came from the Ink and Paper exploration; the pigment palette of Night to Dawn did not work).