Long privacy action copy stays readable before the action moves to its own full-width mobile line.
MatchQuest styleguide
The enforceable UI source of truth for hierarchy, actions, responsive behavior, semantic states, imagery, and production component maturity.
ProductionCandidateReference
Jump to a component family
Welcome to MatchQuest
This is a working prototype of MatchQuest. Explore live event discovery, mutual compatibility matching, real-time messaging, and business host workspaces.
Curated Events
Browse, book & check in to live mixers
Mutual Matching
Post-event compatibility calculations
Realtime Chat
Direct connection between mutual matches
Active development build · Demo data and profiles may reset periodically.
Inventory status
Approved components, candidates, and reference patterns
Coverage and visual maturity are tracked independently, so this page stays accurate as production routes reach parity.
One last step
Keep your arrival connected
Bought your ticket somewhere else? Create an account, finish your profile, and we will return here to check you in automatically.
This event QR stays in the return link. Your check-in is recorded only after account setup succeeds.
Back to eventAttendance confirmed
You’re in, Maya!
Your arrival at Wine and conversation in Mitte is recorded at 19:03.
What happens next
Enjoy the event — your host can now see that you arrived.
After the event, privately choose who you would like to meet again.
A mutual choice becomes a match and unlocks your chat.
Attendance confirmed
Account ready — you’re checked in
Your profile is complete. Your arrival at Wine and conversation in Mitte is recorded at 19:03.
What happens next
Enjoy the event — your host can now see that you arrived.
After the event, privately choose who you would like to meet again.
A mutual choice becomes a match and unlocks your chat.
Controls, forms, and state matrix
Owner: Frontend system · Implementation: frontend/src/components/ui/* · Parity: route-backed
production
Success alert
Your ticket is confirmed and ready for check-in.
Warning alert
Only two balanced seats remain for this event.
Information alert
The organizer will publish the schedule tomorrow.
Destructive alert
Canceling releases the seat and cannot be undone.
Profile completion82%
Shared image uploader
Owner: Frontend system · Implementation: ui/image-uploader · Parity: route-backed
production
Choose a photo from this device or open the phone camera. The production component adds ratio-aware crop, zoom, and rotation.
Application status
Your public business profile is live. Identity-sensitive edits return it to review.
Which edits require another review?
Business identity, legal address, tax details, and the public company story require another admin decision. Contact details and profile photography remain live.
Dialogs, choice controls, and text areas
Owner: Frontend system · Implementation: Dialog, AlertDialog, Sheet, Checkbox, RadioGroup, Textarea · Parity: route-backed
production
Confirm your event choice
Modal shell with title, description, close action, secondary action, and primary confirmation.
Destructive confirmation
Alert dialog for deleting a draft event, blocking a profile, or canceling a ticket.
Organizer cancellation
The production candidate explains guest, ticket, refund, and history effects before the irreversible action.
Android PWA installation
A branded, accessible invitation hands off to Android’s native installation confirmation.
Form decisions
Cookie consent recovery
Owner: Frontend system · Implementation: CookieConsentBanner, Footer, Header · Parity: route-backed
production
Privacy controls stay reachable
The footer and mobile menu expose the same settings action after a visitor accepts or declines analytics.
Help improve MatchQuest
Choose whether anonymous analytics may be used. Clearing browser cookies returns this choice to pending.
Super Prominent First-Load Notice
Centered modal notice with 7-day cookie expiration (mq_prototype_dismissed) and MatchQuest design system styling.
Event discovery tiles
Owner: Frontend system · Implementation: ui/UiEventTileVariants · Parity: route-backed
production
Wine and conversation in Mitte
16px / 800 / 1.25 keeps event names prominent without overpowering dense organizer and saved-event lists.
The smallest governed event summary is for mutual-event context and dense dashboard lists. It keeps the same image, title, date, place, surface, and focus contract as the larger variants.
Event tile style
bar / drinks€30–35Singles Mixer 25-35
open
hosted by Atelier Mitte
A relaxed evening of hosted conversations, welcome drinks, and curated introductions in Mitte.
Sat, Jul 18 · 07:00 PM
Atelier Mitte · Mitte, Berlin
32/40
bar / drinks€35–40Speed Dating Night
open
hosted by Studio Kreuzberg
Structured mini dates with short breaks, host guidance, and post-event match reveal.
Fri, Jul 24 · 08:00 PM
Studio Kreuzberg · Kreuzberg, Berlin
30/30
Event commerce and attendance
Owner: Frontend system · Implementation: events/EventActionPanel, EventPricingDisplay, SpecialPriceBadge, QRCodeModal, CheckIn overlays · Parity: route-backed
production
Event action panel
Balanced-capacity ticket state with save and waitlist actions.
Women capacity 4 seats left
Men capacity 4 seats left
Pricing display
Standard€35.00
Women special€30.00
WaitlistFree until invited
Ticket and check-in
MQ-tkt_01h8x3k9m7q2
Admit One · Live Digital Pass
Checked inInvalid code
Smart WaitlistSecure card authorization
Your ticket category is sold out
Authorize your card to join the queue. The ticket is purchased automatically only when real capacity for your ticket category becomes available.
Pre-Authorization Hold
Public attendee views show aggregate availability only. Card hold is verified now but billed only if eligible capacity opens.
VISA
•••• •••• •••• 4242
Hold authorization · No immediate charge
€0.00 charged today
Free exit before conversion. Authorization auto-releases at the cutoff if unfilled.
Smart WaitlistSecure card authorization
Your ticket category is sold out
Authorize your card to join the queue. The ticket is purchased automatically only when real capacity for your ticket category becomes available.
Pre-Authorization Hold
Public attendee views show aggregate availability only. Card hold is verified now but billed only if eligible capacity opens.
Authorization active · €0.00 today
Up to €25.00 is authorized. If eligible capacity opens, your ticket is purchased automatically.
Auto-releases 2h before event
Queue Position #1 Payment authorization active
Wine & Conversation in Mitte
Up to €35.00 authorized (€0.00 today). The ticket is purchased only when eligible capacity opens.
Search, filters, and place selection
Owner: Frontend system · Implementation: EventSearchFilters, PlaceSelector, RestrictedTimeInput · Parity: route-backed
production
Atelier Mitte
44 capacity, private venue area, verified venue owner
Profile, matching, and preferences
Owner: Frontend system · Implementation: ProfileCompletionCard, FoundingMemberBadge, InterestSelector, CompatibilityDetailSection · Parity: route-backed
production
Sophie Weber
92% compatibility
JazzArtWinePhotography
Founding member
Badge component with benefit bullets and account status.
- Priority event invites
- Early matching features
Preference alignment
Values89%
Lifestyle84%
Interests96%
One tab component for viewing and editing profiles
The item set can change by route, but visual treatment, keyboard behavior, focus, and panel relationships do not.
Profile details and shared-event context.
Dating preference choice group
Messaging, notifications, and moderation
Owner: Frontend system · Implementation: ChatHeaderMenu, MessageToastNotification, BlockUserDialog, ReportUserDialog, NotificationBell · Parity: route-backed
production
Notification bell
Unread count and recent activity entry point.
3 unreadSophie replied
Want to compare notes after the mixer?
Moderation actions
Report, block, and safety confirmation dialogs.
Organizer, venue, and business operations
Owner: Frontend system · Implementation: BookingCard, PendingApprovalState, OrganizerVenueDetail, RevenueChart, PricingAnalytics · Parity: route-backed
production
Upcoming events
7
New matches
12
Ticket revenue
€4.8k
Venue leads
9
Venue discovery tile
The whole tile opens a dedicated venue route with stable back navigation.
Booking card
Speed Dating Night, 30 guests, proposed revenue split.
Approval state
Organizer or venue-owner account pending review.
Organizer ↔ venue handoff
Singles Mixer × Atelier Mitte
18 Sep · 17:30–23:30 · 36 guests · Berlin-Mitte
Lifecycle progress57%
Accept, counter, or decline with context
Atelier counters at €1,590.00 and moves guest arrival from 19:00 to 19:30.
Organizer
Review changed time, price, services, and expiry as a diff from the submitted request.
Venue owner
Accept one option, counter with explicit changed terms, or decline with a reusable reason and alternative dates.
Atelier counters at €1,590.00 and moves guest arrival from 19:00 to 19:30.
MQ-BKG-0184
- Date
- 18 Sep 2026
- Window
- 17:30–23:30
- Attendance
- 36 guests
- Terms
- €1,590.00
- Venue
- Atelier Mitte
- Expiry
- 30 Jul, 18:00
Every mutation updates the same proposal, booking, schedule, notification, and conversation context.
MatchQuest Berlin ↔ Atelier Mitte
Organizer CockpitAuthorized capacity telemetry
Wine & Conversation in Mitte
Ratio Balance
Δ3
Confirmed
/ 20
Authorized Demand
not revenue
Waitlist Queue
4M/0W
Add real venue capacity; the server then re-evaluates eligible FIFO entries without guaranteeing conversion.
Smart Waitlist GatewayOrganizer Console
Wine & Conversation in Mitte
Ratio Status
Δ 3
Authorized Demand
4 authorizations · not revenue
Total Capacity
10 cap/gender
Playground fixture: add confirmed venue capacity, then simulate server-side eligibility and payment processing.
4 in queue
| Pos | Attendee | Authorized | Card | Gateway Status |
|---|---|---|---|---|
| #1 | Alexander W. | €35.00 | •••• 4242 | Authorization Active |
| #2 | David K. | €35.00 | •••• 8821 | Authorization Active |
| #3 | Maximilian S. | €35.00 | •••• 1094 | Authorization Active |
| #4 | Tobias L. | €35.00 | •••• 3391 | Authorization Active |
Organizer venue detail
The same dedicated-page composition used by organizer venue routes: persistent context, visible availability, and an inline booking brief.
EVENT SPACERosenthaler Strasse 18, Berlin
A flexible central event space with a warm bar and flexible layouts for hosted conversation formats.
Capacity
20–44 guests
Base price
€180.00/hr
Average rating
4.8 / 5
Active bookings
4
Venue details
Everything needed to assess the space before requesting dates.
About this venue
A flexible central event space with a warm bar and flexible layouts for hosted conversation formats.
Amenities
Private barSound systemAccessible entranceCoat check
Venue partner
Mitte Hospitality GmbH
Verified partner · replies within one business day
Availability
Typical hours provide context; the chosen date is checked before the request is sent.
Monday
18:00–23:00
€180.00/hr
Tuesday
18:00–23:00
€180.00/hr
Thursday
17:00–00:00
€210.00/hr
Friday
17:00–01:00
€240.00/hr
Date looks available
The selected date currently has space between 18:00 and 23:00. Final terms are confirmed by the venue partner.
Settings, GDPR, PWA, and empty states
Owner: Frontend system · Implementation: gdpr/*, settings/BlockedUsersSection, pwa/*, empty-state, skeleton · Parity: route-backed
production
Notification preference
Reusable account panel and switch row.
Event reminders
New events
Profile completion
Shared progress and action treatment.
Profile strength80%
Add one more detail to improve matching context.
Data export
Request status and download-ready card.
Privacy settings
Blocked users, visibility, and deletion flow.
Install prompt
PWA install/update guidance.
Skeleton state
Compact loading placeholder and completion hints.
No saved events yet
Save promising events while browsing, then compare date, venue, and match potential before booking.
No mutual matches yet
After an event, like the people you enjoyed meeting. Mutual choices appear here with shared context.
No conversations yet
Messages unlock after a mutual match, so every first message starts from a real event moment.
No active tickets
Book a curated MatchQuest event to get your ticket, check-in code, and event reminders in one place.
Bringing your MatchQuest space into focus
We’re preparing the next screen without losing your place.
We’ll reconnect you gently
You are offline, but MatchQuest is still here. Reconnect to refresh live event availability, messages, and bookings.
No internet connection
- Previously opened information may remain available.
- Your private account actions wait for a secure connection.
- Reconnect and retry to receive the latest event updates.
Organizer detail overlay
The organizer identity, trust signals, metrics, and actions keep one hierarchy in dialogs and on the dedicated public page.
Sophie Keller
MatchQuest Berlin
4.9Berlin, Germany
Verified organizerTop rated
- Events
- 28
- Guests
- 640
- Rating
- 4.9
About
Thoughtfully hosted singles events with a clear rhythm, welcoming introductions, and enough space for real conversations.
Speed datingSocial evenings
Hosting since March 2024
https://matchquest.comConsumer landing composition
Owner: Frontend system · Implementation: ui/UiConsumerLanding · Parity: review required
candidate
Choose a real event
The singles journey begins with a concrete event.
Meet with context
A host and clear format make arriving easier.
Match afterwards
Private feedback determines the next conversation.
Urgent overlays
High-priority match moments use the same approved action, focus, spacing, and semantic overlay contracts.
Candidate
Urgent overlays
Primary match notifications
Production-style overlays for mutual matches and pending interest decisions.
One composition, seven explicit quality gates
These fixtures are also exercised by the automated styleguide browser check. They define stacking, target sizes, reading width, media behavior, and overflow expectations.
320px
Minimum phone
16px gutters, stacked actions, no clipped labels.
390px
Primary phone
Comfortable tap rhythm and subject-aware crops.
430px
Large phone
Long labels and paired actions remain balanced without premature tablet layout.
768px
Tablet
Two-column specimens where reading order remains clear.
1024px
Compact desktop
Sticky index appears; operations may use split layouts.
1440px
Desktop
The max-w-7xl band retains deliberate negative space.
1920px
Large display
Body copy stays bounded and cards do not stretch arbitrarily.
Stable local image fixtures preserve crops and remove third-party variability.
All interactive targets are at least 44px with a visible keyboard focus state.
Tables stack on phones and expose a visible overflow affordance on wider layouts.
UI route coverage
Route coverage tracks what can be reviewed. It remains separate from component maturity so a rendered page is never mistaken for an approved primitive.
Reference
- Singles landing
- Singles landing · No upcoming events
- Singles landing · Alternative
- Singles landing · Rooftop photo
- Singles landing · Studio photo
- Singles landing · Vinyl photo
- Landing copy and USP lab
- Event organizer landing
- Event organizer landing · Alternative
- Venue owner landing
- Venue owner landing · Alternative
- Events
- Event detail
- Event detail V1 · Book
- Event detail V2 · Waitlist
- Event detail V3 · Ticket
- Event detail V4 · Feedback
- Event detail V5 · Host
- Final event details
- Feedback
- Chat
- Sign in
- Sign up
- Other user profile
- Your profile
- Dating preferences
- Settings
- Email templates
- Styleguide matrix
- Dashboard
- Dashboard · Command
- Dashboard · Journey
- Tickets
- Organizer · Application
- Organizer · Bookings
- Organizer · Marketplace lab
- Organizer · Dashboard
- Organizer · Events
- Organizer · Edit event
- Organizer · Places
- Organizer · Proposals
- Organizer · Create proposal
- Organizer · Find venues
- Organizer · Venue detail
- Venue owner · Bookings
- Venue owner · Marketplace lab
- Venue owner · Booking detail
- Venue owner · Dashboard
- Venue owner · Organizers
- Venue owner · Proposals
- Venue owner · Schedule
- Venue owner · Venues
- Venue owner · Venue detail
- Venue owner · Edit venue
- Venue owner · Create venue
- Business marketplace contract