*Source commit: 59aa901 — feat: initialize Web Design Engineer project structure and docs*
Imagine walking into a wallpaper shop with twenty-five samples from different eras, countries, and designers. Some are as clean and cold as an Apple Store, some as bold as a 1960s New York subway poster, some as sparse as a Japanese magazine where the whitespace makes you think the printer forgot the text.
That's not a shop. It's a code repository. In a single day, someone packed twenty-five "design styles" into code.
What does "codifying design styles" mean?
We usually say a website "feels designed" based on intuition. But the author(s) did something more radical: they translated twenty-five of the most recognizable schools in design history, one by one, into React components.
Not imitation — translation. Like translating a poem from French to Chinese: you must preserve not just the meaning, but the rhythm, the breath, and that slight tightening in your chest when you finish reading.
The twenty-five styles are grouped into seven families:
- Editorial / Minimalism — Apple HIG, Muji ( Kenya Hara), Aesop, Dieter Rams' Braun, Monocle. Common trait: the courage to leave blank space. Whitespace isn't unfinished work; it's an attitude.
- Information Architecture — Pentagram, Vignelli's Swiss grid, Bloomberg Terminal, Tufte's data-ink, NYT The Daily. These people believe information itself can be beautiful, without decoration's help.
- Modern tools / SaaS — Linear, Vercel, Raycast, Notion (pre-AI era). Thin hairlines, warm-tinted dark backgrounds, one accent color for everything.
- Motion / Experimental — Field.io, Active Theory, Resn. They treat the web page not as a page but as a theater.
- Brutalist / Anti-design — Are.na, Bloomberg Businessweek (Turley era), post-2017 Balenciaga. Deliberately .raw, like an unedited photo.
- Warm humanism — Mailchimp's Freddie, Stripe Press, Headspace. Handwriting, rounded corners, evoking a person's voice rather than a machine's.
- Genre / Era — Y2K retro-futurism, mid-century modernism. Time-coded; you can tell which decade they were born in at a glance.
- A palette (not the default Inter + blue-purple)
- Actual fonts (or the closest Google Fonts substitute)
- Signature moves (Bloomberg's amber-on-navy, Aesop's small-caps, Linear's hairline)
- A scenario-appropriate artifact, not a generic landing page
- batch-size went from one animated demo to five clearly named Sections: WhatIs, OneUpdate, SharpFlat, Effective, TrainVsServe.
- bert became SectionWhat, SectionTrain, SectionHeads, SectionBothEyes, SectionFamily, SectionLiveIn2026 — each answering a specific question instead of vaguely "introducing BERT."
- deepseek-r1 was split into Hero, AhaCases, GRPO, Distill, Emergence, AfterR1 — telling a complete story arc: why does DeepSeek R1 matter? What are those Aha Moments? How does GRPO work? What is distillation? What are emergent behaviors? What comes after R1?
Each style is more than colors and fonts. Linear's components have hairline borders; Aesop's have small-caps labels and a sprig of sage; Bloomberg Terminal has a six-pane grid with amber-on-navy; Tufte has inline sparklines and small multiples. You don't need to know the jargon — open the page and you know: "oh, it's that one."
The crazier part: it's not a showcase, it's recipes
The README is explicit: this is not one unified template, not a 16:9 stage. Every recipe is a complete page. Linear is a product landing page; Aesop is a pharmacy product page; Bloomberg Terminal is a six-pane trading workstation; Are.na is a research channel.
Each recipe ships with:
Components are small enough to read — 150–300 lines of TSX each — like a short story, not a novel.
Meanwhile: refactoring all the old sites
The same day, seven knowledge sites — batch-size, bert, deepseek-r1, deepspeed, loss, mcp, nlp, rlhf — all migrated from postcss to rsbuild, with components broken into more modular Section components.
What does this mean? These sites were originally "one page to the end" narratives; now they're "chaptered" — each major concept gets its own component, independently readable, maintainable, and reusable. Like splitting a thick book into chapters you can pull out individually.
An interesting observation
The two things in this commit — the style recipe library and the knowledge-site refactor — are two faces of the same mindset:
One face is horizontal: collect all the classic styles of design history and encode them as reusable components. Like a chef preparing all the foundational sauces of world cuisine, stored in jars, ready to use.
The other is vertical: split every AI concept explainer into independent chapter components, each understandable alone, combining into a full narrative. Like breaking a long novel into chapters — open anywhere, or read start to finish.
Breadth and depth. In the same repository, someone is doing both at once.
Why this is worth remembering
We often talk about "learning AI" or "learning design," but rarely put both in the same frame. This repository expresses both knowledge and aesthetics through code.
When you open the Bloomberg Terminal demo, you're not just looking at a color scheme — you're experiencing a philosophy of information density. When you open the Tufte demo, you're not just seeing font sizes — you're feeling a faith that "data should speak for itself."
Twenty-five styles, twenty-five worldviews. Code becomes the vessel that carries worldviews. This idea itself is more worth spreading than any single technical point.
*~2,300 words (original)*