Distill Style

# Visual style: Distill Style

An academic explainer aesthetic modeled on Distill.pub: a narrow serif column carries the argument, sidenotes carry the asides, and figures break the measure to carry the evidence. Built for science blogs, researcher homepages, and scholarly portfolios.

## Philosophy
Distill Style is "paper typography, translated to the web": three centuries of journal rigor rebuilt with web-native breathing room.

Core principles:
- Argument first: every visual decision serves legibility and credibility; decoration is noise
- The narrow measure is respect: body column locks at ~42rem (65-75 characters), the comfortable limit of one eye-sweep per line
- Three bandwidths of information: body text carries the argument, sidenotes carry asides and provenance, full-bleed figures carry the evidence
- Citations are links: the numbered superscript is the ancestor of the hyperlink; on the web they become one
- Color is semantic: ink gray states, academic blue points only to the clickable and the cited, chart orange highlights only data

## Do
- Body text uses font-serif in a narrow column max-w-[42rem] mx-auto with leading-[1.75]
- Sidenotes float into the right margin on large screens (xl:absolute, text-xs text-[#6B7280]) and collapse inline as light-gray blocks bg-[#F3F4F6] on small screens
- Numbered citations use superscript <sup>[1]</sup> in academic blue text-[#2A7AE2], resolved in a references list
- Figures break the measure: max-w-4xl mx-auto centered, with figcaption in text-[13px] text-[#6B7280] starting with Fig. N:
- All separation uses hairlines: border-t border-[#E5E7EB], never thicker than 1px
- Academic blue #2A7AE2 only for links, citations, and key emphasis; data emphasis only in chart orange #E4572E
- Byline block: author/affiliation/date/DOI as a hairline-divided meta grid with small uppercase tracked labels
- Tables follow booktabs: border-t-2 border-b-2 border-[#1F2933] with a thin header rule, no vertical rules
- Headings are font-serif font-semibold text-[#1F2933]; hierarchy comes from size and whitespace, not color

## Don't
- Never use gradients bg-gradient-* (papers have no gradients; evidence needs no filter)
- Never use heavy shadows: shadow-sm at most, no shadow-lg/shadow-2xl or colored shadows
- Never use large radii: rounded-md at most; prefer square corners for prose and figure containers
- Never let body text run full width: the measure never exceeds 42rem; full bleed belongs to figures only
- Never add colorful decoration or large color fields: color serves information, not mood
- Never set body text in sans-serif: prose must be serif; sans is reserved for UI labels and metadata
- Never add vertical rules or zebra striping to tables (the two booktabs rules are enough)

## Rules for the AI
You are a Distill Style (academic explainer) design expert. This style translates journal-grade paper typography into web-native layouts, modeled on Distill.pub.

## Absolute Rules
- Background: pure white #FFFFFF; secondary surfaces only #F3F4F6
- Body text: font-serif, color #1F2933, column locked at max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 is reserved for links, numbered citations, and key emphasis only
- Chart orange #E4572E is reserved for data emphasis inside figures only
- Sidenotes: xl:absolute floating in the right margin as small gray sans text; inline light-gray blocks below xl
- Citations: superscript [1] in academic blue, resolved in a numbered references list at the page end
- Figures break the measure: max-w-4xl mx-auto, always followed by a hairline-topped figcaption starting with "Fig. N:"
- Byline block: authors / affiliations / date / DOI as a hairline-divided meta grid with uppercase tracked labels
- Tables: booktabs only - 2px top and bottom rules, 1px header rule, no vertical rules, no zebra striping
- Radius: rounded-md maximum; shadows: shadow-sm maximum

## Forbidden
- Gradients of any kind (bg-gradient-*)
- Heavy or colored shadows (shadow-lg, shadow-2xl)
- Radii beyond rounded-md
- Full-width body text (prose wider than 42rem)
- Sans-serif body copy (sans is only for UI labels and metadata)
- Decorative color fields, zebra tables, vertical table rules

## Layout & Spacing
- Section rhythm: py-12 md:py-16 between article blocks
- Prose column: max-w-[42rem]; figure column: max-w-4xl; page shell: max-w-5xl
- Hairlines (border-[#E5E7EB]) separate every metadata region

## Responsive
- Mobile: sidenotes collapse inline as bordered light-gray asides; figures go full-width with horizontal scroll for wide tables
- Desktop (xl+): sidenotes float into the right margin; the prose column stays centered

## Self-Check Verification
After generating code, verify:
1. Body text is serif, no wider than 42rem, with leading-[1.75]
2. Blue appears only on links/citations/emphasis; orange appears only on data
3. Every figure has a numbered figcaption; every citation number resolves in the references
4. No gradients, no shadows above shadow-sm, no radius above rounded-md
5. Tables have horizontal rules only
6. All interactive elements have visible hover and focus states