From request
to reality.
The operating network for modern B2B travel sourcing. Connecting agents, DMCs and destinations through one structured system.
Purpose & Voice
What DMCGrid stands for, the promise it makes to both sides of the marketplace, and how the product speaks.
Structured travel commerce
Replace the WhatsApp-and-Excel RFQ chaos between Indian travel agents and destination management companies with one structured system: brief in, competitive quotes out, deal closed.
Competitive leverage
Every RFQ reaches verified DMCs. Quotes arrive anonymous and comparable, so the agent wins the margin, not the loudest supplier.
Qualified demand
No lead reselling, no spam. Every brief is a real, structured itinerary from a verified agent. DMCs compete on product and price, not on who replies fastest.
Precise, trade-fluent, calm. We say "RFQ", "net rate", "connect" because our users do. Numbers over adjectives. Short sentences that respect a busy operator.
Hype ("game-changing!"), consumer-travel cutesy, or salesy urgency. No exclamation marks in product UI. Money figures never decorate — they inform.
Logo
The mark: a curved path forming a D and a journey — "a path to a destination." Official mark (SVG from Dhrumil, Oct 6): curved path forming a D + journey, gold dot #D4B483 (bronze #8A6524 on light). Wordmark paths from the official SVG; Satoshi renders the live wordmark. Construction, clear space and misuse rules below are binding.
Primary Horizontal — dark
Primary Horizontal — light
Symbol Only — dark
Symbol Only — light
Full — transparent
Stacked — transparent
Wordmark — transparent
Symbol — transparent
Full — black mark
Stacked — black mark
Wordmark — black mark
Symbol — black mark
Full kit (16 files) ships with the system in assets/logo/ — original SVGs from Dhrumil's Notion logo page, dark/light recolors, and the complete transparent set. Use white-mark versions on dark surfaces, black-mark on light, color variants everywhere else. The gold dot stays #D4B483 (bronze #8A6524 on light theme).
24px construction grid
The mark: a curved path forming a D and a journey — "a path to a destination." Two strokes build the D, the gold dot (#D4B483) is the destination point. Official SVG viewBox 0 0 96 105 (symbol) / 0 0 442 105 (full lockup). Source: Dhrumil's Notion logo page, Oct 6.
Wordmark: the full lockup spans 442×105 units. Live wordmark renders in Satoshi Semibold, tight tracking — the SVG paths govern print/final assets.
✕ Don't stretch or condense the mark
✕ Don't recolor outside approved palette
✕ Don't place on busy photography without scrim
✕ Don't add shadows, outlines or effects
Color System
Midnight-first dark scheme with Sand Gold as the single accent. Every color has a named semantic role — usage rules are binding.
Midnight
#0B0F14
Brand background
Slate
#1F2937
Surfaces · sidebars
Sand Gold
#D4B483
Accent · buttons · highlights
Ivory
#F7F3E9
Clean surfaces · light bg
Stone
#9CA3AF
Secondary text · borders
Earth
#3A3F36
Muted UI · icons
Success
#10B981
Warning
#F59E0B
Error
#EF4444
Info
#3B82F6
Travel Teal
#0EA5A3
Sunset
#F97316
Cool slate-tinted ramp, one role per step — replaces flat grey reuse. Stone/Slate/Midnight stay as named tokens; the ramp indexes every step between. Ivory (cream) is reserved for light-theme surfaces ONLY — never text or borders on dark.
Usage rules: 50–200 light-theme borders/disabled · 300 placeholders · 400 secondary text · 500 muted meta · 600 icon hover · 700–850 dark hairlines/surfaces · 900–950 page layers. Never skip more than 2 steps between adjacent elements.
Sand Gold is the ONLY brand accent. Buttons, active states, focus rings, key numerals. If everything is gold, nothing is — max one gold element per view section.
Ivory on Midnight = 15.9:1 ✓ · Stone on Midnight = 7.5:1 ✓ · On light theme, accent swaps to bronze #8A6524 (Sand Gold fails 4.5:1 on Ivory). All gray text ≥ 4.5:1.
Success/Warn/Error/Info ONLY for status — never decoration. Travel Teal marks travel-specific data (destinations, route lines). Sunset lives in illustrations and gradients only.
Midnight (page) → Slate (cards) → lifted borders on hover. Never pure black #000, never pure white #FFF. Hairlines at 6-12% ivory opacity.
Typography
Satoshi is the primary voice — display, headings, product UI chrome. Cabinet Grotesk is the secondary workhorse — body copy, forms, tables. JetBrains Mono carries every numeral that money touches.
Display + headings + UI chrome. Tight tracking on display sizes (-2% to -5%).
Body copy, form labels, table text, chat, email. Never used for display headlines.
| Token | Face | Size / LH | Weight | Tracking | Use |
|---|---|---|---|---|---|
| --ts-h1 | Satoshi Bold | 56 / 64 | 700 | -5% | Hero, page H1 |
| --ts-h2 | Satoshi Bold | 40 / 48 | 700 | -3% | Section titles |
| --ts-h3 | Satoshi Medium | 28 / 36 | 500 | -2% | Card titles |
| --ts-h4 | Satoshi Medium | 20 / 28 | 500 | 0 | Subheadings |
| --ts-bodyL | Cabinet Grotesk Light | 18 / 28 | 300 | 0 | Intro copy |
| --ts-body | Cabinet Grotesk Regular | 16 / 24 | 400 | 0 | Body, tables |
| --ts-cap | Cabinet Grotesk Regular | 14 / 20 | 400 | 0 | Captions, hints |
| --ts-over | Satoshi Bold | 12 / 16 | 700 | +.18em | Overlines, kickers |
| --font-m | JetBrains Mono | 12-14 / 20 | 500 | 0 | ALL money figures, IDs, refs |
Money is mono. Every rupee figure, credit count, and reference ID renders in JetBrains Mono tabular. No exceptions — it is the trust signal.
Max 2 faces per view. Satoshi + Cabinet Grotesk everywhere; mono only on data. No italics in UI. Sentence case for everything except overlines.
Indian numerals. Currency groups as ₹1,92,400 (lakh/crore). Dates as 12 Oct 2026. Times as 2:30 PM IST.
Iconography
One icon language across the product: outline style, 2px stroke, rounded corners, consistent geometry. Gold accent marks the active state.
Grid: 24×24 · Stroke: 2px · Caps: round · Joins: round · Fill: none. Active state: gold stroke. Muted state: Stone. Never mix filled and outline icons in one view.
RFQ flow: document (RFQ) · sparkles (AI) · compare (quotes) · users (connect) · pin (destination) · doc-check (proposal). Product: calendar · chart · network · message · settings · wallet · plane · hotel · car · meal.
Global Tokens
Radii, spacing, elevation, motion. The full token layer ships as design/tokens.css — these are the binding rules.
Cards 14px · Buttons 9px · Inputs 9px · Pills 999px. One corner-radius family — never mix radii on the same component class.
4pt grid: 4 · 8 · 12 · 16 · 24 · 32. Section padding 72/64. Card padding 20. Never hardcode odd values.
3 shadows only: card (rest) · hover (lift + gold ring) · popover. Dark theme needs borders over shadows — use hairlines first.
ease-out cubic-bezier(.23,1,.32,1) · friction (.16,1,.3,1) · inout (.77,0,.175,1). UI transitions ≤ 300ms. Buttons scale .97 on :active (160ms).
sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Touch targets ≥ 44×44. Grid over flex-math. min-height 100dvh, never 100vh.
Dark-first. Light theme = Ivory bg + bronze accent swap (WCAG). data-theme attribute on ; every component must render in both.
Atoms & UI Kit
The buttons, badges, tabs, cards, KPIs every screen composes from. Live, real rendered components — not pictures of components.
Gold = primary action, ONE per view. Teal = connect/billing actions. Scale .97 on press, 160ms. Labels never wrap. All targets ≥ 40px.
Dot + tinted pill. Success=connected/won · Gold=money/quote states · Teal=verification · Neutral=closed/inactive. Semantic colors never used decoratively.
Compare view — side-by-side anonymous quotes. Prices in mono tabular, winner highlighted with the gold ring. Reveal DMC identity only after Connect.
Tabs = views inside one entity. Stepper = RFQ wizard progress (6 steps from V62). Current step gold ring; done steps teal check.
Labels in mono caps, values in Satoshi tabular. Deltas semantic-colored. Every KPI needs loading + empty states.
Component Library
Every product surface from the V62 prototype, rebuilt as real rendered components on the token system. Interactive, both themes, mobile-safe. This is the build spec for Phase 0.
Steps 1–6 from V62. Current = gold ring, done = teal check, future = stone. Progress persists server-side per RFQ draft. On mobile the stepper scrolls horizontally inside its card — never the page.
| Quote A | Quote B | Quote C | |
|---|---|---|---|
| Hotels | 4★ Pattaya + 5★ BKK | 5★ both cities | 4★ both cities |
| Net rate | ₹1,42,800 | ₹1,58,200 | ₹1,31,500 |
| Inclusions | Breakfast + transfers | Breakfast + dinner + transfers | Breakfast + transfers |
| Visa support | ✓ included | ✓ included | ✗ add-on ₹2,400 |
| Response time | 4h 12m | 11h 03m | 1h 47m |
| DMC rating | 4.6 ★ (128) | 4.8 ★ (342) | 4.2 ★ (57) |
Anonymity until connect — no DMC names, no branding, no contact channels. Rows sortable; cells with money in mono. On mobile this degrades to stacked option cards (per Responsive). Agent connects max 2 (credit burns ₹999/connect after free tier).
| Hotel A | 3N | ₹18,400 |
| Hotel B | 2N | ₹21,000 |
| Vehicle | Sedan | ₹12,500 |
Total ₹51,900
| Hotel C | 3N | ₹24,800 |
| Hotel D | 2N | ₹28,200 |
| Vehicle | SUV | ₹16,900 |
Total ₹69,900
| Hotel E | 3N | ₹38,500 |
| Hotel F | 2N | ₹41,000 |
| Vehicle | Innova Crysta | ₹21,400 |
Total ₹1,00,900
| Net rate (DMC quote) | ₹1,42,800 |
| Agent margin (12%) | + ₹17,136 |
| Ancillary (visa + insurance) | + ₹4,800 |
| Subtotal | ₹1,64,736 |
| GST 18% | + ₹29,652 |
| TCS 2% (flat, from 01.04.2026) | + ₹3,295 |
| Customer price | ₹1,97,683 |
net + margin
+ Σ ancillary
→ +GST 18%
→ +TCS 2%
→ customer price
TCS is collected by the agent (not the platform) and remitted against PAN — per §394(1) ITA 2025. The deal sheet NEVER exposes DMC net rates to the customer-facing proposal. Manager approval gates the send (States & Access).
No agent identity until connect. Match score = destination fit + dates + budget band (server-computed). Decline with reason feeds the matching engine. Rows stack vertically on mobile.
Credits in mono, always. Free tier: 5 deals each side. Closed-system wallet — no cash-out (RBI/DPSS/2025-26/141 red line).
| Plan | Price | Credits |
|---|---|---|
| Starter | ₹999/mo | 5 |
| Growth | ₹2,499/mo | 20 |
| Scale | ₹5,999/mo | 60 |
DMC plans: ₹1,499 / ₹3,999 / ₹7,999 → 10/40/100 quote credits. Verified badge ₹7,500/yr (teal). GST 18% on all plans.
| Time | Activity | Inclusion |
|---|---|---|
| 09:00 | BKK airport → Pattaya transfer | Private sedan |
| 14:00 | Check-in + lunch | Buffet |
| 17:30 | Coral Island speedboat | Shared |
| 20:00 | Alcazar show | Ticket incl. |
Day tabs scroll horizontally inside the card on mobile. Time slots = mono. This component feeds both the DMC quote builder and the white-label proposal.
UPI primary (Indian trade default). Card via Razorpay (2.36% + GST). No wallets, no cash-out — closed-system credits only.
Upload → ops review (48h SLA) → verified badge (teal, ₹7,500/yr). Badge = trade trust signal, never decorative.
Forms & Inputs
The RFQ wizard is the product's front door — form patterns carry the most weight here. Every field: label, input, hint, error. Every form: loading, empty, error states.
Counters: adults/children/rooms steppers with min/max clamps; the ✨ AI mark clears when a user edits manually.
Calendar: month + year tabs, range picker with night count (7D/6N) chip.
AI extract: paste-any-text → structured fields, each tagged with a confidence chip the user can correct. AI values are always editable and marked.
Money fields: mono face, Indian grouping, ₹ prefix inside the input, right-aligned.
Min 1 adult · max 30 pax. Values feed the RFQ brief server-side.
Paste any brief text → structured fields, each with a confidence chip. Low confidence (<85%) prompts the user; every AI value stays editable — the ✨ mark clears on manual edit.
Toolbar = filters + actions (Pattern C). Filters never trap the user — always one click to clear all. Search placeholder in muted; active filters show as removable chips.
Data Display
Comparison is the product's core act. The quote table, deal sheet and time-wise itinerary are the three data structures the whole business runs on.
| DMC | Option | Quote | Status |
|---|---|---|---|
| Thai Horizons | Comfort | ₹1,92,400 | New |
| Thai Horizons | Premium | ₹2,04,900 | Revised |
| Bali Ground Co | Comfort | ₹1,98,200 | Viewed |
Anonymous until connected — DMC names show only after the connect decision. Money right-aligned mono. Row hover lift. Selection via checkbox column.
| Line | Cost | Charge | Margin |
|---|---|---|---|
| Package (7D/6N) | ₹1,65,000 | ₹1,92,400 | ₹27,400 |
| Visa fees · 2 adults | ₹9,000 | ₹11,000 | ₹2,000 |
| Profitability | ₹29,400 | ||
Agent-arranged services (flight, cab, visa) sit beside the package line. TDS tracker + GST columns per the compliance report. Manager-approval gate before proposal generation.
| Time | Activity | |
|---|---|---|
| 9:00 AM | Airport pickup · SUV | ⋮ |
| 11:30 AM | Hotel check-in · Patong | ⋮ |
| 4:00 PM | Phi Phi sunset cruise | ⋮ |
Chronologically normalized (V62 sorts on entry). Drag or ↑↓ to reorder; add Flight/Cab/Transfer/Hotel/Meal lines. Photos per line in proposal view.
No quotes yet
18 DMCs notified · first quotes typically arrive within 4 hours
Matching DMCs to your brief…
Couldn't load quotes. Retry
Feedback & Overlays
Toasts, modals, confirmation patterns. Money actions always get a confirmation; destructive actions always get an undo window.
Top-center, 200ms fade+slide. Success toasts show the credit impact in mono. Destructive toasts carry an Undo action (5s window). Never more than one toast visible.
Connect with Thai Horizons?
This debits 1 connect credit (18 left). Thai Horizons will see your identity and full brief. You'll unlock their quote versions and direct chat.
Money-touching actions always confirm with the debit amount in mono. 200-500ms entry, scale from trigger. ESC and scrim click close.
Motion
Motion is motivated by hierarchy, feedback and state — never decoration. Only transform and opacity animate (GPU-safe). prefers-reduced-motion kills all of it.
Button press 100-160ms · tooltips 125-200ms · dropdowns 150-250ms · toasts 200ms · modals 200-500ms · reveals 600-800ms.
ease-out for entrances · friction for reveals · inout for state flips. Never animate from scale(0) — start at .95 + opacity 0.
List/card entries stagger 30-80ms. Quote rows reveal in price order — cheapest last, for drama the accountant approves of.
CSS transitions over keyframes for UI state. Hover out mid-animation must not snap. Blur (max 20px) masks imperfect transitions.
Product Components
The composed structures unique to DMCGrid — mined from the V62 prototype. These are the components the build must refine and revamp; the prototype is the reference, not the law.
Brief builder
Travel → Flights → Hotel → Vehicle → Food → Budget tabs. Counters, calendar range, AI extract mode. Sticky summary rail shows the brief-as-built. Draft auto-saves on every change.
Quote comparison
Options as rows × DMCs as columns, plus the time-wise itinerary comparison (4 standard windows normalized chronologically). Day tabs must match itinerary length. Select up to 2 DMCs, then connect.
Quote versioning
After connect: DMC identity revealed, quote versions (v1 Original / v2 Revised / new option) with history timeline, direct protected chat, and revision requests.
Margin calculator
Package + agent-arranged services (flight/cab/visa) lines with cost→charge per line, live profitability box, TDS tracker, GST columns, manager-approval gate before Generate.
White-label PDF
Brand form + reusable brands, per-day AI rewrite, image replace per line, gold-on-dark premium sheet, print-true A4 (mm-based @media print). Issuer is always the agent.
Agent home
KPI cards (active RFQs, credits, win margin), RFQ queue with lifecycle badges, recent activity, quick-brief CTA. Credits visible everywhere — balance in the top nav, always mono.
Matched RFQ feed
Matched briefs (destination + dates + budget band) with match-strength score. No identity of the agent until the agent connects. Decline with reason (feeds matching).
3-option response
Value / Comfort / Premium options: hotel table, vehicle, day-wise editor with time slots. Save drafts, submit burns 1 quote credit, withdraw allowed until agent connects.
Supplier home
Quote credits, response-rate stats, active briefs, win rate. Verified badge status + documents. Payout/receipt history.
Concierge backend
Manual matching queue (MVP), DMC verification review, RFQ interventions, credit adjustments with audit trail. Every action logged with operator identity.
Pattern D rules: the ONE surface where the brand performs — gold-on-dark chrome, tight display type, mono numerals. Print-true A4 at mm units for the PDF export. Everything else in the product stays quiet. Manager approval gates every send (States & Access). The proposal NEVER exposes DMC identity or net rates (R1).
States & Access
Role model, permission surfaces, and the approval chain — the parts of the prototype that were client-side demo flags and must become real.
| Role | Scope |
|---|---|
| Agent owner | Billing, credits, team, all RFQs |
| Agent member | Own RFQs; team RFQs read-only |
| Manager | Approves proposals before send (V62 gate) |
| DMC owner | Quotes, verification, billing |
| DMC member | Quote drafts, submit |
| Platform ops | Concierge console, verification review |
Proposal states: draft → pending_manager → approved | rejected. Send unlocks only on approved. Rejection requires a note. All transitions server-side with actor + timestamp — never a client flag.
Page Patterns
The four layout archetypes every screen composes from.
Sidebar workspace
Left sidebar nav (216px) + content shell (max 1320px) + sticky top bar with credits + identity. Dashboards, RFQ list, settings. Content sections alternate bg/alt for rhythm.
Focus wizard
Full-height single column, stepper top, sticky footer with Back/Continue + summary rail right. No side nav during the wizard — one task, no exits except explicit save.
Data workbench
Toolbar (filters + actions) → dense table/grid → detail drawer from right (480px). Compare, deal sheet, quotes inbox. Drawers stack once; deep stacks are a smell.
Premium document
The proposal/PDF surface: gold-on-dark premium chrome, Fraunces-class serif display, print-true A4 at mm units. The one place the brand performs — everything else stays quiet.
Do / Don't
Hard rules distilled from the anti-slop principles, the compliance red lines, and the V62 prototype's known gaps. Carry none of the prototype's bugs forward.
✓ One accent (Sand Gold), one radius family, one icon language
✓ Money in mono, always tabular, Indian grouping
✓ Anonymity until connect — DMC names hidden in compare
✓ Real states for everything: loading, empty, error
✓ Server-side approvals with actor + timestamp
✓ Both themes tested on every component
✕ Don't touch deal consideration in the UI flow (R1 red line)
✕ Don't ship dark patterns — no fake urgency, no hidden costs (CCPA penalized a B2B marketplace ₹10L)
✕ Don't carry V62 bugs forward: 5-option data with 2-DMC scope, "—" budget rows, static lifecycle badges
✕ Don't use consumer-travel tone in product UI
✕ Don't mix filled + outline icons, or two badge languages
✕ Don't claim "licensed" or "verified" without the underlying status
Responsive
B2B travelers work from phones between meetings. The wizard and approvals must be flawless on mobile; the compare matrix degrades to cards.
Full experience. Sidebar visible, compare matrix as table, deal sheet side-by-side with quote.
Sidebar collapses to top bar. Tables gain horizontal scroll with sticky first column. Wizard keeps the summary rail as a collapsible drawer.
Compare matrix becomes stacked option cards. Deal sheet becomes a stepped review. Touch targets ≥ 44px. Credits pinned in the top bar. Approvals one-thumb friendly.
Accessibility
WCAG 2.1 AA is the floor. Money and status must never rely on color alone.
Ivory on Midnight 15.9:1 · Stone on Midnight 7.5:1 · Bronze accent on Ivory 4.9:1 (light theme swap) · Dark text on Sand Gold buttons 8.1:1. All pass AA.
Status = dot + text label, never color alone. Focus rings 2px gold, always visible. Icons carry aria-labels. Form errors tie to inputs via aria-describedby.
prefers-reduced-motion disables reveals, Ken Burns, spinners. Full keyboard paths: wizard tabs, matrix selection, drawer focus trap. min 44×44 targets.
65ch max measure on copy. Line-height ≥ 1.5 body. No text below 12px. Tabular numerals stop digit jitter in tables.
Changelog
Component Library section added (08b): every product surface from the V62 prototype rebuilt as real rendered components — interactive 6-step wizard stepper, compare matrix (3 anonymous quotes), 3-option quote cards, deal sheet with the binding cost formula, RFQ feed rows with match scores, credit wallet + plans, day-wise itinerary timeline, payment methods, verification upload. Toast system live. Wizard + tabs interactive. All components theme-aware, mobile-safe (steppers and tables scroll inside their cards, never the page). Responsive overhaul: 5 breakpoints (1024/768/640/480 + desktop), zero horizontal page scroll, button contrast fixed (gold fill both themes, dark text 8.1:1), theme persistence + FOUC guard.
Mobile navigation added: fixed top bar (hamburger + brand + theme toggle, blurred backdrop, 44px targets) + slide-in drawer with all 20 sections grouped Brand/Foundation/Product. Drawer closes on link tap and backdrop tap; aria-expanded + aria-label wired. Verified via Playwright at 390px: bar visible, drawer slides (translateX 0), link tap navigates + closes, zero horizontal scroll maintained. The sidebar is no longer "missing" on mobile — it's replaced.
v1.8: Real form-field components from V62 — counter steppers (interactive ±), money field with ₹ prefix + Indian grouping, AI-extract with confidence chips, radio/checkbox sets, search + filter bar with removable chips. Proposal preview (Pattern D) — the premium gold-on-dark document with day-wise timeline, inclusions, GST/TCS footer, export/send actions. v1.7: ROOT font fix — fonts.css url() paths were doubling the directory (all 15 webfonts 404'd since v1.2); mobile root fixes (grid min-width:0, steppers/tabs scroll in-card). Verified via real-viewpoint Playwright: 390px zero h-scroll, 16/16 fonts loaded, 0 console errors.
Logo section rebuilt at Opexminds depth: Core lockups (4) · Official variations — the full transparent set from Dhrumil's Notion page (8 tiles, white/black marks) · Grid & construction (24px grid overlay) · Clearance zones (0.5×/1×, X = mark height 105). Font specimens upgraded to full weight ladders (300→700) with rupee numerals. 16-file logo kit ships in assets/logo/. Sidebar version bumped.
v1.2: Font swap — Satoshi primary + Cabinet Grotesk secondary (both Fontshare ITF free), Lufga/PJS retired to fallback. v1.3: Neutral 12-step gray ramp — cream-tinted text grays replaced with cool slate tints; Ivory quarantined to light-theme surfaces only (binding rule). Favicon + apple-touch-icon wired. v1.0: Initial system — tokens from Dhrumil's style guide, component kit mined from V62, compliance red lines (R1–R8) in Do/Don't, dark + light themes, WCAG AA verified.
Component library extraction to React (Phase 0) · Illustration set (Sunset gradients) · PWA manifest + icon set finalization.