Design System

ResVR

Two systems: Marketing (from Figma) · Product (from Magic Patterns)

Color Palette

Brand — Teal

Brand 1000
#062b2c
Brand 900
#083a3c
Brand 800
#0a4c4d
Brand 700
#0d6163
Brand 600
#117a7c
Brand 500
#16c9cc
Primary
Brand 400
#4ddadd
Brand 300
#8ee8ea
Brand 200
#c2f3f4
Brand 100
#e6fafa
Brand 50
#f2fdfc

Neutral — Warm Gray

Neutral 1000
#1f1d1a
Primary text
Neutral 900
#2f2c28
Neutral 800
#5f5b55
Neutral 700
#5f5b55
Neutral 600
#7d7871
Neutral 500
#9f9a94
Neutral 400
#bab6b1
Neutral 300
#d2cfcb
Neutral 200
#e4e2de
Neutral 100
#f6f5f3
Neutral 50
#faf9f7
Neutral 0
#ffffff

Typography

Display: Neue Haas Grotesk Display Pro  ·  Text: Neue Haas Grotesk Text Pro

TokenSize / LH / LSWeightSample
H168 / 76 / -1px500Heading One
H256 / 64 / -1px500Heading Two
H348 / 56 / -0.5px500Heading Three
H432 / 40 / 0500Heading Four
H524 / 32 / 0500Heading Five
H620 / 28 / 0500Heading Six
Body XL20 / 32 / 0400The quick brown fox jumps over the lazy dog.
Body L18 / 28 / 0400The quick brown fox jumps over the lazy dog.
Body M16 / 26 / 0450The quick brown fox jumps over the lazy dog.
Body S14 / 22 / 0400The quick brown fox jumps over the lazy dog.
Body XS12 / 20 / 0400The quick brown fox jumps over the lazy dog.
TokenSize / LH / LSWeightSample
H144 / 52 / -1px500Heading One
H236 / 44 / -1px500Heading Two
H332 / 40 / -0.5px500Heading Three
H428 / 32 / 0500Heading Four
H520 / 28 / 0500Heading Five
H616 / 26 / 0500Heading Six
Body XL16 / 28 / 0400The quick brown fox jumps over the lazy dog.
Body L14 / 26 / 0400The quick brown fox jumps over the lazy dog.
Body M14 / 22 / 0450The quick brown fox jumps over the lazy dog.
Body S12 / 20 / 0400The quick brown fox jumps over the lazy dog.
Body XS10 / 18 / 0400The quick brown fox jumps over the lazy dog.

Mobile type scale is identical to Tablet.

TokenSize / LH / LSWeightSample
H144 / 52 / -1px500Heading One
H236 / 44 / -1px500Heading Two

Components

Button — Light Background

Large
Medium
Small

Button — Dark Background

Large

Link

LightLarge LinkSmall Link
DarkLarge LinkSmall Link

Input Field

This field is required.

Checkbox Field

✓
Checked
Unchecked
—
Indeterminate

Quote

"ResVR lets buyers fall in love with a home before it's built."
— Sample attribution, Title

Token Reference

Raw files: tokens.css · tokens.json

--color-brand-1000#062b2c
--color-brand-900#083a3c
--color-brand-800#0a4c4d
--color-brand-700#0d6163
--color-brand-600#117a7c
--color-brand-500#16c9cc
--color-brand-400#4ddadd
--color-brand-300#8ee8ea
--color-brand-200#c2f3f4
--color-neutral-1000#1f1d1a
--color-neutral-800#5f5b55
--color-neutral-600#7d7871
--color-neutral-500#9f9a94
--color-neutral-400#bab6b1
--color-neutral-300#d2cfcb
--color-neutral-200#e4e2de
--color-neutral-100#f6f5f3
--color-neutral-0#ffffff
🪄
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)

Brand Accent — Light Mode

teal-600
#0d9488
Primary
teal-500
#14b8a6
Hover
teal-400
#2dd4bf
teal-500/10
rgba(20,184,166,0.10)
Accent bg
teal-500/15
rgba(20,184,166,0.15)

Semantic — Option Tiers

Colors Tier Badge Values
emerald-400
emerald/10
 Standard — Included text: #34d399 · bg: rgba(52,211,153,0.10) · border: rgba(52,211,153,0.25)
blue-400
blue/10
 Level 1 — Up to $1.5k text: #60a5fa · bg: rgba(96,165,250,0.10) · border: rgba(96,165,250,0.25)
amber-400
amber/10
 Level 2 — Up to $3k text: #fbbf24 · bg: rgba(251,191,36,0.10) · border: rgba(251,191,36,0.25)
purple-400
purple/10
 Level 3 — Up to $5k text: #c084fc · bg: rgba(192,132,252,0.10) · border: rgba(192,132,252,0.25)
rose-400
rose/10
 Level 4 — $5k+ text: #fb7185 · bg: rgba(251,113,133,0.10) · border: rgba(251,113,133,0.25)

Semantic — Status & Actions

Colors Label Usage
emerald-400
emerald/15
 ✓ Complete / Success text: #34d399 · bg: rgba(52,211,153,0.15) · completed items, success states
red-400
red/15
 Exit / Danger text: #f87171 · bg: rgba(239,68,68,0.15) · exit button, clear all, destructive actions
cyan-400
cyan-500
 Finalize / Primary CTA gradient: linear-gradient(90deg, #06b6d4, #22d3ee) · primary CTAs, Finalize Selections button
slate-900
slate-800
 Secondary / Ghost 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.

white/10
rgba(255,255,255,0.10)
Default border
white/7
rgba(255,255,255,0.07)
Subtle divider
white/5
rgba(255,255,255,0.05)
Section bg
white/8
rgba(255,255,255,0.08)
Hover state
white/15
rgba(255,255,255,0.15)
Active tab bg
white/40
rgba(255,255,255,0.40)
Light border
cyan-400/20
rgba(34,211,238,0.20)
Active icon bg
cyan-400/15
rgba(34,211,238,0.15)
Display toggle bg
slate-900/70
rgba(15,23,42,0.70)
Glass panel
slate-900/90
rgba(15,23,42,0.90)
Elevated panel
slate-900/95
rgba(15,23,42,0.95)
Modal / popover
slate-900/80
rgba(15,23,42,0.80)
Toolbar bg

⚠ IMPLEMENTATION NOTE — DON'T COLOR-PICK

All tokens above are raw RGBA values. When you color-pick a rendered element, you're sampling the token composited with the backdrop (3D scene, image, or dark surface) — the result will always be wrong. Use the raw RGBA values directly in your CSS. The table below shows what each token looks like composited on slate-900 for visual reference only — do not use these hex values in production code.

Composited Approx — Alpha Tokens on slate-900 (#0f172a)

Token Raw RGBA (use this) Solid approx on slate-900 Used for
white/5 rgba(255,255,255,0.05) #1b2335 Section bg
white/7 rgba(255,255,255,0.07) #202739 Subtle divider
white/8 rgba(255,255,255,0.08) #222a3b Hover state
white/10 rgba(255,255,255,0.10) #272e3f Default border
white/15 rgba(255,255,255,0.15) #333a4a Active tab bg
white/40 rgba(255,255,255,0.40) #6f747f Light border (dark mode)
cyan-400/15 rgba(34,211,238,0.15) #123347 Display toggle bg
cyan-400/20 rgba(34,211,238,0.20) #133d51 Active icon bg
red-400/15
(Exit / Danger)		 rgba(239,68,68,0.15)
icon color: #f87171		 #311e2e
very dark — the tint is subtle by design		 Exit button bg · Clear All · destructive actions

Note on slate-900/X panel tokens: these are applied over a 3D scene or image — no solid equivalent exists. Use them as background: rgba(15,23,42,X) directly and let the browser composite against the canvas.

Glow / Shadow Colors

Selected option rgba(6,182,212,0.5)
Mic button glow rgba(34,211,238,0.4)
Slider thumb rgba(34,211,238,0.6)
Position dot rgba(34,211,238,0.5)
AI avatar border rgba(34,211,238,0.3)

Typography

Font: Inter · Weights: 300 / 400 / 500 / 600 / 700 / 800 · fonts.google.com/specimen/Inter

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.

RoleSizeWeightNotesSample
section-header 18px300 + 700 light + bold cyan pop Customize Interior
body 14px500 menu items, labels Countertop Selection
label-sm 12px500–600 secondary labels Kitchen · 3/5 complete
micro 10–11px700 uppercase, tracking-wider Guided Tour
nano 9px700 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.

Floating / 70%
bg-slate-900/70
Nav rail, sidebar, bottom bar
Panel / 90%
bg-slate-900/90
Options gallery, overlays
Modal / 95%
bg-slate-900/95
Popovers, confirm dialogs
Light Mode / 70%
bg-white/70
All panels, light theme

Border: border border-white/10 (dark) · border border-white/40 (light) · Shadow: shadow-2xl

▶ Component → Glass Tier Mapping — 13 components

Yes — every panel in the app uses one of these 4 tiers. No exceptions.

Component Tier BG class Hex (approx)
Left Mode RailFloating / 70%bg-slate-900/70rgba(15,23,42,0.70)
Floating ToolbarFloating / 80%bg-slate-900/80rgba(15,23,42,0.80)
Sidebar PanelPanel / 90%bg-slate-900/90rgba(15,23,42,0.90)
Bottom Status BarFloating / 70%bg-slate-900/70rgba(15,23,42,0.70)
Options GalleryPanel / 95%bg-slate-900/95rgba(15,23,42,0.95)
Settings/Controls PanelModal / 92%bg-slate-900/92rgba(15,23,42,0.92)
Rooms/Teleport PanelPanel / 90%bg-slate-900/90rgba(15,23,42,0.90)
Your Selections PanelModal / 95%bg-slate-900/95rgba(15,23,42,0.95)
AI Transcript BubblePanel / 90%bg-slate-900/90rgba(15,23,42,0.90)
AI Avatar CardPanel / 90% + cyan glow borderbg-slate-900/90 border-cyan-400+ box-shadow 0 0 20px rgba(34,211,238,0.3)
TooltipSolid (no blur)bg-slate-800#1e293b (solid)
Navigation MinimapPanel / 95%bg-slate-900/95rgba(15,23,42,0.95)
Processing / Submit OverlayFull-screen dim + Modal 95%bg-slate-900/80 (overlay) + bg-slate-900/95 (panel)backdrop-blur-sm on overlay
Light Mode (all panels)Light / 70-95%bg-white/70 → bg-white/95rgba(255,255,255,0.70-0.95) + border-white/40

⚠ DON'T COLOR-PICK THESE

All glass tokens are semi-transparent. Color-picking a rendered element gives you the token composited with whatever 3D scene or background is behind it — wrong value every time. Use the raw RGBA directly in your CSS. The table below shows what each token looks like composited on slate-900 for visual sanity-checking only.

Glass Tokens — Raw RGBA + Composited Hex on slate-900 (#0f172a)

Token / Used for Raw RGBA — use this in CSS Approx on slate-900
Toolbar bg (80%)
Floating toolbar, tool pills		 rgba(15,23,42,0.80) #0d1525
Nav rail / sidebar (70%)
Mode rail, bottom bar		 rgba(15,23,42,0.70) #0e1928
Sidebar / options (90%)
Panels, overlays		 rgba(15,23,42,0.90) #0c1320
Modal / popovers (95%)
Confirm dialogs, tooltips		 rgba(15,23,42,0.95) #0c121e
Toolbar btn hover
bg on hover state		 rgba(255,255,255,0.10) #1d2636
Toolbar btn active (cyan)
Active/selected state · icon: #22d3ee		 rgba(34,211,238,0.20) #122530
Exit / danger button
bg: red · icon: #f87171 (red-400)		 rgba(239,68,68,0.15)
icon: #f87171		 #1e1219
Very subtle — tint is intentionally dark
Default toolbar icon
Resting state		 #94a3b8 (slate-400, solid — no alpha) #94a3b8

Navigation Chrome

Floating Toolbar

Top-right vertical pill · z-50
Container: 44px wide  ·  Position: top: 24px right: 24px  ·  Button: p-2 (8px)  ·  Icons: 20 × 20px  ·  Gap: 4px  ·  Divider: 1px white/10 horizontal rule
Default: slate-400 icon  ·  Hover: white + bg-white/10
Active: bg-cyan-500/20 · text-cyan-400  ·  Rounded-2xl · p-2 · backdrop-blur-xl

Left Mode Rail

Fixed left · 100px wide · z-50
Container: 100px wide full height  ·  Padding: py-8 (32px) top/bottom  ·  Design mode icons: 24 × 24px wrapper p-3 (12px) rounded-xl  ·  Nav mode icons: 20 × 20px wrapper p-2.5 (10px) rounded-lg  ·  Active bar: 3px wide cyan-500 left edge  ·  Labels: 9–10px uppercase bold tracking-wider mt-6
Exterior
Interior
Modes
AI
Walk
Tour
Step-by-step
Theme
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

fixed left-0 top-0 bottom-0 w-[100px] z-50 · backdrop-blur-xl · bg-slate-900/70 border-r border-white/10 · flex flex-col items-center py-8
100px wide  ·  Design modes: icon 24 × 24px · icon bg 48 × 48px (p-3) · rounded-xl (12px)  ·  Nav modes: icon 20 × 20px · icon bg 40 × 40px (p-2.5) · rounded-lg (8px)  ·  Active left bar: 3 × full-height px · label margin-top: 6px
Exterior
Interior
Modes
Walk
Tour
Step-by-Step
▶ Button anatomy & class reference
Design Mode Button (Exterior / Interior)
Active left-edge bar: absolute left-0 top-0 bottom-0 w-1 bg-cyan-500 — layoutId="activeDesignModeBorder" (Framer shared layout)
Active icon bg: bg-cyan-500/20 text-cyan-400 stroke-[2.5px]
Inactive icon: text-slate-400 group-hover:text-white group-hover:bg-white/5
Navigation Mode Button (Walk / Tour / Step-by-Step)
Smaller than design modes: p-2.5 rounded-lg w-5 h-5
Active: bg-white/10 text-white stroke-[2.5px]
Inactive: text-slate-500 group-hover:text-white group-hover:bg-white/5
No left-edge bar for nav modes — only design modes use the indicator
Theme Toggle
Icon: sun (dark mode → switch to light) / moon (light → dark)
Position: bottom of rail, pb-6
▶ States
StateVisualClasses / Styles
Design mode: ActiveCyan left bar + cyan icon bg + cyan text, stroke 2.5w-1 bg-cyan-500 (bar) · bg-cyan-500/20 text-cyan-400 · stroke-[2.5px]
Design mode: HoverIcon bg appears white/5, text brightens to whitegroup-hover:text-white group-hover:bg-white/5
Design mode: InactiveSlate-400 icon, slate-500 text, no bg, stroke 2text-slate-400 label:text-slate-500 stroke-2
Nav mode: Activebg-white/10 icon bg, white icon + text, stroke 2.5 — NO left barbg-white/10 text-white stroke-[2.5px]
Nav mode: HoverSame as active bg (white/10), text whitegroup-hover:text-white group-hover:bg-white/5
Nav mode: InactiveSlate-500 icon + slate-600 label, invisible bgtext-slate-500 label:text-slate-600
Active indicator animationSlides between design mode buttons (layoutId shared)motion.div layoutId="activeDesignModeBorder" spring
Theme toggle hoverbg-white/10 bg, icon turns whitehover:text-white hover:bg-white/10

Bottom Status Bar

Full-width · h-50px · absolute bottom-0 · see detailed spec below ↓
Logo
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

absolute bottom-0 right-0 left-[computedLeft] z-20 · h-[50px] · backdrop-blur-xl · bg-slate-900/70 border-t border-white/10
Bar height: 50px  ·  Progress bar: 2px top edge, cyan-500 + glow  ·  Left offset: 100px (sidebar closed) → 360px (sidebar open, 400ms ease)  ·  Logo area: padding-left 16px · Nav/Rooms btns: p-2 · Icons: 14 × 14px
Landmark Homes
The Bellevue
65% Customized
▶ Implementation notes
Left offset: computedLeft = sidebarOpen ? 260 : 0 — slides right when sidebar is open
Progress bar: h-[2px] bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.5)] width:{customizationPercent}%
Navigation btn active: bg-white/10 text-white chevron-down · inactive: transparent text-white/50 chevron-up hover:bg-white/5
Rooms btn: same pattern — layout-grid icon always visible
▶ States
StateVisualClasses / Styles
Sidebar closedBar spans full width from left-0left: 0 (100px rail is fixed above)
Sidebar openBar shifts right to avoid sidebar overlapleft: 260 · transition-all 400ms ease
Navigation: openbg-white/10 bg, white text, chevron-downshowNavigation → bg-white/10 text-white + chevron-down
Navigation: closedTransparent bg, muted text, chevron-uptransparent text-white/50 hover:text-white hover:bg-white/5 + chevron-up
Rooms: openbg-white/10 bg, white textshowRoomsPanel → bg-white/10 text-white
Progress 0%Bar width 0, just the track bg visiblewidth: 0%
Progress 100%Full width cyan bar with glowwidth: 100% bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.5)]

Tour Mode — Guided Tour Bottom Bar

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

absolute bottom-0 right-0 left-[100px] z-20 · h-[60px] · backdrop-blur-xl · bg-slate-900/90 border-t border-cyan-500/20
Bar height: 60px  ·  Progress bar: 3px  ·  Left offset: fixed 100px (always, ignores sidebar)  ·  Prev/Next btns: p-2 (8px) · skip icons 16 × 16px  ·  Live dot: 6px  ·  See diff notes below for class-level comparisons vs standard bar
Menu Pill (sidebar collapsed in tour)
Guided Tour
Bellevue
Kitchen 5 of 8
Border color: border-cyan-500/20 vs standard border-white/10
Height: h-[60px] vs h-[50px]
Progress bar: h-[3px] bg-gradient-to-r from-cyan-500 to-cyan-400 shadow-[0_0_12px_rgba(6,182,212,0.6)] vs standard h-[2px] bg-cyan-500
Live dot: relative flex span animate-ping + inner solid dot — Tailwind ping animation
▶ States
StateVisualClasses / Styles
PlayingLive dot pulsing, progress bar advances per roomanimate-ping · progress width updates via tourProgress %
First roomPrev (skip-back) button dimmed/disableddisabled opacity-30 cursor-not-allowed
Last roomNext (skip-forward) dimmed, End Tour more prominentdisabled opacity-30 cursor-not-allowed
Prev/Next hoverbg-white/10 tint on hoverhover:bg-white/10 text-white
End Tour hoverbg-white/10 tint, text goes full whitehover:bg-white/10 hover:text-white border-white/15
MENU button hoverbg-white/10, text fully whitehover:bg-white/10 hover:text-white

Rooms / Teleport Panel

Triggered from the ROOMS button in the bottom bar. Lists rooms with contextual Lucide icons (cyan) and white room name text.

rounded-2xl · backdrop-blur-xl · scrollable room list
Panel: 260px wide · border-radius 16px (rounded-2xl)  ·  Header: h-10 (40px) px-5  ·  Room row: ~44px tall px-5 py-2.5 gap-3.5  ·  Room icon: 16 × 16px cyan-400  ·  Room label: 14px font-medium
Teleport
Kitchen
Basement
Primary Bedroom
Ensuite
Laundry
Bedroom 2
Bedroom 3
Room icons used: chef-hat arrow-down-to-line bed-double bath shirt bed

Navigation Minimap

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.

Panel: ~260 × 260px · border-radius 16px (rounded-2xl)  ·  Position dot: 12px diameter (w-3 h-3) cyan-400  ·  View cone: ~24px base SVG teal  ·  N compass: top: 8px right: 8px · font-size 10px
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
Panel: 320px wide (w-80)  ·  Position: top: 24px right: 96px  ·  Border-radius: 16px (rounded-2xl)  ·  Tab icons: 12 × 12px · Close icon: 14 × 14px  ·  Content padding: 16px · Section gaps: 20px
Time of Day
Display
Show Furniture
Show Doors
Show Compass
Show Labels
Graphics Quality 100%
Theme
Dark Mode
Camera
Height 170cm
Zoom 100°
Movement
Move Speed 50%
Look Speed 50%
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← ↑ → ↓
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.

5 cards · 2-col grid + 1 full-width row · rounded-xl · bg-white/5 dark
Look /
Rotate Mouse
Move WASD ← ↑ → ↓
W A S D
Zoom
In / Out Scroll
Move
to Point Click ×2
×2
Right Click Collapse menus / Free navigation Rotate 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← ↑ → ↓
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

w-[260px] · absolute top-0 left-[100px] bottom-0 z-40 · backdrop-blur-xl · bg-slate-900/70 border-r border-white/10
Panel: 260px wide  ·  Offset: left: 100px (after mode rail)  ·  Search input: h-9 (36px) px-3  ·  Category header: h-10 (40px) px-3  ·  Leaf item: h-8 (32px) px-3  ·  Collapse toggle pill: 20px wide · position: left-[360px] (open) / left-[100px] (closed)

Customize Interior

Customize finishes & fixtures

Search options...
▶ Item anatomy & class reference
Category Header
Letter badge (first char) · category name · (completed/total) · chevron
Completed: bg-cyan-500/20 border-cyan-500/35 text-cyan-400
Default: bg-white/5 border-white/10 text-white/40
Leaf Item
Bullet dot → cyan when active, white/30 default
Completed: bg-emerald-500/20 check icon text-emerald-400
Selected: bg-cyan-500/15 text-white font-medium
AI-enhanced: sparkles icon text-white/20 (DEMO_ITEMS set)
Collapse Toggle
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.

flex-shrink-0 · flex flex-col · p-5 · border-t · backdrop-blur-xl · bg-slate-900/95 · z-10 · anchored bottom of sidebar
Width: 260px (inherits sidebar)  ·  Padding: 20px all sides (p-5)  ·  Progress bar: h-1.5 (6px) rounded-full  ·  Prev/Next arrows: 44 × 44px (w-11 h-11)  ·  Camera thumb: 64 × 48px rounded-lg  ·  Camera count tabs: 28px min-w
Step 7 of 39 18%
Main Options
Range Oven
Cameras
2
3
4
Camera thumbnail
Active
Kitchen Overview
▶ Props & implementation notes
Props
stepIndex / totalSteps → progress %
currentStepItem.name → center label
currentStepCategory → uppercase muted label
cameraViews[] → thumbnail carousel
cameraViewCount 2|3|4 → tab toggle
Camera Tab States
Default: text-white/40
Active: bg-cyan-500 text-black
Camera Thumbnail
Active view: border-cyan-500 + "ACTIVE" badge + cyan dot
Inactive: border-white/10 opacity-60
No cameras: fallback to "Switch View" button w/ RefreshCw
▶ States
StateVisualClasses / Styles
Progress barAnimates width to (stepIndex+1)/totalSteps × 100%h-1.5 bg-cyan-500 motion animate width
Prev arrow (first step)Hidden (empty spacer div renders)w-[44px] invisible placeholder
Arrow hoverBorder brightens, bg tinthover:bg-white/5 border-white/10
Camera thumb: selected carousel posWhite-tinted border (even if not active stream)border-white/50 opacity-100
Camera thumb: active streamCyan border glow + cyan dot top-rightborder-cyan-400 shadow-[0_0_8px_rgba(6,182,212,0.25)]
Intro animationSlides up from bottom on isStepByStep=trueinitial y:100 → animate y:0 via AnimatePresence

AI Mode — Assistant Overlay

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?

Listening state (user speaking)
You

Listening...

Idle state (waiting for input)
RESVR AI

Say something to get started...

Mode Rail: AI Active State

Icon bg: bg-cyan-500/20 rounded-lg + sparkles icon cyan
Label: text-cyan-400
Live indicator: small green dot above icon — w-1.5 h-1.5 bg-emerald-400 absolute top-0.5 right-0.5 animate-pulse
▶ States
StateVisualClasses / Styles
IdleMic button muted slate bg, transcript shows "Say something..."bg-slate-700 text-slate-400 (isMuted or voiceState idle)
ListeningMic button cyan glow, pulse ring, transcript shows "You" + pulsing dotbg-cyan-500 shadow-[0_0_15px_rgba(34,211,238,0.5)] · ping scale animation
Speaking (AI)Audio bars animate in transcript header, typewriter text reveal, cursor blinkbars: h animate [3,10,3] stagger 0.1s · cursor opacity [1,0,1]
MutedMic icon switches to mic-off, button turns slateisMuted → bg-slate-700 text-slate-400 · mic-off icon
Avatar: Human (speaking)Cyan gradient glow halo + border-cyan-400/60-inset-1.5 rounded-2xl bg-gradient-to-br from-cyan-400/40 blur-sm
Avatar: Orb (speaking)Bars update at 100ms, center circle scale [1, 1.03, 1]setInterval 100ms · scale motion animate
Avatar: Orb Alt (speaking)All 3 SVG layers rotate/scale fast ([0,6,-5,3,0]), duration 1.2srotate [0,6,-5,3,0] scale [1,1.06,0.95,1.04,1] repeat Infinity
Avatar type switchAnimatePresence mode="wait", scale 0.8→1, y 30→0initial scale:0.8 y:30 → animate scale:1 y:0 duration 0.4s spring
End button hoverbg-white/10, text goes whitehover:bg-white/10 hover:text-white border-white/15

Selection & Options

Options Gallery

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

max-w-5xl · rounded-2xl · backdrop-blur-xl · bg-slate-900/95 · border-white/10 · bottom-[60px] above bar
Container: max-w-5xl (1024px) centered  ·  Position: bottom: 60px (above tour bar)  ·  Padding: p-3 (12px)  ·  Cards: 140px wide 160px tall flex-shrink-0  ·  Card image area: ~110px tall · card label: 12px · card price: 11px  ·  Row height (single): max-h-[190px] · expanded grid: max-h-[460px]
Range Oven
Search...
6 of 6
IMG
Standard
Included
IMG
SS Gas
+$1,500
IMG
Pro Dual
+$2,500
IMG
Chef 6-Brnr
+$3,500
IMG
Commercial
+$4,500
Standard Level 1 Level 2 Level 3 Level 4

Options Gallery — Tier Filter Dropdown

Opens when user clicks "All Levels". Glass popover with checkbox rows per tier + item count. Selecting a specific tier deselects "All Levels" and filters the card strip. Built with Framer Motion AnimatePresence slide-down (opacity + y:−8→0, 150ms easeOut).

bg-slate-900/98 · rounded-xl · border-white/12 · shadow-2xl · z-50 · w-[220px] · AnimatePresence y(-8)→0 opacity 0→1 150ms easeOut
Range Oven
All Levels
Search...
All Levels 100
Standard 15
Level 1 25
Level 2 24
Level 3 18
Level 4 8

Options Gallery — Search Active

Search field filters cards in real time. Count label updates ("2 of 6"). Searches option name + aliases (e.g. "stainless" matches "SS Gas"). No-results state shows empty message with search term.

Search input: border-cyan-500/60 bg-white/8 · count label updates · cards re-render filtered list
Range Oven
All Levels
gas
2 of 6
IMG
SS Gas
+$1,500
IMG
Pro Gas
+$2,500

Options Gallery — Expanded Grid View

Clicking the expand icon (maximize-2) switches the card row from horizontal scroll (flex-nowrap, maxH 190px) to a wrapped grid (flex-wrap, maxH 460px, overflow-y auto). Minimize button (minimize-2) restores single-row mode.

isExpanded=true · flex-wrap · overflow-y-auto maxH-[460px] · maximize-2→minimize-2 icon swap · framer layout animation
Range Oven
All Levels
Search...
6 of 6
IMG
Standard
Included
IMG
SS Gas
+$1,500
IMG
Pro Dual
+$2,500
IMG
Chef 6-Brnr
+$3,500
IMG
Commercial
+$4,500
IMG
Pro Induct
+$3,200

Options Gallery — Card Tooltip

Info button (ⓘ) in top-left corner of card, revealed on hover. Click or hover shows a glass tooltip above the card with option name, description, tier badge, and price. Always-dark glass pill — same treatment as toolbar tooltips.

Tooltip: bg-slate-800 border-white/10 rounded-xl shadow-xl px-3 py-2.5 · absolute above card · opacity-0 group-hover:opacity-100 scale-0.95→1 duration-150ms
SS Gas Range Level 1

Stainless steel 30" freestanding with 5 burners and convection oven.

Upgrade cost +$1,500
IMG
SS Gas
+$1,500 tooltip visible
IMG
SS Gas
+$1,500 default (hover to reveal)
▶ States
StateVisualClasses / Styles
Default / Single RowHorizontal scroll, maxHeight 190px, no wrapflex-nowrap overflow-hidden maxH-[190px]
Expanded GridWraps to multi-row, maxHeight 460px, scrolls verticallyflex-wrap overflow-y-auto maxH-[460px]
Card SelectedCyan border, glow, cyan overlay + checkborder-cyan-500 shadow-[0_0_15px_rgba(6,182,212,0.4)]
Card HoverBorder brightens, image scales 110%group-hover:border-white/30 group-hover:scale-110
Info TooltipInfo button (i) top-left, tooltip above, arrow pointeropacity-0 group-hover:opacity-100 → absolute tooltip
Minimized TabChevron-up tab at bottom edge, click to restorerounded-t-xl border-b-0 animate on isMinimized

Color Selection Widget — ColorSwatchPopover

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

rounded-full · backdrop-blur-xl · bg-slate-800/90 · border-white/10 · mb-3 (above gallery)
French Door 36" Color
Stainless
▶ States
StateVisualClasses / Styles
Unselected swatchNormal size, no ringw-8 h-8 rounded-full
Selected swatchScale 1.1, cyan ring, check iconscale-110 · -inset-[3px] border-2 border-cyan-400
Light color borderThin border so white/cream swatches are visibleborder border-white/20 (dark)
HoverScale 1.1 on hoverhover:scale-110 transition-all duration-200
Color name labelShows hovered name, falls back to selected nameAnimatePresence mode="wait" · opacity fade

Selections Cart Widget

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

fixed bottom-[80px] right-6 z-[90] · rounded-2xl · backdrop-blur-xl
Badge position: bottom: 80px right: 24px (gallery closed) / bottom: 360px (gallery open)  ·  Badge: ~200px wide 44px tall · padding px-4 py-2.5  ·  Count dot: 20px diameter (w-5 h-5)  ·  Icon: 16 × 16px
Collapsed Badge
2
Your Selections $3,000
Toast (3s after adding)
Added to selections Range Oven – Level 1 Gas
+$1,500

Selections Panel — Review State

fixed top-8 bottom-8 right-6 w-full max-w-md z-[100] · rounded-2xl · backdrop-blur-xl · flex flex-col
Panel: 448px wide (max-w-md)  ·  Position: top: 32px bottom: 32px right: 24px  ·  Header padding: 20px (p-5)  ·  Item rows: ~72px tall · thumbnail: 56 × 56px rounded-lg  ·  Footer (total + CTA): p-4 (16px)

Your Selections

2 upgrades selected

IMG

Main Options

Range Oven

Level 1 Stainless Gas

$1,500
IMG

Main Options

Countertop

Quartz – Level 2

$1,500

Total Upgrade Value

$3,000

Selections Panel — Processing & Submitted States

Same panel shell · finalizeStep: 'processing' | 'success' · transitions via state machine
Processing (~2.5s)

Processing Your Selections

Generating selection summary...
Sending to Landmark Homes...
Preparing email confirmation...
Submitted (success)

Selections Submitted!

Your selections have been sent to Landmark Homes

Total Upgrades 2 items
Total Value $3,000
Confirmation sent to demo@example.com

What happens next?

  • A design consultant will review your selections
  • Receive a detailed quote within 24–48 hours
  • Schedule a call to finalize your dream home
▶ States
StateVisualClasses / Styles
Empty (hidden)Widget hidden if 0 items and no toastreturns null
Collapsed badgeCyan icon bg + count dot + price + chevron-upborder-cyan-500/30 hover:border-cyan-500/50
Gallery open offsetBadge lifts above gallery stripisGalleryOpen ? bottom-[360px] : bottom-[80px]
Panel openBackdrop + slide-in panel from rightscale 0.95→1 spring · bg-black/40 backdrop
ProcessingSpinning border ring + 3 step items fade inborder-4 border-t-transparent border-cyan-500 animate-spin
SuccessSpring-in check circle + summary card + what's nextbg-emerald-500/20 · check-circle-2 · text-emerald-400
Selection swaparrow-left-right icon, closes panel, reopens gallerytext-white/40 hover:text-cyan-400

Utility

Buttons

Tooltip

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).

bg-slate-800 · text-xs font-medium · rounded · px-2.5 py-1.5 · border-white/10 · shadow-xl · scale 0.95→1 easeOut 150ms
Settings
top
Screenshot
bottom
AI Mode
right
Reset View
left
Container: bg-slate-800 border border-white/10 rounded px-2.5 py-1.5 shadow-xl
Text: text-xs font-medium text-white
Animation: initial scale:0.95 opacity:0 → animate scale:1 opacity:1 · duration:0.15s easeOut · delay:300ms
Arrow: CSS border trick (transparent left+right, solid top/bottom in #1e293b to match bg)
▶ States
StateVisualClasses / Styles
HiddenInvisible, no layout spaceopacity:0 scale:0.95 pointer-events-none
AppearingFades + scales in after 300ms hover delaytransition: opacity 150ms easeOut, scale 150ms easeOut
VisibleFull opacity, scale 1, slate-800 bg, white textopacity:1 scale:1 bg-slate-800 border-white/10
DismissingImmediate fade on mouse-leave (no delay on hide)exit opacity:0 duration:0.1s

⬛ Comprehensive States Reference

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.

Buttons

ComponentStateTriggerVisual / Classes
Primary CTA
(Finalize, Continue)		Default—bg-gradient-to-r from-cyan-600 to-cyan-400 text-white rounded-xl font-bold
Hovermouse-enterbrightness-110 scale-[1.01] shadow-[0_0_20px_rgba(34,211,238,0.4)]
Active (pressed)mousedownscale-[0.98] brightness-95
Disabled0 items / loadingopacity-40 cursor-not-allowed pointer-events-none
Ghost Button
(End Tour, controls)		Default—border border-white/15 text-white/70 bg-transparent rounded-full
Hovermouse-enterbg-white/10 text-white
Disabledboundary reached (tour first/last)opacity-30 cursor-not-allowed
Icon Button
(toolbar, controls)		Default—p-2 rounded-lg text-slate-400 bg-transparent
Hovermouse-enterbg-white/10 text-white
Active (on)toggle onbg-cyan-500/20 text-cyan-400
Danger Button
(Clear All)		Default—text-red-400 bg-transparent border-none
Hovermouse-entertext-red-300 bg-red-500/10

Inputs & Form Controls

ComponentStateTriggerVisual / Classes
Search Input
(sidebar, gallery)		Default—bg-white/5 border-white/10 text-white placeholder-slate-500 rounded-lg
Focusedclick / tabfocus:outline-none focus:border-cyan-500/50
Has valuetypingX clear button appears (absolute right-2.5 text-slate-400)
Toggle Switch
(settings panel)		Offdefaultbg-slate-700 w-8 h-4 rounded-full · thumb left-0.5
Onclickbg-cyan-500 · thumb right-0.5 · transition-all 200ms
Range Slider
(settings, controls)		Default—h-1.5 bg-slate-700 rounded · fill: bg-gradient-to-r from-cyan-600 to-cyan-400
Thumbalways visiblew-3.5 h-3.5 bg-cyan-400 rounded-full shadow-[0_0_8px_rgba(34,211,238,0.6)]

Cards & Selection Items

ComponentStateTriggerVisual / Classes
Options Gallery CardDefault—border-white/10 rounded-xl overflow-hidden flex-shrink-0
Hovermouse-enterborder-white/30 · inner image scale-110
Selectedclickborder-2 border-cyan-500 shadow-[0_0_15px_rgba(6,182,212,0.4)] + check overlay
AI RecommendedAI flag in datasparkles badge absolute top-1.5 right-1.5 text-cyan-400 animate-pulse
Sidebar Leaf ItemDefault—text-slate-300 dot bg-white/20 hover:bg-slate-800/50 rounded-lg
Active / Selectedclickbg-cyan-500/15 text-white font-medium dot: bg-cyan-400
Completedselection savedcheck icon bg-emerald-500/20 text-emerald-400 text-white/90
Category HeaderDefault (no completions)—badge: bg-white/5 border-white/10 text-white/40
Has completionsitem selectedbadge: bg-cyan-500/20 border-cyan-500/35 text-cyan-400
Expanded / Collapsedclickchevron-down vs chevron-right · children AnimatePresence height:0→auto
Color SwatchUnselected—w-8 h-8 rounded-full (light colors: border border-white/20)
Selectedclickscale-110 -inset-[3px] border-2 border-cyan-400 + check icon

Overlays, Panels & Modals

ComponentStateTriggerVisual / Classes
Selections PanelClosed—hidden (isOpen=false)
Openingbadge clickscale 0.95→1 · opacity 0→1 spring · backdrop bg-black/40 fade in
ProcessingFinalize clickfinalizeStep:'processing' → spinner + 3 steps · then 'success'
AI OverlayInactiveAI mode not selectedisActive=false → returns null
ActivatingAI mode selectedAnimatePresence opacity 0→1 · elements stagger in with delays
Listeningmic active, user speakingvoiceState:'listening' · mic glow ring pulse · "You" in transcript
AI SpeakingAI respondingvoiceState:'speaking' · typewriter reveal · bars animate · avatar halo
Settings PanelSettings tabSettings tab clicktab bg-white/10 text-white · settings icon visible
Controls tabControls tab clicktab bg-white/10 text-white · gamepad-2 icon visible
Tour BarActive (playing)Tour nav mode selectedisGuidedTourActive=true · h-60px · animate-ping dot · cyan border-t
EndedEnd Tour clickreverts to standard bar isGuidedTourActive=false h-50px

Icon Library

Library: lucide-react · 1,400+ icons · Consistent thin stroke style  ·  lucide.dev

import { Search, ChevronDown, Check, X, LayoutGrid } from 'lucide-react'

Toolbar (top-right vertical pill)
rotate-ccw
Reset View
settings
Settings
gamepad-2
Controls
keyboard
Navigate
sparkles
AI Assistant
log-out
Exit Model
alert-circle
Confirm
Mode Rail (left)
building-2
Exterior
armchair
Interior
sparkles
AI Mode
footprints
Walk
play
Tour
list-checks
Step-by-step
sun
Light Theme
moon
Dark Theme
home
Home Mode
star
Amenities
map-pin
Surroundings
grid
Lots
Navigation & UI Controls
chevron-right
chevron-left
chevron-down
chevron-up
arrow-left
arrow-right
skip-back
Prev Room
skip-forward
Next Room
menu
navigation
Compass
layout-grid
Rooms
square
Stop Tour
Options Gallery & Selection
check
Selected
search
x
Clear / Close
info
Option info
maximize-2
Expand gallery
minimize-2
Collapse
refresh-cw
Switch View
camera
Camera Views

React Usage

Default stroke-width: 2  ·  Active/emphasis: 2.5
Standard: w-5 h-5 (20px)  ·  Compact: w-4 h-4 (16px)  ·  Micro: w-3 h-3 (12px)

PNG Export — 3D Engine

Export size: 128 × 128 px  (power of 2)
Color: white on black  ·  engine applies tinting at runtime
Stroke: stroke-width 2  (matches design spec, robust for mipmap compression)
Naming: T_UI_NameOfTexture.png  (e.g. T_UI_RotateCcw, T_UI_Sparkles)
Engine generates: 64 · 32 · 16 automatically  ·  46 icons total

Download Icons (.tar.gz)

Motion & Animation

Library: Framer Motion. Primary easing feels snappy with a soft settle.

TokenValueUsed for
ease-snap[0.22, 1, 0.36, 1]Panels, sidebars, all layout transitions
duration-micro150msPopovers, dropdowns, tooltips
duration-fast200msFades, icon states, hover bg
duration-standard300msProgress bars, state changes
duration-panel400msSidebar slide, bottom bar offset
popover-in{ opacity:0, y:-4, scale:0.97 } → visibleDropdowns, info cards
panel-in{ opacity:0, y:30 } → visibleOptions gallery mount
marquee2.5s ease-in-out infiniteLong option names on hover

Layout System

┌──────────────────────────────────────────────────────────────┐ │ [Mode Rail 100px] [Sidebar 260px] [3D Viewport] │ │ fixed left-0 absolute [Top Toolbar] │ │ top-0 bottom-0 left-[100px] absolute top-6 │ │ z-50 bottom-0 z-40 right-6 z-50 │ │ w-260px │ │ │ │ [Options Gallery] absolute left-[260px] right-0 │ │ bottom-[60px] z-30 (above bottom bar) │ ├──────────────────────────────────────────────────────────────┤ │ [Status Bar] absolute bottom-0 right-0 h-50px z-20 │ │ left offset = sidebar open ? 360px : 100px │ └──────────────────────────────────────────────────────────────┘

Border Radius

rounded-2xl
Panels, gallery
rounded-xl
Cards, buttons
rounded-lg
Inputs, items
rounded-full
Pills, tags, dots