Typography
The type scale: eight sizes, each with a name and a use. A page picks from these and adds none of its own.
Page title
30 px
text-3xl font-medium tracking-tight
The name of the page, once.
Swap on a known venue
Figure
20 px
font-mono text-xl tabular-nums
A number that stands alone: a count, a total.
2,314
Lede
18 px
text-lg leading-relaxed
The sentence under the title that says what the page is about.
A trade on a venue the catalog names: the asset given is disposed of, the asset received is acquired.
Section
18 px
text-lg font-medium
A heading inside the page.
What pins a rule
Body
16 px
text-base leading-relaxed
Prose: the guide, the letter, a rule's paragraphs. What the page is there to be read for.
A source rule reads what a provider returned into legs. It knows the chain and nothing about tax.
Secondary
14 px
text-sm
Tables, notes under a heading, the sidebar: read after the body, never instead of it.
What changed hands for the wallet, netted per asset, as the payload says.
Caption
12 px
text-xs
Chips, a count by a name, a hint by a control. Never for something that must be read; a link inside prose takes the secondary size.
swap-known-venue, not applied yet
Label
12 px
text-xs font-medium uppercase tracking-[0.1em]
The small head over a block: what the block under it is.
Movements
On a phone the whole scale steps up by an eighth: a page that says data-scale="phone-up" on its root has an 18 px root below 48 rem, so body reads at 18 and tables at 16, and the space around them grows alike. The rules pages say it; this library does not, since the fan on its stages is laid out in pixels.