SabaiDate

design system + 22 screens · light & dark · mobile & desktop

Design notes

Reasoning

Typography-led: Spectral carries the matchmaker's voice (headings, reasons, readings); Schibsted Grotesk does everything you tap. One ochre-bronze accent on warm neutrals — a private members' club register, no gradients, no hearts, no urgency colour anywhere. Every empty, waiting and pending state is designed as a primary state.

Assumptions

Matchmaker persona is "Nok" (she/her). Narrative layer shown on. English copy; Thai-safe leading (:lang(th) 1.9) is in the tokens. Photos are drop-in slots on key screens, initials elsewhere. Screens follow the spec including rescheduling (§4.7) and identity rules (§4.6).

Status

All 22 screens are built and linked below, implemented from SabaiDate.dc.html against this token layer — src/app/globals.css, imported unmodified from the design project. Every screen carries an axe assertion plus tests for the product invariants it must not lose. Backend, auth and the matching engine are separate plans and are not wired up.

Tokens

Light
  • background 40 30% 97%
  • foreground 30 12% 16%
  • card 40 40% 99%
  • muted 40 22% 92%
  • primary 38 45% 38%
  • secondary 42 35% 90%
  • destructive 8 52% 42%
  • border 38 18% 86%

primary on background = 5.0:1 (AA) · radius 14px cards / 12px controls · hit targets ≥44px

Dark
  • background 30 10% 10%
  • foreground 40 22% 92%
  • card 30 10% 13%
  • muted 30 9% 18%
  • primary 42 55% 68%
  • secondary 32 12% 20%
  • destructive 8 55% 62%
  • border 30 8% 23%

primary on background = 8.9:1 · same radii and targets

Type

Spectral — the voice

headings · “why this person” · readings · 400/500/600 + italic

Schibsted Grotesk — the hand

buttons · labels · nav · forms · 400–700

Scale 13 / 15 / 17 / 20 / 26 / 34 / 44 · body ≥15px · Noto Sans Thai companion, :lang(th) line-height 1.9, no fixed heights on copy

ไม่ต้องเสียเวลาทั้งเย็นเพื่อรู้ในสิบนาที

Screens

23 of 23 built — every screen is linked, and names the plan that owns its logic

  1. 01Landingthe only screen that markets — one promise, one CTAplan 2built
  2. 02Application & verificationdeliberate friction as the quality and safety signalplan 3built
  3. 03Matchmaker intakeNok; tappable answers; identity steps per spec §4.6plan 7built
  4. 04Season enrollmentcohort launch card + rolling admissionplan 4built
  5. 05Not admitted yeta confirmed reservation, never a queue — and unpaidplan 4built
  6. 06Home — date todaya state of /home, resolved from data rather than a routeplan 7built
  7. 07Home — date yesterdaya state of /home; declines are never visibleplan 7built
  8. 08Home — neitherthe most common state: daily question + readingplan 7built
  9. 09Introductionsone at a time, with a written reason; declining is consequence-freeplan 1built
  10. 10Slot bookingthree overlapping times, one tap booksplan 5built
  11. 11Availabilitya calendar tool: quick, precise, forgettableplan 5built
  12. 12Reschedule — initiatecost stated before confirming; notice is what mattersplan 5built
  13. 13Reschedule — new timecalm pending state — the other person picks firstplan 5built
  14. 14Pre-call lobbychecks, pronouns, the 25-minute rule, a way to leaveplan 6built
  15. 15In-callRealtimeKit's meeting UI, rendered by the lobby once a token is issuedplan 6built
  16. 16Call endedthe timer ended it; straight into private feedbackplan 6built
  17. 17Reportends the call immediately — stated before the tapplan 6built
  18. 18Mutual yesa warm, quiet moment; screen or table nextplan 7built
  19. 19Chatplain, calm messagingplan 7built
  20. 20End-of-Season reviewthe retention screen; leaving presented as successplan 4built
  21. 21Between Seasonsdormant, not gone; no win-back naggingplan 4built
  22. 22Profile & settingsReliability as quiet standing; identity, access, channelplan 3built
  23. 23The Seasonthe sell — refusable by design, resting offered with equal weightplan 4built