DESIGN.md v1.0.0 · /design-consultation 2026-05-09 · 86 archetype screens

ArokaGO V3 — Platform Design Gallery

Static HTML demo of the V3 design system applied to every archetype page across Phase 0.α + Wedges F–J. Brand spine derived from the Aroka logo + DESIGN.stitch.md (color only). Direction modeled on getdesign.md / Airbnb DESIGN.md adapted for medical-tourism. Trustworthy precision — Stripe-tier dashboard meets Airbnb-tier hospitality.

Section navigator

86 archetype screens grouped by surface. Click any card.

Public · Marketing mode

Marketing & discovery

Home, AI search, AI deep search w/ quotation, provider profile, verification detail, articles, community, reviews-with-discussion, sign-in, onboarding, pricing.

23 screens · 01–08, 27–31, 34, 36, 38–40, 50–51, 63, 70–71
Patient app · /dashboard

Patient flows

Dashboard, quotations, in-context chat, deposit checkout, booking, trip itinerary, reviews submission, notifications, KYC, consent management, settings.

16 screens · 09–13, 35, 42–47, 68–69, 74, 76
Provider app · /dashboard

Provider operations

Dashboard, draft offer, verification application, ratings dashboard, settlement, refunds, storefront editor + landing + service detail, deep analytics, lead CRM, marketing automation, omnichannel inbox, subscription, ad campaigns, KYC, team.

26 screens · 14–18, 32, 37, 48–49, 52–61, 64–67, 72–73, 75
Admin app · A1 / A2 / A4

Platform operations

Overview, verification grant queue, A4 editorial / translation / community / live moderation, sponsored auction, feature flags, cost dashboards, SLO health, service catalog, audit log, DR drill, settings.

17 screens · 19–23, 33, 62, 78–87
Mobile · PWA-shaped

Responsive mobile

Mobile home, provider profile, dashboard with bottom nav, chat, trip itinerary with offline state. 375px viewport in device frame.

5 screens · 88–92
Edge states

Empty / error / legal

Empty list, 404, 503, maintenance, offline PWA, geo-blocked, account suspended, legal page (privacy, terms, cookies).

7 screens · 25–26, 93–96 (+ legal)
Design tokens
Single source of truth at /DESIGN.md. Tokens consumed by packages/ui at runtime; AI subagents scaffold against them.

Brand voltage

primary
#3fbdbd
primary-deep
#006a6a
primary-active
#005757
primary-disabled
#c4e9e9
primary-soft
#e6f6f6
trust
#c8a86d
trust-deep
#745a27
trust-soft
#f5ecd9

Surface & ink

canvas
#ffffff
surface
#ffffff
surface-soft
#f7f7f7
surface-strong
#f2f2f2
ink
#1a1f2e
body
#3a4256
muted
#6b7488
hairline
#dddddd

Semantic

success
#2c8a5a
warning
#c8861f
error
#c64545
info
#4d7ec8
Typography scale
Manrope display + Geist Sans body + 13-locale Noto Sans fallback per script. Modest display weights — photography carries hierarchy.
rating-display · 56/8004.9
display-xl · 48/700Care across borders.
display-lg · 36/700Bumrungrad International Hospital
display-md · 28/700Your active quotations
display-sm · 22/600What this provider offers
title-md · 18/600JCI-accredited dental procedure
body-md · 16/400Default running text used inside long-form article copy and explanation paragraphs.
body-sm · 14/400Card meta lines, dates, prices, location strings sit at this scale.
caption · 13/500Search field segment label · WHERE
badge · 11/700AROKA VERIFIED
code · 13/400 monotrace_id: 4bf92f3577b34da6a3ce929d0e0e4736
Spacing & radius
4px base unit. Marketing band gutters 64px, app band gutters 24px. Radii: 8px CTAs · 14px cards · pill for status & search.

Spacing scale

2 xxs
4 xs
8 sm
12 md
16 base
24 lg
32 xl
48 xxl
64 sect

Radii

none
xs · 4
sm · 8 ← CTA
md · 14 ← card
lg · 20 ← modal
full ← pill
Buttons, badges & pills
44px height standard. Primary CTA radius 8px (NOT pill — pills reserved for status & search). Trust gold for premium-tier only.
✓ AROKA VERIFIED ⛨ TRUST+ ● ACTIVE ● PENDING REVIEW ● BLOCKED ● IN PROGRESS ● DRAFT NEW BETA