Design system

The patterns

Every pattern on this page is rendered by the site's own stylesheets, so if something looks wrong here it looks wrong on the site. Each one says what it is for. Before inventing a component for a report, find the pattern that already does the job.

Principles

Today first, the archive second.The newest briefing gets the most room. Older material is reachable, compact and searchable.

Reads like a newspaper, works like a tool.Serif and space for reading; mono and controls for finding, filtering and listening.

Every figure has a source.A number, a quote or a claim links to where it came from. No source, no number.

One job, one pattern.If a pattern already does the job, use it. Reports never ship their own styles.

What we don't do

No shadowsexcept on floating layers (the search palette). Lines separate; nothing hovers.

No gradientsand no decorative strips. Colour is flat and means something.

No side accent barsto mark state, ever. A quote gets a hanging quotation mark.

One brand colour.Green marks the brand word, the subject of a title, live state and links. Nothing decorative.

Two weights.Geist at 400 and 500. Hierarchy comes from size, the serif and space, not bold.

No emoji in the interface,titles and share cards included.

Identity — Musgo

Chosen in October 2026: a moss accent on a green-tinted near-black, replacing GitHub's success green (#3fb950) on GitHub-dark, the look most generated sites share. Both themes pass AA. The other two palettes stay here for reference; the colour lives in two token blocks at the top of styles.css.

Tokens

Defined once at the top of styles.css. Components use tokens, never raw values.

Colour

--bg

--bg-card

--bg-card-hover

--on-surface

--on-surface-variant

--muted

--primary · the brand

--primary-dim

--warn · diagrams only

--border

Type — three faces

--f-displayInstrument Serif — titles and figures

--f-bodyGeist — reading and interface text

--f-monoGeist Mono — labels, dates, data, controls

Type scale — nine fixed sizes, three fluid

--fs-2xs · 11Eyebrows and mono metadata

--fs-xs · 12Mono controls, captions

--fs-sm · 13Secondary text, tables

--fs-base · 15Interface and summaries

--fs-md · 17Long-form reading

--fs-lg · 22Card titles, the brand

--fs-xl · 28Story titles

--fs-2xl · 36Section heads

--fs-3xl · 461,092

--fs-display-smSpecial report

--fs-displayThe AI Briefing

--fs-heroAI Reports

Shape

--r-sm · 4

--r-md · 8

--r-lg · 14

--r-pill

Small for inline bits (code, tags), medium for controls (buttons, rows), large for containers (player, tables, figures).

Motion — hover each

Fast for hover and colour, base for bars and panels, slow for entrances and the headline morph between index and report. All use --ease and switch off with reduced motion.

Shared patterns

Used on the index and in the reports.

Eyebrow · .eyebrow

Latest · Friday 2 Oct · 9 min read

The small label above or beside a title: kind, date, count. <b> inside it, or .eyebrow-accent, takes the brand colour for the one word that matters. Older report markup uses .section-label, .category, .date-line, .special-category, .special-date, .player-title and .stat-label; those are the same pattern under legacy names.

Buttons · .btn .btn-sm .btn-xs .btn-primary .link

Read the briefing →

One family. .btn for secondary actions, .btn-sm inside the top bar, .btn-xs for a compact toggle like playback speed, .btn-primary for the single main action on a screen, .link for text-only actions.

Top bar · .topbar

Slides in once the page header scrolls away. In reports it shows the current section, reading progress and a mini audio control once the briefing has started.

Audio player · .audio-player

AI News Daily · 2 Oct 2026 · EN

make_audio.py writes this markup and site.js brings it to life: the waveform from audio/<day>.json, the speed control, the seek bar. The index builds the same markup. Never add a player script to a report.

Accent in titles · h1 em

Building Agent Skills in 2026: Progressive Disclosure as a Design Pattern

The green italic marks the subject of a title: at most three words, once per title. Never a year, a number or a whole clause.

Report patterns

The building blocks of a daily briefing. write_report.py produces them; hand-written reports use the same markup.

Section label · .section-label

Headlines

News item · .news-item with .sources

Pi reaches 1.0

Earendil's Pi hits 1.0 with 1,092 points and 339 comments, more than double anything else on the front page.

Original HN

One story. Every item links its source and, when there is one, the discussion.

In numbers · .stats-grid > .stat-card

1,092

points on Pi's 1.0 release

more than double anything else Original

483

points on Cloudflare's Clef launch

second only to Pi Original

307

comments on Git's SHA-256 plan

one of the busiest threads Original

Up to four figures from the day's material. Each note links where the number came from.

Follow-up · .follow-item

▸What Harness actually contains. Watch for documentation, licence terms and independent breakdowns.

Original

"Why it matters" and "Watch": what to look for next, and what would prove the story wrong.

Pager · .pager (report.js)

Section index · .page-toc (report.js)

Special-report kit

Long-form reports may only use these. If a report needs something new, add it here and to styles.css first.

Prose

The memory taxonomy

Borrowed from cognitive science, a production agent juggles several distinct memory types, layered across two tiers. Inline code stays in mono.

1.1 Memory types

Working: the current task state and recent turns.
Episodic: specific past events, in order.

There is no free lunch, only the right lunch for your workload.

Table · .table-wrapper > table

Type	What it holds	Analogy
Working	Current task state, scratchpad	RAM
Episodic	Past events, in order	A journal
Semantic	Distilled facts	An encyclopedia

Code block · pre

memory.store(event, tier="episodic")

Diagram · figure.diagram

Text sizes go on the <text> as font-size; roles and colours come from the classes.

Text roles: .label .title .kicker .value .data .caption, coloured with .muted or .accent. Shapes: .box .box-raised .box-accent .pill .outline .frame and bars. Lines: .edge .flow .dash .grid .axis .rail. Points: .dot .marker. No colours in the SVG itself.

Citation · sup.cite → #source-n

Only 55.9% of origins pass all three Core Web Vitals.⁴ Most fail on loading.^3,4

Every figure links to its source. Number the Sources list (<li id="source-4">) and cite with <sup class="cite"><a href="#source-4">4</a></sup>. The migration script does it for reports that use bare <sup> numbers.

Specimen · .frame · .specimen

The only place a report may carry its own colours: a .frame showing a swatch, or a .specimen reproducing another product's type. Everything else uses the kit.

References · .ref-section

Papers

Hu, Lu, Clune — Automated Design of Agentic Systems. arXiv:2408.08435

Index patterns

Only on the front page; they live in home.css.

Topic chip · .chip

Special-report card · .sp

Memory & Engineering

AI Agent Memory in 2026: Architectures, Frameworks & Trade-offs

The memory taxonomy · Vector vs graph vs OS-tiered · Mem0 vs Zep vs Letta

28 Jun 20267 min →

Archive row · .row

30 WedResponsible release of AI-generated mathematics · OpenAI posts its DevDay recapInfrastructure8 min