/DESIGN-SYSTEM
Every element, styled
The full HTML vocabulary in house style. When extending the site, find the element here and copy its treatment.
01 — COLOR TOKENS
paper
#F5F1E8
#F5F1E8
card
#FFFDF6
#FFFDF6
ink
#16150F
#16150F
acid
#C6F225
#C6F225
acid-tint
#EFF9CC
#EFF9CC
muted
#6B6653
#6B6653
line
#E4DEC9
#E4DEC9
link-hover
#5F7A00
#5F7A00
02 — HEADINGS
H1 — Page title
H2 — Section
H3 — Subsection
H4 — Card title
03 — TEXT
Body paragraph. A sentence can carry a standard link, strong emphasis, italic emphasis,
marked text, and inline code.
04 — LISTS
- Unordered item
- With standard markers
- Ordered item
- For steps and rankings
05 — BLOCKQUOTE, PRE & HR
"Pull quotes get the acid panel — one per article, maximum."
midi.send([0x90, 60, 100]);
06 — TABLE
| MODEL | YEAR | MIDI |
|---|---|---|
| Juno-6 | 1982 | — |
| Juno-106 | 1984 | Yes |
07 — BUTTONS
08 — DARK TOKENS
bg / ink
#16150F
#16150F
card
#1E1D14
#1E1D14
line
#33301F
#33301F
text
#F5F1E8
#F5F1E8
muted
#B4AD93
#B4AD93
acid (links)
#C6F225
#C6F225
acid-dim
#8FAE1B
#8FAE1B
alert
#E08A5B
#E08A5B