matchquest
The MatchQuest PromiseMeet first offline · Decide in private · Connect only when mutual

  1. DiscoverChoose a real event

  2. Check inConfirm you were there

  3. Choose privatelyOnly you see your feedback

  4. Mutual matchBoth people choose yes

  5. Start a chatContinue with real context

design foundations

the afterglow system.

Night-first surfaces, flame→iris gradient accents, generous radii, soft glow. Every screen in this playground is composed exclusively from these parts.

00 · tokens

Palette

css custom properties via tailwind @theme

canvas

#f6f5f0

page background

surface 1–3

#ffffff → #e2dfd4

cards & inputs

pine · primary

#11695a

actions, links, identity

iris

#35836f

primary support shade only

ochre · accent

#b0771f

ratings & warnings only

ink ramp

#171f1b → #838c86

text

line

9% / 18% ink

hairlines & borders

gradient

pine → iris

hero moments only

Typography scale & governance

Space Grotesk display · Inter body · governed hierarchy
.type-hero-titleSpace Grotesk 700 · clamp(2.5rem, 5vw, 4.5rem) · tracking tight

meet first. match second.

★ Base Reference.type-hero-description / .type-lead
Inter 400 · 16px (1rem) mobile → 18px (1.125rem) desktop · leading-relaxed

Reliability-scored singles events in Berlin. Choose events, meet in real life, confirm attendance, and match privately after.

.type-page-titleclamp(2rem - 3.25rem)

Curated Circles

.type-page-description16px → 18px text-muted

Small dinner tables and cocktail salons with matched singles and verified attendance history.

.type-section-titleclamp(1.4rem - 2.25rem)

Verified Singles Only

.type-section-description14px mobile → 16px desktop

Section copy steps down to 14px–16px so the hero description remains the primary narrative anchor.

.type-card-title18px (1.125rem) Space Grotesk 700

Dinner for 8: Kreuzberg Wine Bar

.type-body / .type-supporting15px (0.9375rem) Inter 400

Reliability score compounds with every event attended on time.

.type-meta (eyebrow)

curated gathering · berlin pilot

.type-micro (caps label)

verified · 6/8 spots filled

Category hues

one family — pine shades, never a rainbow
cinemabar / drinkscity hangoutfoodsports & outdoorsculturegamesother

Photos

deterministic duotone SVG — same seed, same picture
Sunday flea market crawl + currywurst
Kreuzberg craft beer intro night
Sunrise bouldering for beginners
Chess & chai in the park
Turkish breakfast club
Sunday 5k fun run + coffee

01 · atoms

Buttons

Badges & avatars

opencompletedcancelledanchor · 4.8low signal · 2.1anchor · 4.9

Stars

read-only & interactive
read-only
interactive (4/5)

Chips & toggles

Progress

4/6
6/6

Fields

with helper hint

02 · molecules

matches

1

friends

2

crews joined

14

Empty state

Nothing filed under these filters yet.

Photography via Unsplash photographers (images.unsplash.com), hotlinked per the Unsplash license — curated per category and tinted into the palette by the Photo atom.

organisms (header, chat panel, feedback panel, reputation panel, hero) are assembled live across the playground pages.