# Spatial UI (visionOS) > Neutral frosted-glass windows floating in a real environment, with huge rounded corners, capsule controls and detached ornaments. - Nickname: Floating windows - Also called: visionOS style, Spatial computing UI, Vision Pro UI - Category: Futuristic & Tech - Moods: Dreamy, Calm, Techy, Luxury - Industries: Travel & Hospitality, Media & Entertainment, Real Estate, AI Products, Luxury & Premium - Style page: https://uilingo.dev/styles/spatial-ui-visionos/ Spatial UI borrows from visionOS: content lives in a few neutral grey glass windows that float in front of a real place (a landscape, a room) instead of a flat page. Windows have 40px+ corners, a soft specular rim instead of a border, and deep blurred shadows that sell distance. Controls are capsules; tab bars and toolbars are “ornaments” that hover just outside the window edge, and a grabber bar sits under each window. Hover is a gentle gaze glow, not a colour change. ## Best for - Travel, hotels and destination showcases - Immersive media and 3D product pages - Spatial / AR app concepts and pitch demos - Premium launches that want an Apple-grade feel ## Avoid for - Dense data tools and long tables - Low-end Android devices (heavy blur) - Brands with no strong photography or scenery ## Do - Put a real scene (photo or painted landscape) behind everything and keep windows neutral grey rgba(36,40,50,.5) - Use 36–48px window radii and full capsules for every control - Float tab bars and toolbars as separate ornaments 12–24px outside the window ## Don't - Don’t use colourful gradient blobs as the backdrop — that is Glassmorphism - Don’t draw hard 1px outlines around windows; use a top specular rim - Don’t stack more than two glass layers or tint the glass with brand colour ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Spatial UI (visionOS)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Neutral frosted-glass windows floating in a real environment, with huge rounded corners, capsule controls and detached ornaments. Design keywords: floating glass windows, real environment backdrop, huge rounded corners, capsule buttons, detached ornaments, window grabber bar, gaze hover glow, neutral grey glass, depth shadows. ## Visual language Content lives in a few neutral grey frosted-glass windows that float in front of a real place — a dusk mountain lake, a room, a city — instead of on a flat page. Windows are matte, not tinted: dark translucent grey with a 40px blur, a soft white specular rim along the top edge instead of an outline, 40px+ corners and deep, blurred shadows that make them hover at a distance. Every control is a capsule, navigation hangs outside the window as detached 'ornaments', and hover is a soft white gaze glow rather than a colour change. Calm, airy, premium — Apple Vision Pro, not neon sci-fi. ## Signature details (must be visible) - Environment backdrop on a fixed layer behind everything: a real scene (photo or painted SVG landscape) dimmed by a top-down rgba(12,16,26,.3–.4) gradient — never colour blobs - Window glass: background linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) over rgba(34,38,48,.56), backdrop-filter blur(40px) saturate(150%), no border, inset 0 1px 0 rgba(255,255,255,.28) rim - Radii: 44px windows, 32px inner platters, full capsules (999px) for buttons, inputs, chips, tabs and badges - Depth shadow: 0 40px 90px rgba(5,8,15,.45) on windows; satellite windows overlap the main one with an even larger shadow to read as closer - Grabber bar under each window: 112×7px white 50% capsule, 18–26px below the bottom edge - Ornaments: tab bar / sidebar is a separate vertical glass capsule floating 16px outside the window, vertically centred; nav is a centred glass capsule - Gaze glow on hover: radial-gradient white highlight that follows the pointer + 0 0 28px rgba(255,255,255,.16) halo - Platters inside a window are lighter rgba(255,255,255,.07) layers with no second blur ## Design tokens — use these exact values Colours (dark mode): - background #28303D - surface rgba(34,38,48,0.56) - surface-2 rgba(255,255,255,0.08) - text #FFFFFF - text-muted rgba(255,255,255,0.72) - primary #FFFFFF (text on it #1A1D24) - secondary #64D2FF (text on it #04212F) - accent #FFB340 - border rgba(255,255,255,0.16) - success #30D158 · warning #FFD60A · danger #FF7A70 - chart series #FFFFFF, #64D2FF, #FFB340, #30D158, #C58AF9 Radius: sm 14px, md 22px, lg 32px, xl 44px, pill 999px Border width: 1px Shadows: sm `0 4px 14px rgba(5,8,15,0.22)`, md `0 18px 44px rgba(5,8,15,0.32)`, lg `0 40px 90px rgba(5,8,15,0.45)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 320ms cubic-bezier(.2,.9,.25,1) ## Typography (Latin + Thai) - Headings: Figtree 600/700 with Thai fallback Anuphan 600/700 - Body: Figtree 400/500/600 with Thai fallback Anuphan 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Anuphan:wght@400;500;600;700&display=swap - CSS stacks: heading `"Figtree", "Anuphan", system-ui, sans-serif`; body `"Figtree", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.4vw, 4.4rem), heading weight 700, heading tracking -0.02em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Anuphan is loopless with the same soft, open geometric bowls as Figtree, so Thai reads like a native system font on glass. ## Components - Primary button: white (#FFFFFF) capsule, near-black #1A1D24 label, 600 weight; hover adds the pointer-following highlight; active scale(.97) - Secondary button: rgba(255,255,255,.16) glass capsule with white label and inset top rim; ghost becomes this on hover - Window card: the glass recipe above, 28–40px padding, white text, muted copy at 72% white - Inputs: recessed wells — capsule, rgba(0,0,0,.22) fill, inset 0 2px 6px rgba(0,0,0,.25); focus adds 2px white 55% ring and a soft white glow - Segmented control & tabs: rgba(0,0,0,.2) capsule track, selected segment rgba(255,255,255,.22) with top rim, no colour - Selected nav / tab-bar item: rgba(255,255,255,.2) capsule platter behind icon+label; unselected items are 72% white - Icon tiles: circular rgba(255,255,255,.14) medallions with a top rim, white icons - Badges and chips: small glass capsules; status shown by tinted text (green #7EE69A, yellow #FFE066, red #FFA59E), never solid colour blocks - Charts: white primary line with a soft white glow, sky-blue #64D2FF secondary, hairline white 14% grid, rounded capsule bars - Switch: dark recessed track, green #30D158 when on, white knob ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: pill style. Sections in order: hero → features → showcase → stats → testimonials → faq → cta. Feature section as grid. Landing: a split hero where the copy itself sits inside a glass window and the product shot is a second window turned slightly away (rotateY −9deg) with small satellite windows overlapping it, then a grabber bar; sections float directly over the scene with text-shadowed headings. Feature cards, FAQ, CTA and article body are each their own window; leave generous gaps so the environment shows between them. Nav is a centred floating capsule ornament. Dashboard: one large window holds topbar and content (cards inside are lighter platters), with a vertical capsule tab-bar ornament floating at its left edge and a grabber bar below. ## Content Use realistic product copy (fictional brand) suited to: Travel, hotels and destination showcases. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Put a real scene (photo or painted landscape) behind everything and keep windows neutral grey rgba(36,40,50,.5) - Use 36–48px window radii and full capsules for every control - Float tab bars and toolbars as separate ornaments 12–24px outside the window ## Don't - Don’t use colourful gradient blobs as the backdrop — that is Glassmorphism - Don’t draw hard 1px outlines around windows; use a top specular rim - Don’t stack more than two glass layers or tint the glass with brand colour - Saturated gradient blobs or neon colours behind the glass — that is Glassmorphism - Hard 1px outlines or tinted (purple/blue) glass - Small radii (<20px) on windows or square buttons - Opaque page backgrounds that hide the environment - Stacking glass inside glass with a second blur - Refraction / liquid distortion effects — that is Liquid Glass ## Stack notes One self-contained HTML file with a