Design system
Sticker console · six inks · three type lanes · generated from src/lib/design-tokens/tokens.js
Sec. 01 — Inks
6 inks on dark paper
Swatch
Token
Value
Role
In use
color.paper
#0e0e10
canvas — deep neutral with a faint warm cast
the page itself; lift steps for rails, drawers, modals and inputs only
never on: feed rows (rows are ruled, not boxed)
#0e0e10
#141416
#19191c
color.ink
#ece9e2
primary text — bone, ~92% on paper
all copy; secondary and muted steps for supporting and floor-level text
never on: anything below the muted floor #8a8781 (craft gate 1)
2020 Toyota Tacoma TRD Off-Road
Dallas · 22 mi away · one owner, records claimed
Supplement affixed by MarketScanner, not the seller
color.stamp
#ff5c1f
safety orange — the accent, rationed
grade stamps, ONE primary CTA per screen, focus rings. Nothing else.
never on: chrome · links · headers · more than one CTA per screen
stamp · one CTA · focus ring
color.deltaUnder
#4fa877
green ink — money in your favor
under-market deltas, realized profit (Board), price drops
never on: chrome · CTAs · VINs · any non-money element
−$6,700
−21.5% vs MVI $31,200
color.deltaOver
#d3574e
red ink — over-market and danger
over-market deltas, scam stamps and hatch, destructive actions
never on: ordinary error text that is not destructive or over-market
+$1,340
+4.6% vs MVI $28,650
color.hold
#d9a03f
amber ink — held states
trial, warming, pending, stale, ADMIN framing
never on: success · money figures
TRIAL · 4 DAYS LEFT
also: warming, pending, stale, ADMIN framing
Every ink above clears 4.5:1 on paper AND on the first surface lift; the three ink steps clear it on the second. The one measured exception is danger red on paperLift2 (4.38:1), so danger COPY is a paper / lift-1 treatment and on a modal the rose stays as the border with the words in ink. That is asserted at import by assertTokenInvariants().
Sec. 02 — Type lanes
no exceptions
display
Archivo, 'Archivo Expanded', sans-serif
Great deal · 40px
for wordmark, stamps, SEC. markers, hero price — never for body copy, table data, more than 3 moments per screen
body
'IBM Plex Sans', sans-serif
Panel title, sentence case, 16px
Body copy runs at fourteen or thirteen pixels and never in the mono face — the caps-mono scan tax is what made the round-one console tiring to read.
for long copy, row titles, panel titles, helper text — never for numerals, codes, column data
data
'IBM Plex Mono', monospace
$24,500
68,432 mi
3TMCZ5AN1LM295843
2 min ago
$26,100
84,019 mi
1FTEW1EP4KFA12345
14 min ago
$9,850
131,006 mi
5N1AT2MT8FC812903
1 hr ago
for prices, deltas, mileage, VINs — never for prose, panel titles
24
11px
24
12px
24
13px
24
14px
24
16px
24
22px
24
40px
Sec. 03 — Scale & structure
4px grid
Spacing
space[1]
4px
space[2]
8px
space[3]
12px
space[4]
16px
space[5]
20px
space[6]
24px
space[8]
32px
space[10]
40px
space[12]
48px
space[16]
64px
Radius · rules · controls
document 0
control 6
floating 8
cap 12
rule.hairline
1px
rule.strong
2px
rule.double
3px
cta 40
button 36
input 40
touchTarget 44
Tear-line — once per surface
The perforation is document theatre with a ration: one per screen, never two.
Weight
regular
Ask $24,500
400
medium
Ask $24,500
500
semibold
Ask $24,500
600
bold
Ask $24,500
700
Tracking
label
Scan 41-208
0.08em
body
Scan 41-208
0em
display
Scan 41-208
-0.02em
Line height
hero
1
label
1.3
body
1.5
prose
1.55
Sec. 04 — The stamp
rationed: hero grade · scam rows · CRM status
lg · safety orange · hero deal grade
lg · red ink · flagged rows
sm · amber · CRM status moments
Great −21.5%
Fair −2.1%
Over +4.6%
printed grade marks · what ordinary rows carry
The roughened frame is a committed PNG, rendered once from the prototype's own SVG roughening parameters and tinted per ink at runtime. react-native-svg implements neither turbulence nor displacement, so a live SVG filter would render a clean rectangle on iOS and a roughened one on web — the same code, two brands. Its geometry now comes from `src/lib/design-tokens/stamp-geometry.js`, shared by the generator, this compositor and the test that reads the committed PNG's header.
Sec. 05 — Motion
one signature, gated in JS
Reduced motion is ON — rows and marks render at their final state.
Time
Grade
Listing
09:41
Great −21.5%
2020 Tacoma TRD Off-Road · $24,500
The one heartbeat
Print-in
180ms · 6px
motion.duration.enter · motion.printInOffset
a new deal arrives on the tape — the row prints in
Stamp press
220ms · 1.04→1
motion.duration.stampPress · motion.stampPressScale
its grade mark takes a one-time press. Reduced motion kills it.
Everything else
150–200ms
motion.duration.fast · slow
ease-out fades and slides, transform and opacity only
Exits
126ms
motion.duration.exit
~70% of the enter — leaving is quieter than arriving
The CSS reset in `+html.jsx` shortens CSS animations under reduced motion, but React Native's Animated drives inline styles from JS and that rule cannot reach it — so the gate is `useReducedMotion()`, in the component. Both exist; they cover different mechanisms.
Sec. 06 — Form controls
one orange CTA per screen
The orange fill above is the ONE on this page — everything else is a hairline outline or ink. Focus rings are the third sanctioned orange; tab through the controls to see them. Every control clears the 44px touch floor even where the printed height is 40.
Email address
Field labels are the caps-mono lane's second sanctioned home, after column headers.
Password
Form VMS-D
specimen
The document card
One surface lift, one hairline, square corners. Surface lift is for rails, drawers and modals — a feed row is ruled, never boxed.
Next scan
2:14
Plan
FLIPPER
Status
SPECIMEN
NOT MANHEIM MMR · NOT AFFILIATED WITH FACEBOOK
FORM MW-0 · SPECIMEN SHEET · STORY 6.1