the trade family

Trade

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 · Yellow · 6 recommended palettes below

Best for
  • Financial and trading dashboards
  • Observability and monitoring platforms
  • Internal admin consoles
  • Operational data terminals
  • B2B utility products
Character
  • pragmatic
  • dense
  • tabular
  • utilitarian
  • operational
TypeSystem Sans · System Sans · System Mono
How it differs

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.

01 - Typography

The voice of trade.

Hero title - system-ui

Made with intention.

Hero subtitle - system-ui

A supporting lead carries the second voice without competing.

Section title - system-ui

Section heading at the second tier

Section subtitle - system-ui

Supporting copy holds context next to the title without competing for attention.

Card title - system-ui

Card title at the third tier

Body - system-ui

The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.

Caption

Smaller supporting copy, used for metadata and inline notes.

Meta - ui-monospace

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 - Palette

Resolved palette.

The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.

Backgroundcolor-mix(in srgb, rgb(234 179 8) 10%, white)
Surfacecolor-mix(in srgb, rgb(234 179 8) 4%, white)
Bordercolor-mix(in srgb, rgb(245 158 11) 12%, white)
Ink#0f172a
Brandrgb(234 179 8)
Brand · strongrgb(250 204 21)
Accentrgb(245 158 11)
On brandrgb(17 24 39)

03 · Primitives

The building blocks.

Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.

Buttons

Badges

DefaultAccentOutlineInk

Tags

DefaultAccentOutlineInk

Status

NeutralSuccessWarningDangerInfo

Filter controls

Icon containers

Small
Medium
Large

Fields

04 - Card archetypes

How content sits.

Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.

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.

ManifestTokens

Pricing

Recommended

Studio

$29/ month

  • Unlimited generations
  • Custom domains
  • Priority models

Profile

Mara ChenProduct design lead

Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.

AvailableFractional

Stat

99.9%

Uptime across all rendered sites this quarterLast 90 days

Testimonial

"The shared semantic tokens made the new family feel consistent from the first pass."
Jules ParkStaff designer, Patagonia Digital

05 - Motion

How it moves.

Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.

Card - hover

Lift on hover, hairline tightens

Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.

Button - focus

Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.

06 · Compositions

A few of the section topologies.

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.

See all compositions →

07 · See it live

See a full page.

A complete site rendered in Trade. Open the example to walk through every section in the family's voice.