/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
card
#FFFDF6
ink
#16150F
acid
#C6F225
acid-tint
#EFF9CC
muted
#6B6653
line
#E4DEC9
link-hover
#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

  1. Ordered item
  2. 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

JUNO FAMILY COMPARISON
MODELYEARMIDI
Juno-61982
Juno-1061984Yes

07 — BUTTONS

08 — DARK TOKENS

bg / ink
#16150F
card
#1E1D14
line
#33301F
text
#F5F1E8
muted
#B4AD93
acid (links)
#C6F225
acid-dim
#8FAE1B
alert
#E08A5B