Ovation · design system

The specimen

Everything below reads its values from app/theme-mocha.css — nothing is styled per screen. If a restyle looks wrong here it will look wrong everywhere, which is the entire reason this page exists.

Ovationthe shipping themeCodédexmeasured off codedex.ioMochameasured off getmocha.com

A specimen proves a theme is coherent. Only a real composition shows whether it is any good — see these on a full landing page →

Type roles

display

The one huge line on a landing page

Agents that don’t stall.

h1

Page titles

Team & access

h2

Section and sheet titles

Retire this run?

h3

Card titles and the wordmark

Ovation

name

An object’s label — a nameplate, not a heading

Stripe

lead

Intro copy under a headline

Ovation is a subscription like any other, which means our paid plans come with a coin.

body

Running prose

Every role owns its own size, weight, tracking, leading and case, so none of them has to compromise for another.

meta

Secondary information, table cells

$20/mo · 35 subscribers

eyebrow

A section label — furniture you skip past

Your Stripe products

caption

Data attached to an object

first 50 pro · #21

code

Literal code, ids, terminal output

run_8fk2 · 41 steps · resumed once

Colour

bg

bg-raise

bg-sink

accent

fg

good

warn

bad

Default ink

Dim ink

Faint ink

Accent ink

Controls

DefaultAccentLivePendingRetired

That address is already claimed

Surfaces & density

Subscribers

455

across three plans

Coins claimed

34 / 50

1 run live

Raised card

Elevation is a token.

Meter · 34 of 50

TSD

The coin

Grain comes from the theme’s --texture, so a flat theme yields a flat coin. The dye is the seller’s data, not the theme’s.

Guest brand

A customer’s surface, painted over the same structure. It overrides colour, shape and elevation — never the type roles, never the density.

Pricing

Free while you’re figuring it out.

Usage-based after that. No seat pricing, no sales call.

Durable runs are now GA