Aurora Glass

# Aurora Glass

## Design Philosophy

Aurora Glass draws its soul from the natural phenomenon of the aurora borealis — shimmering curtains of light dancing across an arctic sky. The design philosophy centers on **translucent layering**: every surface reveals a hint of what lies beneath, creating a sense of infinite depth without sacrificing clarity.

The core belief is that digital interfaces can feel organic. By combining frosted-glass effects with ethereal gradients, Aurora Glass transforms the cold precision of SaaS software into something that feels alive, breathing, and inherently premium.

## Design Goals

- Create an immediately striking visual identity that differentiates from flat SaaS templates
- Maintain WCAG AA contrast ratios despite translucent surfaces
- Deliver a consistent experience from 320px mobile to 2560px ultrawide
- Ensure glass effects degrade gracefully on low-power devices
- Establish a mood of trust, innovation, and technological sophistication

## Visual Language

The visual language is built on three pillars:

1. **Translucency** — Every major surface uses `backdrop-filter: blur()` with semi-transparent backgrounds
2. **Aurora Gradients** — Organic, flowing gradients in purple, blue, and cyan that reference the northern lights
3. **Floating Depth** — Elements float at different z-levels, casting soft glows rather than hard shadows

Backgrounds are deep, almost-black purples (`#0f0b1a`) that allow the aurora palette to glow. Foreground elements use glass panels with 6-10% white opacity, creating visible but non-distracting surfaces.

## Color System

| Token           | Value                      | Usage                        |
|-----------------|----------------------------|------------------------------|
| background      | `#0f0b1a`                | Page background              |
| surface-glass   | `rgba(255,255,255,0.06)` | Card and panel backgrounds   |
| primary         | `#7c3aed`                | CTA buttons, active states   |
| secondary       | `#06b6d4`                | Secondary actions, accents   |
| accent          | `#22d3ee`                | Highlights, badges           |
| text-primary    | `#f0eaff`                | Headings, body text          |
| text-muted      | `#9ca3af`                | Secondary text               |
| border          | `rgba(255,255,255,0.12)` | Panel borders, dividers      |
| glow-purple     | `rgba(124,58,237,0.3)`   | Purple glow effects          |
| glow-cyan       | `rgba(34,211,238,0.25)`  | Cyan glow effects            |

## Typography

- **Primary Font:** Inter (Google Fonts)
- **Monospace:** JetBrains Mono (for code blocks)
- **Heading Scale:** `clamp(2rem, 5vw, 3.5rem)` for H1, stepping down 60% per level
- **Body Size:** 16px base, 1.5 line-height
- **Font Weights:** 400 (body), 500 (labels), 600 (subheadings), 700 (headings)
- **Letter Spacing:** -0.02em for headings, normal for body

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Icon padding             |
| sm    | 8px    | Tight gaps               |
| md    | 16px   | Standard component gaps  |
| lg    | 24px   | Section padding          |
| xl    | 32px   | Card padding             |
| 2xl   | 48px   | Section spacing          |
| 3xl   | 64px   | Hero spacing             |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 8px   | Inputs, small elements   |
| md    | 12px  | Cards, panels            |
| lg    | 20px  | Hero sections, modals    |
| xl    | 28px  | Feature cards            |
| full  | 9999px| Avatars, badges          |

## Shadows

```css
.glass-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.purple-glow {
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
}
.cyan-glow {
  box-shadow: 0 0 80px rgba(34, 211, 238, 0.25);
}
```

## Gradients

```css
.aurora-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}
.glass-gradient {
  background: linear-gradient(135deg, rgba(124,58,237,0.4), rgba(6,182,212,0.4));
}
.orb-gradient {
  background: radial-gradient(circle at 30% 20%, #7c3aed 0%, transparent 50%);
}
```

## Layout

- **Container:** max-width 1200px, centered, padding 0 24px
- **Grid:** CSS Grid with auto-fill, minmax(320px, 1fr)
- **Section Spacing:** 80px vertical between major sections
- **Breakpoints:**
  - Mobile: < 640px (single column, stacked nav)
  - Tablet: 640px–1024px (two-column grid)
  - Desktop: > 1024px (full layout, sidebar optional)

## Components

### Navbar
- Glass panel with `backdrop-filter: blur(16px)`
- Semi-transparent background `rgba(15,11,26,0.7)`
- Fixed position with z-index 50
- Logo left, nav links center, CTA button right

### Hero
- Full viewport height with aurora gradient overlay
- Floating decorative orbs positioned absolutely
- Headline in gradient text (`background-clip: text`)
- CTA button with aurora gradient fill

### Buttons
- Primary: aurora gradient fill, white text, 12px radius
- Secondary: glass panel with border, purple text
- Hover: scale(1.02), glow intensifies

### Cards
- Glass panels with blur(12px) backdrop
- Semi-transparent border
- Subtle purple glow on hover
- 20px border radius

### Forms
- Glass inputs with transparent backgrounds
- Border turns purple on focus
- Floating labels with smooth transitions

### Footer
- Dark background with subtle gradient border-top
- Multi-column layout with glass card links

## Animation

- **Duration:** 200ms standard, 400ms for page transitions
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)` for standard, `cubic-bezier(0.34, 1.56, 0.64, 1)` for bouncy
- **Hover Effects:** scale(1.02), glow intensification, border color shift
- **Entrance:** Fade-up with 20ms stagger per element
- **Transitions:** `transform 200ms ease, box-shadow 300ms ease, opacity 200ms ease`

## Responsive Rules

- **Mobile (< 640px):** Single column, hamburger menu, reduced blur for performance, stacked cards
- **Tablet (640px–1024px):** Two-column grid, condensed navigation, 50% opacity on decorative orbs
- **Desktop (> 1024px):** Full grid, floating orbs at full opacity, sidebar navigation available
- **Ultrawide (> 1536px):** Max-width container with additional horizontal padding

## Accessibility

- All glass panels maintain minimum 4.5:1 contrast ratio against text
- Focus-visible outlines use 2px solid `#7c3aed` with 2px offset
- Reduced motion: disables orb animations, keeps static gradients
- Screen reader text for decorative elements uses `aria-hidden="true"`
- Skip navigation link at top of page

## Performance

- `backdrop-filter` uses `will-change: backdrop-filter` for GPU acceleration
- Decorative orbs use CSS animations, not JavaScript
- Gradients are CSS-only, no image assets
- Font loading uses `font-display: swap`
- Images use `loading="lazy"` and modern formats

## Implementation Rules

1. All glass surfaces must use CSS custom properties for colors to enable theming
2. Orb animations must be paused when out of viewport using Intersection Observer
3. `prefers-reduced-motion` must disable all floating animations
4. Never use `backdrop-filter` on elements that overlap text directly
5. Test contrast ratios with both dark and light aurora gradient backgrounds
6. Use semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`