kruk/kamatura-landing/DESIGN.md

Command Line Tool for CrUX Rest API

# Kamatura Media - Cinematic Landing Page

## Design System: Organic Tech (Clinical Boutique)

### Identity
A bridge between a biological research lab and an avant-garde luxury magazine.

### Color Palette

**Light Mode:**
- **Moss (#2E4036)**: Primary - grounded, organic, professional
- **Clay (#CC5833)**: Accent - warm, earthy, distinctive
- **Cream (#F2F0E9)**: Background - soft, natural, calming
- **Charcoal (#1A1A1A)**: Text/Dark - readable, sophisticated

**Dark Mode:**
- **Dark Background (#0A0A0F)**: Primary background - deep, sophisticated
- **Dark Surface (#12121A)**: Surface/Card backgrounds - lighter dark
- **Cream (#F2F0E9)**: Text - readable, warm
- **Moss Light (#3A5246)**: Lighter moss for dark mode accents

### Typography
- **Headings**: Plus Jakarta Sans + Outfit (tight tracking)
- **Drama**: Cormorant Garamond Italic
- **Data**: IBM Plex Mono

### Dark Mode Features
- Smooth 500ms transitions between light and dark themes
- Theme toggle button in navbar with Moon/Sun icons
- Automatic system preference detection
- Theme persistence via localStorage
- Optimized contrast ratios for both modes

### Sections Implemented

1. **Floating Navbar** - Pill-shaped, morphs from transparent at hero top to backdrop-blur with border on scroll. Includes dark mode toggle button.

2. **Hero Section** - Full-bleed forest image with moss-to-charcoal gradient overlay, large-scale typography contrast:
   - "Engineering is" (Bold Sans 72px)
   - "Future." (Massive Serif Italic 144px)

3. **Features** - Three interactive cards:
   - **Diagnostic Shuffler**: Simulated AI analysis with cycling patterns
   - **Telemetry Typewriter**: Live terminal-style output with pulsing indicator
   - **Cursor Protocol Scheduler**: Weekly day grid with highlighted selection

4. **Philosophy** - Dark section with parallax organic texture, contrasting statements:
   - "Most engineering agencies focus on: Bleeding-edge hype that never ships."
   - "We focus on: Pragmatic solutions that actually work." (accent-colored)

5. **Protocol** - Stacking archive with three cards:
   - **Discover**: Rotating concentric rings (double-helix motif)
   - **Design**: Scanning laser line across dot grid
   - **Deliver**: Pulsing waveform (EKG-style)

6. **Pricing** - Three-tier grid with middle card pop:
   - Essential ($15K): White, outlined
   - Performance ($45K): Moss background, clay border, larger scale
   - Enterprise (Custom): White, outlined

7. **Footer** - Deep dark, rounded-top, system status indicator with pulsing green dot

## Technical Implementation

### Stack
- **React 19** with hooks (useState, useEffect, useRef)
- **Tailwind CSS v3.4.17** with dark mode via `class="dark"` strategy
- **GSAP 3** with ScrollTrigger plugin for animations
- **Lucide React** for icons (including Moon and Sun for theme toggle)

### Dark Mode Implementation
- Class-based dark mode (`darkMode: 'class'` in Tailwind config)
- Automatic system preference detection on first load
- Theme persistence using localStorage
- Smooth 500ms CSS transitions for theme switching
- Optimized color contrast for accessibility in both modes
- Dark variants for all components using `dark:` prefix

### Animations
- Hero fade-up stagger (0.08s text, 0.15s cards)
- Features reveal on scroll
- Philosophy word-by-word fade-up
- Protocol cards stack with parallax blur
- Button magnetic hover effects (scale 1.03)
- Noise overlay (0.05 opacity) for texture

### Micro-Interactions
- Magnetic buttons with sliding background layers
- Hover lift on links (translateY(-1px))
- Pulsing status indicator
- Live feed cursor blinking
- Smooth theme transition animations

## Running Project

```bash
cd kamatura-landing
npm run dev
```

Visit: http://localhost:5173/

## Visual Distinctions

- **No generic AI patterns**: Every element is bespoke to brand
- **Cinematic scale**: Hero typography at 144px with dramatic contrast
- **Weighted animations**: Power3.out for entrances, power2.inOut for morphs
- **Organic texture**: Real Unsplash images matching "dark forest organic textures moss ferns"
- **Premium feel**: 3rem rounded corners, generous spacing, sophisticated type pairing
- **Dark mode sophistication**: Optimized color schemes for both light and dark modes with smooth transitions

## Brand Messaging

- **Headline**: "Engineering is Future."
- **Value Prop**: "AI-native engineering for pragmatic programmers"
- **CTA**: "Think. Build. Deploy."
- **Differentiation**: "Pragmatic solutions that actually work" vs "Bleeding-edge hype that never ships"