ux-patterns
Docs and Explainer Sites
Screenshot gallery of the whole set: https://claude.ai/artifact/3yFuLuEBGzVquzbyCS2MLJ
Documentation sites, visual essays and explainers that are light, well set and figure-led. Gathered 2026-10-02 for the brand work on The Way of Markdown, as reference for a site that teaches rather than sells.
The taste filter: light not dark, serif or mono rather than default sans, one idea per screen, drawings that explain. Nothing corporate-SaaS, nothing busy, nothing that is just raw HTML.
The first three groups came from a research pass; the last group is sites Rufus already liked and used to set the filter.
Verdicts
Rufus reviewed the set on 2026-10-02. Each item file has his comment.
Yes, or useful: Devouring Details (the most obvious alternative; the orange could be the link colour), Maggie Appleton (a definite possibility, garden-like), Sketchplanations (contender for a third direction), Apple HIG (beautiful, don’t copy), Ink & Switch (love it, but research register), Stripe Press (lovely, catalogue-shaped), Teenage Engineering (home page, not us, worth referencing), Andy Matuschak (good also-ran, notebook sites), Distill (reports), US Graphics (datapressr, not here).
No for this site: Stripe Docs, Linear, Raycast, Tailwind, Josh Comeau, The Pudding, Byrne’s Euclid.
Docs sites
Stripe Docs
The benchmark for documentation: light, three-column, inline diagrams, code beside prose, never busy.
docs.stripe.com →Apple Human Interface Guidelines
Light, big calm headlines, flat explanatory illustrations.
developer.apple.com →Tailwind CSS Docs
Elegant type, live examples as figures, restrained colour on white.
tailwindcss.com →Teenage Engineering Guides
Swiss technical-manual aesthetic: mono caps, grids, product line drawings.
teenage.engineering →Explainer and visual-essay sites
Ink & Switch
Research essays: serif, paper-light, careful figures, ground-up explanation.
inkandswitch.com →Maggie Appleton
Illustrated essays: warm paper tones, line drawings carry the argument.
maggieappleton.com →Josh W. Comeau
Interactive explainers: whimsical, and the diagrams genuinely teach.
joshwcomeau.com →Out of the ordinary
Devouring Details
Rauno Freiberg's paper-light interaction-design textbook. The air of cosmos.so with worked examples.
devouringdetails.com →US Graphics
Formerly Berkeley Graphics. Dotted grid, mono caps, Swiss technical drawings.
usgraphics.com →Byrne's Euclid
Nicholas Rougeux's reproduction: flat colour geometry diagrams, serif, one proposition per screen.
c82.net →Sketchplanations
One hand-drawn explanation per screen, flat colour, white space.
sketchplanations.com →Rufus’s own picks
Making Software
Numbered figures, dotted grid, cobalt line drawings, serif prose.
makingsoftware.com →Co-Star
Light paper, faint grid, elegant serif, mono caps, one idea per screen.
costarastrology.com →