Feature
Generated families, real engineering
Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.
the trade family
Operational data terminal — Bloomberg, Datadog, Grafana, every row counts.
Trade is the utilitarian family — a palette-tinted canvas, system sans, hard-cornered rectangles, tabular numerics, and table-first composition. It produces dense, operational interfaces for people who sit in front of the screen for ten hours at a stretch and need to scan, not admire.
The references are Bloomberg Terminal, Datadog, Grafana, Linear's app view, and the kind of internal tools that look like they were built by the team that uses them. Three rules govern every decision: density first (at full HD, the primary table shows 25–35 rows), function over ornament (every element carries meaning the operator needs), and system-sans discipline (not Inter, not Space Grotesk — the system stack is part of the instrument feel).
Use Trade when the page is a tool: a live dashboard, a data terminal, a trading desk, an admin console. No hero, no value props, no testimonials. The top of the page is a live view.
Default palette · Teal · 6 recommended palettes below
Lab is mono-only and developer-tool flavored; Trade is system-sans and density-first. Both flat and hairline, but Trade is the data terminal where Lab is the instrument console.
06 · Recommended palettes
Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.
06 · Compositions
Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.
banner
Banner
Content stacks above a wide image rail.
sidebar
Sidebar
Text column paired with a media column.
bands
Bands
Alternating horizontal bands of copy and media.
breakout
Breakout
A featured module breaks the grid edge.
07 · See it live
A complete site rendered in Trade. Open the example to walk through every section in the family's voice.