Design system

Lifted from blur.io, not from screenshots. Their theme object travels in the app bundle as plain data, so the grey ramp, the type scale, the 36 px control height, the 1 px tab indicator and the three themes below are theirs to the value. One thing is ours: the accent. Blur burns orange #FF8700; we take Zcash gold #F4B728, which already sits inside Blur’s own yellow range, so the system stays coherent and the site stops reading as a Blur clone.

- all three ship; the switch lives in the header on every page

01 · Colour

Ten greys, no more. Text never sits on a colour; colour is reserved for state and for the one accent. grey900 is the page, grey700 is a panel edge and a row hover, grey600 is every border, grey300 is every label.

02 · Glow

The single move that makes the whole thing feel like a terminal rather than a website: in the dark theme every piece of live text carries text-shadow: 0 0 16px currentColor. Medium halves it to 8 px, light removes it. Nothing else changes between themes.

0.1250 0.1250 left: with glow  ·  right: without

03 · Type

One typeface, monospace, everywhere, labels, prose, prices, headlines. Blur uses the proprietary Proto Mono; we use Azeret Mono, which is free, geometric and carries the same light weights. The ASCII characters themselves are deliberately not set in it: they stay on Consolas / Courier New / Lucida Console, the three fonts the 86 glyphs were audited against.

TokenSize / lineUsed forSample
subtext12 / 14captions, footnotesMined 4,113 of 10,000
body12 / 14tables, controls, the appMined 4,113 of 10,000
labelLarge14 / 16prose, stat valuesMined 4,113 of 10,000
headlineSmall20 / 24section titlesMined 4,113
subheadline32 / 48page titles, big numbers4,113

04 · Buttons

Border 1 px, radius 4, uppercase, 36 px tall. The rule worth stealing: every variant hovers to white. No variant invents its own hover colour, so a dense screen full of buttons stays readable under the cursor.

05 · Controls

ZEC
8 characters · 1.4820 ZEC

06 · Tabs, pills, tiers

Buy now Crown × Epoch 7 Common Uncommon Rare Epic Legendary One of one

07 · Stats strip

Floor0.0820 ZEC
Top bid0.0710
24h volume18.44
Owners1 902
Supply10 000
Burned1 344

08 · Table

Sticky header, 52 px rows, hover fills with grey700, selection tints with the accent, the first column can stick while the rest scrolls sideways. Numbers are always right-aligned and tabular.

CharacterTier Price USDvs floorOwner

09 · Item card

Square plate, meta under it, the buy bar slides up on hover. Selected state borrows the accent for border and tint, the same state the sweep slider drives.

10 · Bid ladder

Depth as a bar behind the row, not a separate chart. Your own level is gold.

11 · Overlays

12 · Spacing and radius

space
4 · 8 · 12 · 16 · 24 · 32 · 64 · 96
radius
2 (badges) · 4 (everything) · 8 · 16 · 21 (pills) · 50% (avatars)
control height
20 · 28 · 36 · 40 · 48
header
62 px, fixed, translucent, 10 px backdrop blur
rail / cart
264 px / 344 px
breakpoints
lg >1920 · md ≤1920 · sm <1280 · xs <960
scrollbars
hidden everywhere; an app page never scrolls, its panels do

13 · What we took, and what we left

From BlurOur version
grey ramp, radii, 36 px controls, 62 px headeridentical
text glow, three themesidentical
Proto Mono (proprietary)Azeret Mono
orange #FF8700Zcash gold #F4B728
ETH glyph and pool balanceZEC glyph, next-character price
sweep, cart, bulk buy/list/cancel, bid poolsame interactions, ZEC and characters
lending, points, airdropdropped, nothing to lend against

Every page on this site is built out of exactly the pieces above. Market is where most of them appear at once.