Design systemReconstructed from opensea.io · Aug 2026Live components

The OS2 system, as measured and rebuilt.

Every sample below is the production component, not a drawing of one — the same theme builds all four concepts. Measured from opensea.io, written into a 15‑section spec. Toggle the theme in the status bar to see the light override.

52pxicon rail64 / 68pxtop bar32pxstatus bar48pxtable row32pxpill18pxchip

Color

Near‑black neutrals with a cool tint, one accent used sparingly, and depth from alpha‑white glass rather than shadows. Tokens are RGB triplets, so alpha variants work everywhere.

Ground & surfaces

bg-app#101011

bg-primary#141415

bg-secondary#17181A

bg-additional-1#1B1D1F

bg-additional-2#26272D

bg-additional-3#3C3D40

Text & hairlines

text-primary#FFFFFF

text-secondary#ACADAE

text-tertiary#434447

border-1#26272D

border-2#34353C

border-3#434447

Glass (alpha white)

glass-12%

glass-24%

glass-38%

glass-412%

glass-516%

inset-ring1px · 8%

The one accent

blue-1#83C3FF

blue-2#2092FF

blue-3 · primary#0786FF

blue-4#0679E6

blue-5#055EB3

logo disc#0086FF

Semantic

success#47BB64

warning#FFCC00

caution#F47100

error#E24756

link= blue-1

overlayblack 60%

Rarity (Packs + Cards)

legendary#FF8A00

epic#D358FF

rare#00A3FF

common#898A8C

uncommon (Cards)#47BB64

—

Type

Mono is the data typeface — every number, timestamp, chip and label. Sans carries names and sentences. Geist stands in for GT America, which isn\u2019t licensed for this study.

display-xlSwap everything.60 / 63 · −1.5px

display-lgSwap everything.48 / 56 · −1.2px

display-mdSwap everything.32 / 40

heading-lgSwap everything.32 / 40

heading-mdSwap everything.24 / 30

heading-smSwap everything.20 / 25

heading-xsSwap everything.18 / 22.5

mdSwap everything.16 / 24

sm · body defaultSwap everything.14 / 21

xsSwap everything.12 / 18

2xsSwap everything.10 / 14

label-monoFloor price · 24h volume · owners12 / 15 · uppercase · 60%

data · mono118,420.5 · $2,507.03 · +2.1% · 0.0845 BTC · 00:42numbers are always mono

Chrome & spacing

Three fixed bars — 52px rail, 64px top bar, 32px status bar — and content gets the rest. On a phone the rail becomes a 56px bottom tab bar and the status‑bar controls move into a sheet. Radii step 2 to 24px; controls are always full pills.

64 / 68

Live32

Radius scale

xs · 2sm · 4md · 6lg · 8xl · 122xl · 16full · ∞

Breakpointssm 393 · md 768 · lg 1025 · xl 1280 · 2xl 1440 · 3xl 1728Shadowshadow-xs 0 1 2 / 3% — the only one

Controls

One blue button per view, paired with a bordered secondary. Hover lifts 2px; press scales to 0.97.

Button · primary

h-12 / h-10 / h-8 · rounded-full

Button · secondary / ghost / frosted

Pill · frosted (filters)

h-8 · glass-1 → glass-3 when on

Pill · solid (tabs)

Segmented

h-6 / h-8 / h-10

Chip · tones

DefaultFrostSuccessWarnLegendaryEpicRareCommon

h-[18px] · mono uppercase

Checkbox · stepper · keycap

Reduce only2G/

Input

Size10,000.00

h-10 · border-1 → blue-3 on focus

Steps

✓Eligibility2Identity3Funding4Agreements

Data display

48px table rows that compress in Pro mode, green and red only for direction, and a live row that fades over two seconds.

Floor price0.42 ETH

24h change+12.8%

Unrealised−$15.90

Meter

Probability pills

Yes 62¢No 38¢Yes 23¢No 77¢

MarketMark24h

₿BTC‑USD118,420.5+2.1%

ΞETH‑USD2,507.03−0.8%

◎SOL‑USD212.40+4.3%

Domain components

Added by the concepts, built from the same primitives: one fee box for three partners, asset glyphs, two rarity ladders, slab imagery and pack artwork.

Fee disclosure · one component, three partners

Hyperliquid taker · 0.045%$4.50

OpenSea builder fee · 0.05%$5.00

Est. slippage · 0.02%$2.00

Est. total fees$11.50

Kalshi fee · $0.07 × 0.62 × 0.38 × 100$1.65

OpenSea share · 30% of fee (included)$0.49

Total$63.65

Partner fee and OpenSea fee are always itemised separately; OpenSea's share of Kalshi's fee is shown as included, never added.

Asset glyphs

₿Ξ◎HXÐLP

Rarity · PSA Packs (4 tiers) and Cards (5 tiers)

legendary · 0.5%epic · 5.5%rare · 24%common · 70%

Legendary · 0.5%Epic · 2.5%Rare · 10%Uncommon · 25%Common · 62%

Slab · inset ring

Pack artwork

LockupsOpenSeaPerps

Motion

Micro‑motion, not choreography. Nothing bounces and nothing exceeds 300ms except the data fade. Reduced‑motion collapses everything to 10ms.

ease-out-quintpanels, rails, modals, theme switch · 300mscubic-bezier(0.22, 1, 0.36, 1)

ease-out-circcard hover lift · 200mscubic-bezier(0, 0.55, 0.45, 1)

ease-out-expolive-row fade · 2scubic-bezier(0.16, 1, 0.3, 1)

ease-outbuttons, data flashes · 150–800mscubic-bezier(0, 0, 0.58, 1)

Try it

Pick an animation

Live dot: ping 1s · holo ring: shine 6s

Rules

Derived from what the live product does consistently — the part of a system that no token file captures.

Pill every control; mono every number.
12px uppercase mono labels at 60% opacity above values.
Alpha‑white layers with backdrop‑blur over imagery; a 1px inset white‑8% ring on every image.
Blue only for the one primary action per view; pair it with a bordered secondary.
48px table rows; green and red only for direction.
200ms hover lift, 300ms quint panels.
Exact casing: Buy Now · Make Offer · Connect Wallet.

Don't

Drop shadows for elevation; pure black grounds.
Gradients as brand decoration — only image fades and the blue progress fill.
Underlined links; Title Case sentences; exclamation marks; emoji.
700‑weight type; letter‑spacing in body copy.
Colored icons — icons are currentColor.
Two blue buttons side by side.
Hiding a fee, a rule or an odds table behind a disclosure link.

Source: a measured audit of opensea.io (a dozen page patterns at 1280px and 375–390px, CSS custom properties read from the live stylesheet) written into a 15‑section brand & UI spec, then compiled into the Tailwind v4 theme in app/globals.css. Stand‑in typefaces and illustrative data are labelled wherever they appear.