Ojas Theeram

Overview

Ojas Theeram is a premium Ayurvedic wellness sanctuary positioned at the intersection of ancient Kerala healing wisdom and contemporary luxury hospitality. The brand serves discerning wellness seekers in Bengaluru who seek authentic Panchakarma therapies, personalized consultations, and classical treatments rooted in 5,000 years of Ayurvedic tradition. The aesthetic movement is 'Botanical Minimalism with Earthy Luxury'—a design language that celebrates natural materials, muted earth tones (warm taupe #d4c8af, forest green #2c4a3b, weathered brown #8f7c6b), and generous white space punctuated by serene landscape photography. The UI evokes a sense of sanctuary: calm, grounded, and intentional, where every interaction feels like a step deeper into healing.

The brand voice is warm, authoritative, and contemplative—never clinical, never rushed. Vocabulary patterns include Sanskrit-rooted terms (Panchakarma, Vaidya, Ojas), poetic descriptors (purest form, ancient wisdom, holistic healing), and a measured cadence that mirrors the rhythm of traditional Ayurvedic practice. The tone is conversational yet reverent, inviting users into a narrative of transformation. Example sentence in brand voice: 'Leave your burdens at the threshold—our Panchakarma journey restores what modern life depletes.'

Colors

The color system is rooted in the natural palette of Kerala's spice gardens and Ayurvedic apothecaries. Primary (#d4c8af) is a warm, sophisticated taupe that serves as the signature accent—used on all primary CTAs ('Begin Journey', 'Book Now'), focus states, and brand-defining interactive elements. It conveys luxury without coldness, grounding the interface in natural earth tones. Secondary (#2c4a3b) is a deep forest green that anchors the brand's connection to botanical healing and Kerala's lush landscape; it appears on secondary buttons, accent borders, and supporting UI elements. Tertiary (#8c7f70) is a weathered brown that bridges primary and secondary, used for supporting text, icons, and tertiary interactions. The surface stack (from #f7f7eb to #1d1f23) creates a subtle depth hierarc

Typography

The type system is a carefully curated blend of serif elegance and contemporary clarity, reflecting Ojas Theeram's dual identity as both ancient tradition and modern luxury. Display (Gallient, 140px, 400 weight, -0.02em tracking) is reserved for the hero headline 'Ojas Theeram'—a bespoke serif that commands presence without aggression. Headline-lg and headline-md use Cormorant Garamond (48px and 36px respectively, 400 weight), a classical serif that evokes the written wisdom of Ayurvedic texts while remaining contemporary. Body copy (Geist, 16–18px, 400 weight, 24–28px line-height) is a clean sans-serif that ensures legibility and accessibility across all devices, with generous line-height (1.5) to create breathing room. Labels and CTAs use Space Grotesk (10–12px, 500–700 weight, 0.08–0.1e

Layout

The page rhythm follows a 12-column grid with a fixed max-width of 1280px, creating a balanced container that feels neither cramped nor sprawling. The hero section spans full-width with a layered background (landscape photography + semi-transparent overlay gradient from #060a08cc to transparent), establishing an immersive entry point. Content sections use lg spacing (40px) for vertical separation, creating a measured cadence that invites contemplation rather than rapid scrolling. Horizontal gutters are consistently 24px (md spacing), maintaining visual harmony across breakpoints. The layout philosophy is 'generous negative space'—sections are never densely packed; cards and content blocks are separated by at least 40px vertically and 24px horizontally. Container padding follows a responsiv

Elevation & Depth

Depth is conveyed through subtle layering and soft shadows rather than dramatic elevation. Level 1 (Base): The background is a full-width photographic image (landscape, often misty Kerala hills) with a semi-transparent dark overlay (rgba(0, 0, 0, 0.2) to rgba(0, 0, 0, 0.5) depending on section) to ensure text legibility and create visual hierarchy. Level 2 (Standard Cards & Containers): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts content slightly from the background without creating visual noise. Level 3 (Modals & Elevated Surfaces): Modals and floating

Shapes

The shape philosophy is 'Organic Precision'—a balance between geometric clarity and natural softness. Buttons use full radius (border-radius: 9999px), creating pill-shaped forms that feel approachable and contemporary, echoing the rounded contours of natural forms (seeds, leaves, water droplets). Cards and containers use lg radius (1rem / 16px), a gentle curve that softens edges without appearing overly rounded. Input fields use DEFAULT radius (0.5rem / 8px), a subtle curve that maintains clarity while avoiding harsh corners. The rationale: full-radius buttons are the primary CTA and deserve t

Components

Action Elements Buttons are the primary interaction mechanism and use full radius (border-radius: 9999px) with generous padding (20px 40px for primary, 10px 20px for secondary) to create inviting, clickable targets. Primary buttons (button-primary) use background: {colors.primary} (#d4c8af) with text-color: {colors.on-primary} (#f7f7eb), typography: label-md (Space Grotesk, 12px, 700 weight, 0.08em tracking), and height: 48px. On hover (button-primary-hover), the background transitions to {colors.primary-fixed-dim} (#d4c8af with 10% opacity reduction) over 200ms ease-out, maintaining visual continuity. Secondary buttons (button-secondary) use transparent background with a 1px border in {colors.secondary} (#2c4a3b) and text-color: {colors.secondary}; on hover, the background becomes rgb

Do's and Don'ts

**Do**

• Do use the primary color (#d4c8af) exclusively on high-priority CTAs and brand moments—it is precious and should never be diluted across the interface.
• Do maintain generous white-space (lg spacing: 40px) between major sections to create a contemplative, unhurried user experience.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive surfaces to create subtle depth without visual noise.
• Do use Cormorant Garamond for all headlines to maintain the brand's connection to classical Ayurvedic tradition and written wisdom.
• Do transition all interactive states over 200ms ease-out to create smooth, unhurried interactions that reflect the brand's meditative philosophy.
• Do use full-radius (border-radius: 9999px) exclusively on buttons and badges to create a distinctive, approachable visual signature.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use the warm, muted tones from the surface stack (#f7f7eb, #292929) to maintain the brand's earthy aesthetic.
• Don't apply multiple shadows or layered elevation effects; the system uses only three shadow levels (sm, md, lg), and mixing them creates visual confusion.
• Don't use sans-serif fonts for headlines; Cormorant Garamond is the only acceptable serif for h1–h3 elements, maintaining the brand's classical identity.
• Don't apply rounded corners to input fields beyond DEFAULT (0.5rem); excessive rounding makes inputs appear less functional and more decorative.
• Don't use the secondary color (#2c4a3b) on primary CTAs; it is reserved for secondary actions and supporting elements to maintain clear visual hierarchy.
• Don't animate or transition colors other than background-color and border-color; opacity and transform transitions should be avoided to keep the interface calm and focused.