Design specs

A public catalogue of reusable interface design systems. Each specification captures visual rules, tokens, layout constraints, and component behaviors well enough to build an interface in that exact aesthetic.

Data over prose
Multi-paragraph narrative summaries are replaced by dense data tables, execution waterfalls, and telemetry charts.
Instrument grade
Every element serves an analytical purpose. Decorative icons, glowing trace effects, and functionless pills are prohibited.
Zero AI fluff
Labels and notes state concrete mechanisms and units. Conversational filler, greeting banners, and em dashes are eliminated.
Local dependencies
Typography relies on native system font stacks, avoiding third-party font downloads and runtime bloat.

Catalogue

Paper dynamics

A paper-backed analytical interface with fine rules, restrained plots, and readable measurements. Built for studying changing signals, state-space trajectories, and coupled oscillators.

Typography Avenir Next, Georgia, Menlo
Corner radius 2px controls, 0px containers
Max container 1600px desktop
Signature element 3D wireframe plane stack
Open live example Read specification
Paper dynamics interface preview

Broadsheet audit

A high-contrast black-and-white broadsheet with serif body text, ruled data tables, summary strips, execution waterfalls, and restrained semantic tinting. Built for diagnostic reporting and system audits.

Typography Georgia, Menlo, Consolas
Corner radius 0px unrounded geometry
Max container 1180px broadsheet
Signature element SVG execution waterfall
Open live example Read specification
Broadsheet audit interface preview

Systems benchmark

A high-density system sans-serif benchmark report with shaded tabular data, executive callout boxes, and responsive grids of axis-labelled telemetry charts. Built for profiling regressions and memory allocations.

Typography System Sans (-apple-system), Menlo
Corner radius 0px unrounded geometry
Max container 1120px benchmark
Signature element Telemetry chart grid
Open live example Read specification
Systems benchmark interface preview

Using specifications with AI agents

Every specification adheres strictly to Google's DESIGN.md format. To instruct an AI coding assistant to generate an interface in one of these aesthetics, pass the raw text of design.md directly into your session prompt: 

Follow the design tokens and layout rules in designs/broadsheet-audit/design.md to build this dashboard.