Color
Black, white and newsprint do the work. One accent and one highlight carry meaning; cyan is for data.
Ink
Text, rules, header, footer, bands.
--ink #000Text, rules, header, footer, bands.
Paper
Page background.
--paper #fffPage background.
Newsprint
Behind artwork, and to block in or contain a section. A warm light gray, a step darker than the gray track (17.6:1 with black type).
--newsprint #edebe6Behind artwork, and to block in or contain a section. A warm light gray, a step darker than the gray track (17.6:1 with black type).
Accent
Hover on white; the one active thing.
--accent #e4148cHover on white; the one active thing.
Highlight
Tags, hover on black, selection.
--highlight #ffe500Tags, hover on black, selection.
Muted
Secondary text.
--muted #555Secondary text.
Cyan is only for data, never for UI. Its lighter steps and chart rules are on Data & charts.
Usage
Do
Use the accent for the one thing that’s active or hovered: a tile title, a chosen size, a pressed button.
Don’t
Use the accent as decoration, or put two accent-colored things side by side.
Do
Put scanned line art on newsprint with mix-blend-mode: multiply so the paper reads as paper.
Don’t
Use newsprint as the whole page background; it blocks in a section, not the page.
Site variations
| Site | Variation | Why |
|---|---|---|
| All current sites | Accent stays magenta | Shared Jonesco identity across Art Dept and the portfolio. |