PriceGuessr
Guess the real price
Everything you need to make something that looks like PriceGuessr: the logo, the colour tokens, type, rank marks, components, motion and tone of voice. The page is live: swatches read the real CSS tokens, so they follow light and dark mode.
Principles
Numbers are the hero
The guess, the real price and the score are the focal point, big and tabular. Labels stay small and quiet.
One accent
Orange is the only brand colour. Everything else is warm neutrals; green and blue are for status, never decoration.
Tokens, never hex
Components use tokens (bg-surface, text-primary-ink). A raw hex in a component is a bug; new tokens go into the contrast test.
Words carry the meaning
Colour, icons and motion are decoration. A rank, a verdict or a result is always written out too.
Continuous, never pass/fail
No ticks and crosses, no 'wrong'. Every guess lands somewhere on a scale and the design shows where.
Tactile and warm
Price tags, shelf labels, dashed cut lines. Objects from a shop, not a dashboard. Motion is one orchestrated moment, not confetti everywhere.
Logo
The mark is a price tag with a sparkle on a rounded tile: the thing you guess, and the moment you get it. Use the lockup (mark + name) in headers; use the mark alone for icons, avatars and favicons.
PriceGuessr
Guess the real price
Lockup · On light
On dark
On brand orange
Clear space
Keep a quarter of the mark's height (x) free on every side. Nothing else enters that zone.
Minimum size
The mark works down to 16 px (favicon). Below 24 px use the favicon version, it is drawn bolder. The lockup's name never goes under 16 px.
Do not
- Stretch or squash it
- Rotate it
- Recolour it
- Add shadows or outlines
Colour
Every colour is a CSS variable in globals.css with a light and a dark value. Hex values below are read live from the page, so switch the theme in settings to see both.
Small orange text uses primary-ink, filled buttons primary-strong. Plain primary is only for large text and non-text UI (icons, rings, bars).
Brand
The orange family. One accent, four roles.
Surfaces
Warm off-white in light, warm near-black in dark. Borders are warm too.
Text
Two text colours. Muted is for labels and helper text, never for the only copy of something important.
Status
Success, info and danger. Always paired with an icon or words.
Score tiers
Colours of the five squares in the daily share card and result strips. Fixed in both themes, used as fills, never as text.
Ranks
One colour per league, tuned for text contrast in both themes.
on background: bg
Typography
Plus Jakarta Sans throughout, in weights 400 to 800. Prices and scores use tabular figures so columns line up and counting numbers do not jitter. Headlines are extra bold, labels bold, body regular.
Display
3 794
text-6xl, extrabold, tabular. Score, real price.
Heading 1
What will you guess today?
text-4xl, extrabold, tight leading.
Heading 2
Game modes
text-xl, extrabold.
Body
Guess the real price of everyday things around the world.
text-base, regular, muted for secondary.
Label
Your guess
text-sm bold muted; small caps style (uppercase, tracked) only for short eyebrows.
Rank marks
Each league has its own silhouette, so rank reads by shape and not only by colour: a dashed blank, coins with one to three pips, a shield, a cut gem, a crown, an eight-point star and finally a price tag with a sparkle. Always next to the written name.
- Unranked --rank-unranked
- II--rank-bronze
- II--rank-silver
- II--rank-gold
- II--rank-platinum
- II--rank-diamond
- --rank-master
- --rank-grandmaster
- --rank-pricegod
Score tiers
Six bands from a wild miss to spot on. Bands come from points (5 000 max per round), not from right or wrong.
- Spot on!≥ 5000
- Great guess!≥ 3000
- Close!≥ 1500
- A bit off≥ 500
- Far off≥ 50
- Way off≥ 0
Components
The building blocks. Rounded 14 px controls, 44 px minimum targets, a thin inner shadow on the primary button so it feels pressable.
The price tag
The signature motif. The player fills in a blank dashed tag; on the reveal the real tag drops next to it. Use it for the focal price, nowhere else.
Your guess
4,20 €
Real price
4,50 €
Nothing played yet
Stats appear after the first revealed round.
Loading…
Motion
Motion marks moments that matter and never decorates idle screens. Reduced motion collapses every animation to its last frame. Timed cues (sound, haptics) are tied to these animations: change one, change the other.
pg-tag-dropThe real price tag lands next to the guesspg-riseContent enters below a moment that just happenedpg-pop / pg-slamA result or a VS landspg-sheenOne light pass over a good resultpg-pingTwo rings leave the place when the map line arrivespg-rank-in / outPromotion: old emblem leaves, new one landspg-burst / pg-flashPromotion only: rings and one soft flashpg-pulseA division step: the badge swells once
Voice
Plain, warm, a little playful, never smug. Short sentences, verbs first. Talk about how close, not whether right.
Say how close, not right or wrong
Do: 12 % under the real price
Don't: Wrong!
Name the action
Do: Play today's challenge
Don't: Submit
Errors say what to do
Do: Could not make the picture. Try again.
Don't: Oops, something went wrong :(
Empty is an invitation
Do: Stats appear after the first revealed round.
Don't: No data.
Accessibility baseline
- WCAG 2.2 AA: every text/background token pair is checked in tokens.test.ts.
- 44 px minimum touch targets, visible focus (3 px primary outline).
- No colour-only status: icons and words always accompany colour.
- Reduced motion respected; live regions announce results (useAnnounce).
- Component tests run axe on every screen.