COLLECTION · DESIGN SYSTEM v1
Collector zine
Objects are precious, so the interface acts like packaging: heavy ink outlines, hard offset shadows, halftone dots, stickers set at a tilt. Paper is warm, never white. One saturated colour owns each collection; the app itself stays quiet so the artwork shouts.
01 · COLOUR
{{ c.name }}
{{ c.hex }}
{{ c.use }}
Rule of one
A screen carries paper + ink + one accent. Collections each own an accent permanently — vinyl is teal, board games orange, retro games cobalt, books pink, sneakers yellow. Never recolour a collection to match a screen.
Pro mode = hue shift
Dealer mode rotates the whole palette −52° and keeps the neutrals. Same shapes, unmistakably a different mode. Never mix pro and personal colour on one screen.
02 · TYPE
Display / Bricolage 800
Screen titles, values, cover type · −3 to −5% tracking · 22–62px
Heading / Archivo 700
Item names, card titles, buttons · 13–15px in app
Body / Archivo 400 — descriptions, notes and the sentences that explain what a number means. Never below 12px on device.
Line-height 1.5, text-wrap pretty
META / DM MONO 500 · UPPERCASE · .12–.18EM
Labels, dates, catalogue numbers, anything machine-ish · 8–11px
Three voices only
Display shouts, Archivo talks, DM Mono files the paperwork. If a piece of text doesn't fit one of those jobs, it probably shouldn't be on screen.
03 · SURFACES & GEOMETRY
Card
border 2.5px #17130F
radius 14–18px
shadow 4px 4px 0 ink
Inset row
no shadow
1.5px hairline divider
used inside cards
Empty slot
dashed #B9AC99
always an invitation,
never an error
Hero / dark
for the object itself
and for totals
coloured shadow allowed
Spacing scale: 4 · 6 · 9 · 13 · 18 · 22 · 34. Screen gutter 20px. Cards never nest more than two deep. Halftone texture is radial-gradient dots at 6–9px, only on colour fields and cover art — never on paper.
04 · COMPONENTS
BUTTONS · 44px MIN
Primary
Accent
Secondary
Quiet / cancel
STICKERS & CHIPS
FUNK / SOUL
★ GRAIL
NM / VG+
OVERDUE
Tilt is ±2–6°, and only on stickers that sit on an object. Chips in lists stay straight. Max two tilted stickers per screen.
Tab
Tab
Tab
FIELDS & TOGGLE
ARTIST
Anderson .Paak
Remind me
Field values are typed: text, number, yes/no, list, date, photo, link, money. The type badge is always mono.
05 · THE OBJECT
LABEL
COVER
Object hero
Always on the dark stage — the object is the only bright thing. Sleeve is a 3D box (front, back, two spines) and the disc sits behind it at translateZ(−3px), pulled out to the right. Drag to rotate; idle spin 0.22°/frame.
MATERIAL SWATCHES
{{ d.name }}
Coloured, splattered and marbled pressings are part of why people buy the record. Every material is a real CSS gradient recipe, reusable for figurine plastics, cartridge shells and sneaker colourways.
06 · PRINCIPLES
{{ p.title }}
{{ p.body }}