Color

Dark is the home theme; light mirrors it on warm paper.

• Grounds:
  • bg is the page and the fill of outline cards.
  • panel is the fill of torn-paper cards.
  • surface is reading boxes (executive summary, charts, inputs).
  • hover is the hover fill.
  • band is the charcoal of the full-width bands, in both themes, with band-text and band-text-2 on it.
• Text: text → text-2 (decks) → text-3 (excerpts) → muted (kickers, meta). dim is for marks only.
• Gold:
  • accent is the brand hue, as a fill: Subscribe, the main hero action, progress bars, the play button.
  • As text, use accent-ink.
  • On a gold fill, use on-accent.
  • Hover goes to accent-hover.
• Drawing inks are used only inside drawings and drawn charts: draw-gold, draw-pale, draw-line, draw-paper and four colored inks, draw-teal, draw-brick, draw-violet and draw-amber. Each has a brighter dark-theme value. Never use them for UI or text.
• Status: status-good, status-caution and status-bad are for good/caution/bad sorts, always with a word. flag-danger is for BLOCKING flags only.

• bg

  #faf8f4 · #171512

  Page ground everywhere. Warm near-black in dark (the home theme), paper in light. Also the fill of outline cards (essay, case study, path, series, most popular).

• surface

  #fdfcfa · #1c1a16

  Raised reading surfaces: the executive-summary box, email input field.

• band

  #1f1c18 · #211e19

  Charcoal ground of the full-width bands (newsletter, From the channel) in BOTH themes; the bands have torn top and bottom edges.

• band-text

  #efe9dd · #efe9dd

  Headings and body on a band. Secondary copy on a band: band-text-2.

• band-text-2

  #cfc7b8 · #cfc7b8

  Secondary copy on a band (10.6:1 on band).

• paper-sheet

  #faf8f4 · #faf8f4

  A printed sheet: the newsletter's sample issue and stacked pages. Stays light in both themes, square, with a soft offset shadow.

• hero-bg

  #f2eee6 · #1d1a16

  Illustration plates behind essay art (hero, post-card thumbnails).

• panel

  #f2eee6 · #211e1a

  Paper fill of torn-edge cards (About topics, work capabilities, course portfolio cards, the course notepad, notes) and notices.

• hover

  #f1ede5 · #25221d

  Hover fill for cards, rows and nav tabs.

• accent-soft

  #f3ecdc · #2b251a

  Quiet gold wash behind icon discs and selected states. accent-ink reads on it in both themes (7.6:1 dark, 5.8:1 light).

• text

  #1a1815 · #ebe5d9

  Headlines, essay body, primary UI text on bg, surface, panel, hover.

• text-2

  #4f4a42 · #d2cabc

  Standfirsts and lead paragraphs on bg.

• text-3

  #5d574e · #bfb6a7

  Card excerpts, inactive nav tabs, secondary copy on bg and panel.

• muted

  #6e665b · #a39a8c

  Kickers, meta lines (category · minutes), taglines, TOC links on bg and panel. 6.6:1 dark, 5.3:1 light on bg.

• dim

  #8b8377 · #8c8376

  Tertiary marks: dotted link underlines, step numbers, disabled text. FAILS body contrast in light (3.5:1 on bg, 3.2:1 on panel) and on dark panel (4.4:1) — never set readable text in it.

• accent

  #c8a04a · #c8a04a

  Brass gold. Fills: Subscribe and the main hero action, the logo block, progress bars, play button, chart marks. 2.3:1 on the light ground, so a mark that carries meaning there needs an accent-ink edge or label.

• accent-hover

  #d9b25c · #d9b25c

  Hover fill of gold buttons (Subscribe, main hero action, play button). Currently a literal in 10 places on the site.

• accent-ink

  #6e5829 · #d8b267

  Gold as TEXT: the ampersand in the wordmark, arrow links, BETA badges, path kickers, executive-summary kicker. 9.1:1 dark, 6.4:1 light.

• on-accent

  #1a1815 · #1a1815

  Text on an accent fill (Subscribe button). 7.2:1.

• flag-danger

  #b03030 · #e07b6f

  Blocking flags in eval / rubric blocks: text and 1px border. The only non-gold hue in the system; always paired with the word BLOCKING.

• flag-danger-bg

  #fbeced · #3a2220

  Fill behind flag-danger text (5.1:1 dark, 5.5:1 light).

• line

  rgba(26,24,21,0.1) · rgba(235,229,217,0.1)

  Default hairline: section rules, header and nav borders, card grid dividers.

• line-2

  rgba(26,24,21,0.14) · rgba(235,229,217,0.15)

  Card and feature-tile borders.

• line-3

  rgba(26,24,21,0.26) · rgba(235,229,217,0.28)

  Chip borders, input borders, the strongest hairline.

• glint

  rgba(26,24,21,0.26) · rgba(235,229,217,0.28)

  Old top-edge highlight; the site now aliases it to line-3. Prefer the pen frame or a plain hairline.

• chart-em

  #a8822f · #d2a95a

  The one emphasis mark in a chart: the bar, dot or segment that carries the point. One per chart.

• chart-ctx

  #d6cfc3 · #5b5449

  Every other mark in a chart: comparison bars, the 'before' dot, lines between dots.

• chart-track

  #efe9dd · #2c2822

  The empty track behind bars and meters.

• draw-gold

  #c8a04a · #c8a04a

  Drawings: the main gold mass. Same in both themes.

• draw-pale

  #e2cd9a · #7d6533

  Drawings: secondary gold (pages, under-marks).

• draw-line

  #d6cfc3 · #5b5449

  Drawings: grey pen lines and paper outlines. The site maps it to three slightly different darks today (line-3, #5b5449, #4a443b); #5b5449 is the one to keep.

• draw-paper

  #f2eee6 · #211e1a

  Drawings: paper and screen fills inside a drawing. In dark it takes the panel color.

• draw-teal

  #00876c · #14a38a

  Drawings and drawn charts: teal, the first of the four inks.

• draw-brick

  #b4553a · #db6340

  Drawings and drawn charts: brick red. Crossings-out, the 'wrong' mark.

• draw-violet

  #7056a8 · #8e77d8

  Drawings and drawn charts: violet.

• draw-amber

  #c07a2a · #d98a3a

  Drawings and drawn charts: amber.

• status-good

  #4b7f52 · #7fc295

  Only in charts that sort good / caution / bad (zones), as a top rule or label, always with the word ('Holds', 'Trust the gut'). The site also uses #2f7d4f / #6fbf8a for the 'holds' column of essay pairs; merge into this token (cleanup).

• status-caution

  #c8862a · #e0a24f

  The middle zone in a good / caution / bad sort, always with its word label.

• status-bad

  #b03030 · #e07b6f

  The bad zone in a good / caution / bad sort, always with its word label. Same hue as flag-danger.