Source of truth:ResVR Interior UI
— This system governs the 3D visualizer, interior customizer, and any product-side UI. Do not apply these tokens to the marketing site.
Color Palette
Brand Accent — Dark Mode
cyan-400
#22d3ee
Primary
cyan-500
#06b6d4
Hover
cyan-600
#0891b2
cyan-300
#67e8f9
Base Surfaces — Dark Mode
slate-900
#0f172a
Base BG
slate-800
#1e293b
Surface
slate-700
#334155
slate-600
#475569
slate-500
#64748b
slate-400
#94a3b8
Icons
slate-300
#cbd5e1
slate-200
#e2e8f0
Text Colors — Dark Mode
white
#ffffff
Primary
white/70
rgba(255,255,255,0.7)
white/50
rgba(255,255,255,0.5)
white/30
rgba(255,255,255,0.3)
On dark backgrounds: text-white (primary) · text-slate-300 / white/70 (secondary) · text-slate-400 / white/50 (tertiary) · text-slate-500 / white/30 (disabled)
bg: rgba(255,255,255,0.1) or bg-slate-800 · text: rgba(255,255,255,0.7) · END TOUR, secondary actions
Glass & Alpha Overlays
Semi-transparent color tokens used throughout the glass UI — panel backgrounds, borders, hover states, and active highlights. All values are applied over a dark surface; shown below on slate-900 so you can see them.
Inter is the only font used throughout the entire product UI — mode rail, sidebar, panels, tooltips, overlays, bottom bar, AI transcript, all badges. No other typefaces.
Role
Size
Weight
Notes
Sample
section-header
18px
300 + 700
light + bold cyan pop
Customize Interior
body
14px
500
menu items, labels
Countertop Selection
label-sm
12px
500–600
secondary labels
Kitchen · 3/5 complete
micro
10–11px
700
uppercase, tracking-wider
Guided Tour
nano
9px
700
badges, option names
Standard
Glass Morphism System
The defining visual pattern of all product UI. Every surface uses backdrop-blur-xl with semi-transparent slate backgrounds.
Active: left-edge 3px bar (cyan-500) + icon bg-cyan-500/20
Label: 9px bold uppercase tracking-wider · Animated active indicator via Framer Motion layoutId
Design Mode Selector — Left Vertical Rail
Fixed left rail (100px wide, full height) containing two sections: Design Modes (Exterior / Interior) at top and Navigation Modes (Walk / Tour / Step-by-Step) at bottom, with a Theme Toggle at the very bottom. Source: components/Interior/DesignModeSelector.tsx
bg-white/10 icon bg, white icon + text, stroke 2.5 — NO left bar
bg-white/10 text-white stroke-[2.5px]
Nav mode: Hover
Same as active bg (white/10), text white
group-hover:text-white group-hover:bg-white/5
Nav mode: Inactive
Slate-500 icon + slate-600 label, invisible bg
text-slate-500 label:text-slate-600
Active indicator animation
Slides between design mode buttons (layoutId shared)
motion.div layoutId="activeDesignModeBorder" spring
Theme toggle hover
bg-white/10 bg, icon turns white
hover:text-white hover:bg-white/10
Bottom Status Bar
Full-width · h-50px · absolute bottom-0
The Cascade
62%Customized
Standard Bottom Bar (Default / Walk Mode)
Default bottom bar rendered when NOT in guided tour mode. 50px height. Left: builder logo + model name + customization %. Right: segmented Navigation / Rooms control. 2px cyan progress bar runs along top edge tracking customization percentage. Source: components/Interior/InteriorBottomBar.tsx
Replaces the standard bottom bar when isGuidedTourActive=true. Taller (60px vs 50px), cyan progress bar along top edge, live-dot indicator, room navigation. A separate "MENU" pill button appears top-left when sidebar is collapsed. Source: components/Interior/InteriorBottomBar.tsx
Triggered from NAVIGATION button in the bottom bar. Shows a floor plan with a position dot (cyan-400) and view cone (teal). Rounded-2xl glass panel.
Floor plan image rendered here
N
Position dot: bg-cyan-400 · w-3 h-3 · rounded-full
View cone: teal cone SVG · rotates with camera direction
N compass: top-right corner
Container: rounded-2xl backdrop-blur-xl
Settings & Controls
Settings & Controls Panel
w-80 · rounded-2xl · backdrop-blur-xl · fixed top-6 right-24 · z-40 · shown: Settings tab / Controls tab collapsed / Controls tab with How to Navigate expanded
Time of Day
Display
Show Furniture
Show Doors
Show Compass
Show Labels
Graphics Quality100%
Theme
Dark Mode
Camera
Height170cm
Zoom100°
Movement
Move Speed50%
Look Speed50%
Options
Invert Vertical Axis
Teleport to Option
How to Navigate
Camera
Height170cm
Zoom100°
Movement
Move Speed50%
Look Speed50%
Options
Invert Vertical Axis
Teleport to Option
How to Navigate
Look / Rotate
Mouse
Move
WASD← ↑ → ↓
Zoom In/Out
Scroll
Move to Point
Click ×2
×2
Right Click
Collapse menus / Free navigation
How to Navigate — Keyboard Guide
Exists in two forms: Inline (collapsible section at the bottom of the Controls panel) and Standalone Modal (triggered by the keyboard icon — 4th button — in the floating toolbar). Same 5 cards, same SVGs, larger presentation in the modal.
SVG diagrams have dark/light color variants (cyan-400 dark / teal-600 light). MOVE card cycles WASD ↔ arrow keys every 2.5s.
Right ClickCollapse menus / Free navigationRotate freely when activated
Standalone Modal — Triggered via Keyboard Icon (Toolbar)
Centered modal · rounded-xl · bg-slate-900/95 · backdrop-blur-xl · max-w-xl · triggered by keyboard icon (4th button in floating toolbar)
How to Navigate
Look / Rotate
Mouse
Move
WASD← ↑ → ↓
Zoom In / Out
Scroll
Move to Point
Click ×2
×2
Right Click
Collapse menus / Free navigation
Rotate freely when activated
Mode Panels
Interior Sidebar — Tree Menu
Left-side navigation panel (260px wide) with collapsible category headers, subcategories, and leaf items. Tracks completion state per item. Search with alias support. Source: components/Interior/InteriorSidebar.tsx
Pill tab on right edge of sidebar: chevron-left (open) / chevron-right + "MENU" (closed)
Animates with sidebar: left: isCollapsed ? 100 : 360
Step-by-Step Mode Panel
Anchored to the bottom of the InteriorSidebar when isStepByStep=true. Shows progress indicator, step navigation, and a camera views carousel. Source: InteriorSidebar.tsx → AnimatePresence bottom panel.
Full-screen pointer-events overlay that activates when AI mode is selected. Contains: avatar type selector pill (top-left), avatar card + mic controls (bottom-right), and transcript bubble (bottom-center). Three avatar variants: Human (photo), Orb (radial bar visualizer), Orb Alt (layered SVG soundwave). Source: components/Interior/AssistantOverlay.tsx
fixed inset-0 z-[55] pointer-events-none · children use pointer-events-auto
Avatar Type Selector (top-left, absolute top-20 left-28)
Human Avatar (speaking state — cyan glow)
Human photo
RESVR Assistant
Orb Avatar
56 radial SVG bars around a cyan gradient circle with ResVR logo. Bar heights randomise at 100ms (speaking) / 150ms (listening) / 400ms (idle).
Orb Alt Avatar
3-layer SVG soundwave SVGs (black/dark-teal/light-teal) composited over a white→cyan gradient circle + ResVR logo. Each layer rotates/scales at different speeds per voice state.
Transcript Bubble (bottom-center, absolute)
Speaking state (AI responding)
RESVR AI
Welcome! You're currently in the kitchen. I can see you have the standard countertop selected. Would you like me to show you the premium quartz options?
Horizontal scrollable strip anchored at the bottom of the 3D viewport (above the bottom bar). Shows upgrade options as thumbnail cards with tier badges, tier filter dropdown, search, and expand-to-grid mode. Source: components/Interior/OptionsGallery.tsx
Floating pill that appears above the OptionsGallery when the selected option has color variants. Horizontal pill (Bar mode) — the default and only active mode. Source: components/Interior/ColorSwatchPopover.tsx
Floating badge in the bottom-right corner. Expands into a full selections panel. Handles the full checkout flow: review → processing → submitted. Source: components/Interior/SelectionsWidget.tsx
Context-sensitive label used on toolbar buttons, icon-only controls, and option cards. 300ms show delay, 150ms Framer motion easeOut fade + scale. Four directional positions. Dark glass pill — consistent across both themes (always dark).
All interactive elements across the product UI, their states, triggers, and exact token classes. Use this as the source of truth when implementing new components or reviewing QA.
