Gradient Orbit

# Gradient Orbit

## Design Philosophy

Gradient Orbit believes that **color is emotion**. In a digital landscape of muted grays and safe neutrals, this design unapologetically celebrates the full spectrum. Every surface is a canvas for color, every interaction an opportunity for delight.

The design philosophy draws from Instagram's gradient rebrand and Stripe's bold color usage: gradients aren't decoration — they're identity. The mesh gradient backgrounds create depth and movement, making static pages feel alive.

## Design Goals

- Create an instantly joyful, optimistic first impression
- Use color strategically to guide attention and convey hierarchy
- Maintain readability despite vibrant backgrounds
- Build a flexible system that supports multiple color themes
- Ensure animations enhance rather than distract

## Visual Language

The visual language is **chromatic energy**. Deep purple-black backgrounds (`#0f0720`) serve as the canvas for exploding gradients in indigo, pink, and amber. Mesh gradients create organic, flowing color fields that shift and blend.

Every interactive element has a gradient treatment — buttons, borders, even card edges. The effect is a cohesive, immersive color experience that feels like stepping into a living painting.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#0f0720` | Deep purple-black           |
| surface         | `rgba(255,255,255,0.06)` | Glass panels          |
| primary         | `#6366f1` | Indigo — primary actions    |
| secondary       | `#ec4899` | Pink — secondary actions    |
| accent          | `#f59e0b` | Amber — highlights          |
| text            | `#faf5ff` | Primary text                |
| text-muted      | `#a78bfa` | Secondary text              |
| border          | `rgba(255,255,255,0.1)` | Panel borders       |

## Typography

- **Primary Font:** Outfit (geometric, modern)
- **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

## 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    | 12px  | Inputs                   |
| md    | 16px  | Cards                    |
| lg    | 24px  | Feature panels           |
| xl    | 32px  | Hero containers          |
| full  | 9999px| Pills, avatars           |

## Shadows

```css
.purple-glow {
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.3);
}
.pink-glow {
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.25);
}
.amber-glow {
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.2);
}
```

## Gradients

```css
.rainbow-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}
.mesh-1 {
  background:
    radial-gradient(circle at 20% 80%, #6366f1 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #ec4899 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #f59e0b 0%, transparent 50%);
}
.mesh-2 {
  background: conic-gradient(from 45deg, #6366f1, #ec4899, #f59e0b, #6366f1);
}
.gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
  border-radius: inherit;
  z-index: -1;
}
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

## Layout

- **Container:** max-width 1200px, centered
- **Grid:** CSS Grid with flexible columns
- **Section Spacing:** 80px between major sections
- **Breakpoints:**
  - Mobile: < 640px (single column, 16px padding)
  - Tablet: 640px–1024px (two columns, 24px padding)
  - Desktop: > 1024px (full layout, 32px padding)

## Components

### Navbar
- Glass panel with mesh gradient behind
- Semi-transparent background
- Logo with gradient text
- Links with hover gradient underline

### Hero
- Full-screen mesh gradient background
- Animated gradient orbs floating
- Large gradient text headline
- CTA: rainbow gradient button

### Buttons
- Primary: rainbow gradient fill, white text
- Secondary: glass with gradient border
- Hover: gradient shifts, glow intensifies
- Active: gradient rotates

### Cards
- Glass panels with gradient border on hover
- Internal glow matching card's accent color
- Hover: border becomes animated gradient
- Content with gradient icons

### Forms
- Inputs with gradient border
- Focus: gradient border animates
- Labels with gradient accent

### Footer
- Deep purple background
- Gradient divider
- Social icons with individual gradient colors

## Animation

- **Duration:** 300ms standard, 600ms for complex
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Hover Effects:** Gradient rotation, glow intensification
- **Entrance:** Elements fade in with gradient sweep
- **Continuous:** Slow gradient rotation on backgrounds, floating orbs
- **Transitions:** `transform 300ms ease, box-shadow 400ms ease, border-color 400ms ease`

## Responsive Rules

- **Mobile (< 640px):** Simplified gradients, reduced orb count, 16px padding
- **Tablet (640px–1024px):** Moderate visual effects
- **Desktop (> 1024px):** Full mesh gradients, animated orbs
- **Reduced motion:** Static gradients, no floating animations

## Accessibility

- All text maintains 4.5:1 contrast against gradient backgrounds
- Focus indicators: solid white outline with 2px offset
- Reduced motion: all animations disabled, gradients become static
- Screen reader: decorative gradients marked `aria-hidden`
- High contrast mode: all gradients become solid colors

## Performance

- Mesh gradients use CSS only, no image assets
- Animated orbs use CSS animations, not JavaScript
- `will-change` on animated elements
- `prefers-reduced-motion` disables all animation
- Gradient borders use `border-image` or pseudo-elements

## Implementation Rules

1. Gradient borders must use pseudo-element technique for border-radius support
2. All gradient text must include solid color fallback
3. Animated gradients must use `@keyframes`, never JavaScript
4. Test contrast at every gradient stop — worst-case must pass AA
5. Mesh gradients must not exceed 3 radial-gradient layers for performance
6. Never animate gradients faster than 10s per cycle