HavenDOCS
Back to Home

Vedic Design System

Haven's aesthetic is rooted in a Vedic philosophy: high-contrast, deeply tactile, and purposefully focused.

🎨 The Palette: "Stone & Flame"

We use a carefully curated palette of stone greys, deep charcoal, and vibrant Vedic oranges to create an immersive sanctuary.

  • Primary: #EA580C (Vedic Orange) — Represents consciousness and enlightenment. Used for critical actions like Connect.
  • Background: #09090B (Midnight Stone) — A deep, grounding black with a slight slate undertone.
  • Accents:
    • bg-white/5 — Subtle borders and inactive surfaces.
    • bg-orange-500/10 — Interactive hover glows.

🧱 Component Tokens

1. Interactive Surfaces

Most interactive elements (buttons, cards, inputs) use a radius of xl (12px) or 2xl (16px) to provide a modern, yet approachable feel.

2. Glassmorphism & Depth

We utilize backdrop-blur-md on headers and navigation layers to create a sense of atmospheric depth. This is most prominent in the Sangha and Connect interfaces.

3. Atmospheric Texture

Haven avoids the "flat" feel of standard digital products. We use subtle noise overlays and grainy gradients to give the UI a tactile, parchment-on-stone character.

⚛️ Elite UI Components

  • The Connect Dashboard: A specialized layout that prioritizes the low-latency video feed while keeping the chat transcript accessible via an elegant slide-out panel (ChatSidebar.tsx).
  • Sanctuary Hierarchy: Sangha servers are distinguished by Lucide icons and custom hex-accents, allowing members to navigate their communities intuitively.
  • Draggable Mini-Players: Using framer-motion, media feeds can be dragged across the viewport to maintain connection while exploring other Haven layers.

💡 Accessibility & Focus

  • Contrast Integrity: All text on dark backgrounds must maintain a minimum 4.5:1 ratio (WCAG AA) using stone-200 or white.
  • Keyboard First: Every interactive element supports full keyboard navigation with a dedicated :focus-visible orange ring.

[!TIP] Haven Philosophy: "Connection before clutter." Every animation, transition, and hover effect should deepen the immersion, never distract from the vibe.

Created by the Haven Creative Bureau.