assets/system.cssassets/ui.jsassets/sample-data.js

One system for six interfaces.

Every token, component, chart and motif the six demos share. Switch the theme in the top strip to check both modes.

Colour

Brand constants from the Brandbook, UI tokens from the Web palette frame, and the additions we made (semantic colours, risk bands, chart palette).

Brand

Surfaces and text (theme-aware)

Semantic and risk bands (meaning only, always with a label)

Chart palette (fixed order) and sequential ramp

Type

PP Neue Montreal, Suisse Int'l Mono and Reckless when installed; Geist, Geist Mono and Instrument Serif Italic otherwise.

.t-displayseer

.t-h1 + .t-accentSee what the markets believe.

.t-capsEvery opinion has a price

.t-h2Interface heading

.t-h3Section heading

.t-title (Bold 16/24)Will ETH close above $5,000 on 31 Dec 2026?

.t-amount (Bold 32, −2%)$100.00

.t-bodyConditional markets forecast a success measure if a proposal passes and if it does not.

.t-ui (Medium 13)Markets · Create market · Leaderboard

.t-meta (Medium 12)$170K Vol. · 4m ago · Crypto

.t-micro / .s-specsEst. on Gnosis ChainMkt #2841Status: open0x5eed00

Components

Kit components first: pill search, category row, outcome rows, Up/Down, three-way and the bet slip.

Buttons

Search, chips, segments, tabs Search

Tags, states, verification, chains

CategoricalConditional+1.70%−0.70%sDAILIVESample data

LowModerateHighCritical

Market cards (kit 328×210, radius 9)

Outcome rows with probability wash

Stats, address, timeline

Lifecycle timeline

Table (sortable, tabular figures, scrolls inside its card on small screens)

Data viz

2px lines, end dots with a surface ring, hairline grid, labels in text colours, a crosshair tooltip on hover and keyboard (arrow keys on a focused chart).

Line, one series (area wash)

Line, YES vs NO branch

Forecast distribution (EF waves)

Bars and 100% stack

Motifs that carry data

Each interface owns one Electric Foundation motif, and each motif encodes something real.

States

Empty, loading, notice and toast.

Callouts and toast

Information, not the decision. The DAO vote decides; markets inform it.

Thin pool. A $500 trade moves this price by about 4%.