Styleguide

TOKENS, TYPE, CONTROLS.

Colour tokens

Light · Gallery

Dark · Night

Type scale

Display 52/54 · 900

TRADE DATA

H1 32/38 · 800

Shipment results

H2 22/28 · 700

Filter the set

H3 16/22 · 700

Export

Body 15/25 · 500

Body text over two lines uses text, not text-2.

Label 11/14 · 700 caps

Start trial

Data-L 13/20 · DM Mono

848180 · $184,300

Data-S 11.5/16 · DM Mono

1–6 OF 4,182 SHIPMENTS

Buttons

Form controls

Six-digit HS code.

Needs six digits.

Select

Tags

MachineryChemicalsTextilesMetalsAgri-foodElectronicsPlasticsMinerals

Table, skeleton, toast

Search v2 states

The states the query builder must paint. A component that is not here, with all its states, does not exist (UI contract §4).

OR chips — rest, invalid value, disabled with reason, full

DIGITS ONLY · 2/4/6/8

THE ODD-LENGTH VALUE IS MARKED, NOT SILENTLY DROPPED

COMPANY SEARCH IS NOT AVAILABLE FOR THIS MARKET — USE HS AND PARTNER

AT SIX VALUES THE INPUT CLOSES: MORE IS ANOTHER QUERY, NOT A FILTER

Slices strip — a query that expands into datasets

2026-05 · HS 8481COMPLETE2026-05 · HS 8413SAMPLE2026-04 · HS 8481SAMPLE2026-04 · HS 8413SAMPLE

Local filters refused (409)

Filters need the full dataset

THOSE FILTERS ONLY APPLY TO COMPLETE DATASETS.

value_min, sort would describe the 50-shipment sample, not the market. The month 2026-04 is queued; filters unlock when the data lands.

Usage meter (header)

CONFIRM EMAIL TO DOWNLOAD

Computed WCAG contrast

Ratios computed in the browser from the live token layer. Text pairs need 4.5:1, interactive boundaries 3:1. Disabled states are exempt. Failures: 0.

PairRatioMinResult