Design System (V1 Draft)

This document contains the original V1 Draft of the Haven (Haven) design language, adapted for the 2026 Vedic Design System.

🎨 The Digital Ashram Palette

Our colors reflect the transition from darkness to enlightenment.

Darkness (Backgrounds)

• stone-950: Used for deepest backgrounds (#0C0A09).
• stone-900: Card surfaces & input fields.
• stone-850: Active nav selection & overlays.

Enlightenment (Accents)

• orange-600: Primary Vedic Orange (#EA580C).
• orange-500/10: Subtle focus states and hover fills.

🧱 Component Foundations

1. Border Radii

We use a "Soft Stone" approach.

• rounded-xl (12px): Buttons, inputs, small cards.
• rounded-2xl (16px): Standard content cards.
• rounded-3xl (24px): Modern modal surfaces.

2. Visual Texture (The "Grit" Effect)

To prevent the platform from feeling "generic digital," we use Noise Overlays and Glassmorphism.

• backdrop-blur-md: Headers & sidebars.
• bg-white/5: Borders and dividers.

3. Typography Hierarchy

memberly focus requires a clear hierarchy.

• Heading 1: 30px (2xl) bold with high contrast (White).
• Body: 16px (base) with a readable grey (stone-400).
• Sub-labels: 12px (xs) uppercase with safe tracking (0.05em).

🏁 Accessibility & UX Standards

• Focus-First: Every interactive element has a visible :focus-visible ring.
• Contrast: All text on dark backgrounds must meet WCAG AAA (7:1) or AA (4.5:1) standards.
• Motions: We use framer-motion for all UI transitions (200ms duration) to ensure the platform feels "alive."

Created by the Antigravity Creative Team.