Color
Ink for the interface; color only for status and data. Every swatch on this page is a role, so it changes with the light and dark button.
Inks and grounds
Margin's inks, from TJ's books: one text color, two grays for what comes second and third, two rules, a sunk ground for wells and code, and white paper. Dark is the same ramp at night. Each swatch gives its light and dark values.
Three text grays
The books use three text colors, and so does v2. The third is a step darker than the books' (#6b726f, not #8a918e), because the books' gray reaches only 3.2:1 on white and small text needs 4.5:1.
| Role | For | On paper | On sunk | Dark, on paper | Dark, on sunk |
|---|---|---|---|---|---|
| --ds-text | Text, headings, the interface | 18.0:1 | 16.3:1 | 14.6:1 | 12.6:1 |
| --ds-text-2 | Captions, notes, quiet labels | 7.0:1 | 6.3:1 | 7.9:1 | 6.8:1 |
| --ds-text-3 | Page numbers, placeholders, step numbers | 4.9:1 | 4.5:1 | 4.6:1 | 4.0:1 |
On a sunk ground, use Text 2 for anything that must be read: Text 3 falls just below 4.5:1 there. A fourth, subtler gray (the books' #8a918e) could return for large or decorative text only; it is not in v2.
Status
One color each for success, warning and danger, always with a word: the word carries the meaning, the color only repeats it. The three are tuned to about the same lightness, so each passes the same contrast as text and none looks more urgent just by being darker. That is also why they look alike in grayscale, and why the word is required.
| Role | Light | Lightness (L*) | Contrast on paper | Dark | Lightness (L*) | Contrast on paper |
|---|---|---|---|---|---|---|
| --ds-ok | #1a7f37 | 47 | 5.1:1 | #4ac26b | 70 | 7.6:1 |
| --ds-warn | #9a4708 | 40 | 6.4:1 | #d9a13b | 70 | 7.5:1 |
| --ds-bad | #b42318 | 40 | 6.6:1 | #f2786d | 65 | 6.4:1 |
Data: viridis, and its gray
The data layer is the only place color is free. Viridis is the scale for ordered values: its lightness rises steadily, so its order survives color blindness and grayscale. Beside it, a gray scale of the same lightness, step for step, for print, for a quieter chart, or for a second series.
--ds-data-0…9 and --ds-data-gray-0…9.Categories need a palette made for telling things apart, such as Okabe–Ito; v2 does not have one yet. Open
Light and dark
Every reading and tool page has both. One icon button switches them: a moon in light, a sun in dark. The choice is kept as ds.theme; with no choice kept, the system's setting rules. Exhibit displays open dark.
Dark is chosen with data-theme="dark" on <html>, which re-points every role at the night ramp. Data colors stay the same in both.