Omni Space

Overview

Omni Space is Vietnam's pioneer float therapy sanctuary, offering profound stress relief and sensory detox through immersive flotation experiences. The design system embodies **Serene Minimalism**—a philosophy that pairs ethereal, meditative typography (Taviraj serif) with a clean, light-dominant interface anchored by strategic use of electric blue (#357df9) and deep purple (#673de6) accents. The brand evokes tranquility, healing, and a return to nothingness, transforming the digital experience into an extension of the physical sanctuary. The UI prioritizes clarity and calm: every interaction feels deliberate, every color choice purposeful, every transition smooth.

The voice is contemplative yet direct, never rushed or breathless. Omni Space speaks to the user as a guide into stillness: "Rest. Relax. Return to Nothingness." Vocabulary emphasizes sensory language (immerse, sanctuary, tranquility, harmony, rejuvenate) and avoids corporate jargon. Example sentence in brand voice: "Float therapy isn't a treatment—it's a sanctuary for your mind and body to discover what true rest feels like."

Colors

The color system is built on a light, airy foundation (#f2f3f6 surface, #ffffff surface-bright) that evokes the serene, weightless environment of a float tank. **Primary (#357df9)** is an electric azure used exclusively for primary CTAs ("Book Now" button, 48px height with 16px 32px padding, border-radius 9999px), focus states, and key interactive elements—it commands attention without aggression. **Secondary (#673de6)**, a deep purple, serves as the brand's signature accent for supporting actions, badges, and secondary highlights, creating visual rhythm alongside primary. **Tertiary (#fc5185)**, a vibrant pink, is reserved for error states, alerts, and status indicators requiring immediate attention.

The surface stack creates visual hierarchy through subtle shifts: surface-container-low

Typography

The type system pairs **Taviraj** (serif, 400 weight) for all display and headline levels—its elegant, contemplative letterforms reinforce the meditative brand personality. Display (60px, -0.04em letter-spacing, 68px line-height) is reserved for hero headlines like "Float Therapy." Headline-lg (40px, -0.02em, 48px line-height) anchors section titles. Headline-md (28px, -0.01em, 36px line-height) is used for subsections and card titles. **DM Sans** (sans-serif, 400–600 weight) handles all body and label text, providing clarity and readability for instructional content, CTAs, and UI labels. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and descriptive text. Body-md (16px, 400 weight, 24px line-height) is the default for body copy. Label-md (14px, 600 weight

Layout

The layout follows a **12-column fluid grid** with a maximum container width of 1224px, centered on the viewport. The spacing scale is semantic: **lg (40px)** separates major sections (hero to content, content to footer), **md (24px)** is the default gutter between cards and components within sections, **sm (12px)** is used for internal component padding and spacing between related elements. The design favors generous white space—never crowd elements; a minimum of 24px margin between card groups maintains the sanctuary aesthetic. Hero sections use full-viewport height with a dark overlay (rgba(29, 30, 32, 0.4)) over background imagery, with centered text and a prominent CTA button positioned 40px below the headline. Content sections use 24px horizontal padding on mobile, 40px on tablet, an

Elevation & Depth

Depth is achieved through a **soft-shadow hierarchy** that avoids harsh contrast, preserving the serene aesthetic. **Level 1 (Base)**: no shadow; used for the page background and surface-container elements. **Level 2 (Standard Cards & Inputs)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards, input fields, and standard buttons at rest. This shadow is subtle (4px blur, 12px spread) and creates gentle separation from the background. **Level 3 (Elevated/Modals & Hover States)**: box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), applied to modals, dropdowns, and card hover states. The inc

Shapes

The shape philosophy is **Soft-Technical Minimalism**: rounded corners are used strategically to soften the interface while maintaining clarity and precision. **Buttons** use border-radius: 9999px (full pill shape) to create a friendly, approachable CTA aesthetic—this applies to all primary, secondary, and ghost buttons (48px height, 16px 32px padding). **Cards and Containers** use border-radius: 1rem (16px) for a balanced, modern appearance that feels neither too sharp nor too organic. **Input Fields** use border-radius: 0.5rem (8px) for a slightly tighter, more utilitarian feel that distingu

Components

Action Elements **Button-Primary** is the hero CTA, used for "Book Now" and primary conversions. Rendered as: backgroundColor: #357df9, textColor: #ffffff, height: 48px, padding: 16px 32px, border-radius: 9999px, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), fontFamily: DM Sans, fontSize: 14px, fontWeight: 600. On hover, transition to backgroundColor: #265ab2 with box-shadow: 0 8px 20px rgba(38, 90, 178, 0.15) over 200ms ease-out. On active, reduce shadow to 0 2px 8px rgba(0, 0, 0, 0.12) and shift backgroundColor to #1e4a8a. **Button-Secondary** is used for alternative actions ("Manage preferences"). Rendered as: backgroundColor: #f2f3f6, textColor: #1d1e20, border: 1px solid #dadce0, height: 48px, padding: 16px 32px, border-radius: 9999px. On hover, backgroundColor transitions to #ebe4f

Do's and Don'ts

**Do**

• Do use Taviraj serif for all headlines (display, headline-lg, headline-md) to reinforce the meditative, contemplative brand voice.
• Do apply the primary blue (#357df9) exclusively to primary CTAs and focus states; never use it for body text or secondary elements.
• Do maintain at least 24px margin between major content sections and 12px between related components to preserve the sanctuary aesthetic.
• Do use the full pill-shaped button (border-radius: 9999px) for all primary and secondary actions to signal interactivity.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to cards and inputs at rest, and 0 16px 40px rgba(0, 0, 0, 0.12) on hover to create soft depth.
• Do use DM Sans 400 weight for body copy and 600 weight for labels to maintain clarity and hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small text overlaid on busy backgrounds (e.g., hero text).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as standalone colors; always layer them with the surface stack (#1d1e20 for text, #f2f3f6 for backgrounds).
• Don't apply the secondary purple (#673de6) to primary CTAs; reserve it for supporting actions and badges only.
• Don't mix serif (Taviraj) and sans-serif (DM Sans) weights within a single component; maintain visual consistency by using 400 weight for Taviraj and 600 weight for DM Sans labels.
• Don't use sharp corners (border-radius: 0) or perfect circles (border-radius: 50%) on buttons and cards; stick to the defined rounded scale (8px for inputs, 16px for cards, 9999px for buttons).
• Don't apply shadows with blur radius less than 4px or greater than 40px; stay within the defined elevation scale to preserve the soft, serene aesthetic.
• Don't crowd elements; maintain a minimum of 24px gutter between card groups and 40px margin between major sections.
• Don't use the error pink (#fc5185) for non-critical UI elements; reserve it for alerts, errors, and status indicators requiring immediate attention.