Design System · v0.1.0

Surprise Collector

A calm, accessible foundation for a cross-platform tracker for collectors of chocolate-egg toy figures. Colour, type, space and elevation — exported straight from Figma as W3C design tokens.

334 tokens W3C DTCG Inter Light + Dark WCAG 2.1 AA iOS · Android · Web

Brand ramp

primitive.indigo · 50 → 900

50
100
200
300
400
500
600
700
800
900
action.primary = indigo.600text.brand = indigo.700

Neutral ramp

primitive.neutral · a warm grey, 0 → 1000

0
50
100
200
300
400
500
600
700
800
900
950
1000

Collection semantics

domain tokens that carry meaning in the product

Rarity
Common Rare Ultra-rare
Collection state
Owned Duplicate Wanted
Status
Info Success Warning Danger

Semantic colour

aliases the UI consumes — never the primitives

action.primary
#0E4BE0
action.secondary
#0C8271
bg.canvas
#FAF8F6
bg.surface
#FFFFFF
text.primary
#211D1A
text.secondary
#5F5751
border.default
#D6CFC7
text.link
#175CD3

Type scale

Inter · composite typography styles

display.largeComplete the series800 · 32/40
heading.h1Complete the series700 · 28/36
heading.h2Complete the series700 · 24/32
heading.h3Complete the series600 · 20/28
body.largeMark the figures you already own.400 · 17/24
body.baseMark the figures you already own.400 · 15/22
label.baseMARK AS OWNED600 · 13/16
captionSeries 4 · 2019 · Italy400 · 12/16

Corner radii

controls 8 · fields 12 · containers 16 — three readable levels

none
0px
sm
8px
md
12px
lg
16px
xl
24px
full
9999px
Add to collection
card lg · 16pxfield md · 12pxbutton sm · 8px

Spacing

4px grid

2xs · 4
xs · 8
sm · 12
md · 16
lg · 20
xl · 24
2xl · 32
3xl · 40
4xl · 48
5xl · 64

Elevation

four warm-tinted shadow levels

elevation.1
elevation.2
elevation.3
elevation.4

Light & dark, designed together

the same semantic tokens, one component set

Light
🧩
Ultra-rare Owned

Hippo Diver

Happy Hippos · Series 4 · 2019

Series progress13 / 18
Dark
🧩
Ultra-rare Owned

Hippo Diver

Happy Hippos · Series 4 · 2019

Series progress13 / 18