AI Nebula

# AI Nebula

## Design Philosophy

AI Nebula channels the **mystery and promise of artificial intelligence**. The design visualizes the infinite complexity of neural networks through deep space metaphors — vast dark backgrounds punctuated by luminous nodes of information, connected by flowing gradients that evoke data in motion.

The core belief is that AI products should feel like stepping into the future, not another SaaS dashboard. Every interaction should feel slightly magical, as if the interface itself is intelligent.

## Design Goals

- Create an immersive, futuristic atmosphere that differentiates AI products
- Balance visual spectacle with usability and readability
- Use animation to suggest intelligence and responsiveness
- Maintain performance despite rich visual effects
- Support both technical and non-technical audiences

## Visual Language

The visual language is **cosmic intelligence**. Backgrounds are near-black with deep purple undertones (`#030014`), suggesting the vastness of space or the depth of a neural network. Information floats as luminous panels with holographic borders.

Purple (`#a855f7`) represents AI cognition, cyan (`#06b6d4`) represents data flow, and pink (`#f0abfc`) represents human-AI interaction. These colors glow, pulse, and flow across the interface.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#030014` | Deep space background       |
| surface         | `rgba(255,255,255,0.04)` | Panel backgrounds    |
| primary         | `#a855f7` | AI/cognition elements       |
| secondary       | `#06b6d4` | Data flow, secondary CTAs   |
| accent          | `#f0abfc` | Highlights, interactions    |
| text            | `#e9d5ff` | Primary text                |
| text-muted      | `#7c3aed` | Secondary text              |
| border          | `rgba(255,255,255,0.08)` | Panel borders       |
| neon-purple     | `#c084fc` | Glowing accents             |
| neon-cyan       | `#22d3ee` | Data visualization          |

## Typography

- **Primary Font:** Space Grotesk (geometric, futuristic)
- **Mono Font:** JetBrains Mono (for code/data)
- **Heading Scale:** `clamp(2rem, 5vw, 3.5rem)`
- **Body Size:** 16px, line-height 1.5
- **Font Weights:** 400 (body), 500 (labels), 600 (subheadings), 700 (headings)
- **Special:** Gradient text for hero headings via `background-clip: text`

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Micro gaps               |
| sm    | 8px    | Tight spacing            |
| md    | 16px   | Component padding        |
| lg    | 24px   | Card padding             |
| xl    | 32px   | Section padding          |
| 2xl   | 48px   | Major sections           |
| 3xl   | 64px   | Hero area                |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 8px   | Inputs                   |
| md    | 12px  | Cards                    |
| lg    | 16px  | Feature panels           |
| xl    | 24px  | Hero containers          |
| full  | 9999px| Avatars, badges          |

## Shadows

```css
.purple-glow {
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.3);
}
.cyan-glow {
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.25);
}
.holographic-glow {
  box-shadow: 0 0 80px rgba(240, 171, 252, 0.2);
}
```

## Gradients

```css
.ai-gradient {
  background: linear-gradient(135deg, #a855f7 0%, #06b6d4 50%, #f0abfc 100%);
}
.nebula-gradient {
  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.2) 0%, transparent 70%);
}
.holographic {
  background: conic-gradient(from 180deg, #a855f7, #06b6d4, #f0abfc, #a855f7);
}
.gradient-text {
  background: linear-gradient(135deg, #a855f7, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

## Layout

- **Container:** max-width 1200px, centered
- **Grid:** CSS Grid with named areas
- **Section Spacing:** 96px between major sections
- **Breakpoints:**
  - Mobile: < 640px (single column)
  - Tablet: 640px–1024px (two columns)
  - Desktop: > 1024px (full layout with sidebar)

## Components

### Navbar
- Glass panel with `backdrop-filter: blur(20px)`
- Semi-transparent `rgba(3,0,20,0.8)` background
- Logo with gradient text
- Links with hover glow effect

### Hero
- Full viewport with animated particle background
- Gradient text headline
- Holographic CTA button
- Neural network SVG pattern overlay

### Buttons
- Primary: purple-to-cyan gradient fill
- Secondary: glass with holographic border
- Hover: glow intensifies, scale(1.02)
- Active: glow pulse animation

### Cards
- Glass panels with holographic border on hover
- Subtle inner glow
- Content: icon with gradient background + text
- Hover: border becomes animated gradient

### Data Visualization
- Glowing chart lines with gradient fills
- Animated data points
- Pulsing connection lines

### Footer
- Deep space background
- Gradient divider line
- Social icons with individual glow colors

## Animation

- **Duration:** 300ms standard, 600ms for complex transitions
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Hover Effects:** Glow intensification, border gradient animation
- **Entrance:** Particle convergence, elements fade from glow
- **Continuous:** Subtle floating, pulsing glows, particle drift
- **Transitions:** `transform 300ms ease, box-shadow 400ms ease, border-color 400ms ease`

## Responsive Rules

- **Mobile (< 640px):** Reduced particle count, simplified gradients, 16px padding
- **Tablet (640px–1024px):** Moderate visual effects, two-column layout
- **Desktop (> 1024px):** Full particle system, holographic effects, sidebar
- **Performance:** Particle count scales with device capability

## Accessibility

- All text maintains 4.5:1 contrast against dark backgrounds
- Focus indicators use solid purple outline
- Reduced motion: disables particles and floating, keeps gradients static
- Screen reader: all decorative elements marked `aria-hidden`
- Keyboard navigation follows logical reading order

## Performance

- Particle system uses Canvas API, not DOM elements
- `will-change` on animated elements for GPU acceleration
- Gradients are CSS-only
- `prefers-reduced-motion` disables all continuous animations
- Particles pause when tab is not visible

## Implementation Rules

1. Particle background must use Canvas, never DOM-based particles
2. All glowing effects must use `will-change: box-shadow`
3. Holographic borders must use `conic-gradient` with `border-image`
4. Test performance on mid-range devices — 60fps minimum
5. Gradient text must include solid fallback for unsupported browsers
6. Never let animation block user interaction