---
version: alpha
name: Gwern — Popular-essays list
colors:
  canvas: '#FFFFFF'
  primary: '#000000'
  body-ink: '#000000'
typography:
  heading:
    fontFamily: '"Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville",
      "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira'
    fontSize: 30px
    fontWeight: 700
    lineHeight: 33.75px
  body:
    fontFamily: '"Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville",
      "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
---

## Overview
A print-like popular-reading list with a small-cap serif heading, dotted underline and star-marked article links. Isolated component selected with `#popular`; the screenshot contains its measured bounds, not the entire page. Inspected 2026-10-05.

## Colors
Use a white page and black text with gray iconography and fine dotted rules. Topic links remain understated; typographic hierarchy supplies emphasis. Tokens are sampled computed colors; descriptive accent colors are visual observations, not measured hex values.

## Typography
Measured heading/label sample: "Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville", "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira, 30px, weight 700, leading 33.75px. Supporting sample: "Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville", "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira, 20px, leading 32px. These are local computed samples, not a universal type scale. Artwork and child spans may differ from their parent styles.

## Layout
This is one desktop column of the paired Newest/Popular grouping; on mobile it occupies the reading width. Preserve a hanging text indent and multi-line wrapping. Desktop screenshot: 428 × 471px at a 1440px viewport. Mobile evidence: 358 × 374px at a 390px viewport. Breakpoint thresholds are not inferred from two observations.

## Elevation & Depth
A flat print-like surface: separators and type weight define groups instead of shadows or filled cards.

## Shapes
Rectangular dotted navigation cells, small star-like list markers and fine horizontal rules. The monogram and ornaments are artwork, not ordinary text.

## Components
Small-cap heading, dotted rule and star-prefixed essay links. Keep titles readable and do not decorate every row as a separate card.

## Do’s and Don’ts
Preserve the reference-specific hierarchy, wrapping and spacing described above. Use original copy and assets when adapting. Keep links keyboard-accessible with visible focus. Do not infer animations, hover states or hidden menus from this static capture. No full accessibility audit was performed.