# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Inflated, 3D, chrome-rendered — the millennium's love letter to dimensional type |
| **Examples** | Orbitron, Eurostile Extended, Space Grotesk (heavy), Monument Extended, inflated/bubble custom fonts |
| **Weight** | 700-900 (heavy — the type needs mass for the 3D effect) |
| **Tracking** | 0.02em-0.06em (slightly open, geometric) |
| **Size** | Monumental — `clamp(4rem, 8vw, 10rem)` or larger |
| **Transform** | UPPERCASE for headlines |
| **3D Treatment** | Chrome gradient fill, extruded shadow, inflated/bubble outline |

**Why inflated 3D type:** The Y2K aesthetic was obsessed with dimensional type — type that looked like it was extruded, inflated, or rendered in 3D. Modern CSS (background-clip: text, text-shadow, gradient fills) can simulate this without actual 3D rendering. The type should feel like a physical object, not pixels.

---

## Chrome Text Effect

```css
.chrome-text {
  background: linear-gradient(
    135deg,
    #E8E8E8 0%,
    #FFFFFF 25%,
    #C0C0C0 50%,
    #E8E8E8 75%,
    #A0A0A0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3),
               0 -1px 2px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
```

**The chrome gradient** shifts between silver (#E8E8E8), white (#FFFFFF), and gray (#C0C0C0). The text-shadow creates the illusion of light hitting a curved metallic surface — highlights on top, shadows on bottom.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean sans or pixel font — provides contrast to the inflated display |
| **Examples** | Space Mono, JetBrains Mono, Inter, Plus Jakarta Sans |
| **Weight** | 400-600 |
| **Tracking** | 0.02em-0.04em |
| **Size** | `clamp(0.875rem, 1vw, 1.125rem)` — 14-18px |
| **Line Height** | 1.5-1.6 |

**Why pixel/mono body:** A monospace body font references the pixel fonts of the Y2K era while remaining readable. The contrast between inflated chrome display and pixel body creates a productive tension: the display is from the future; the body is from the computer.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Pixel font or monospace — technical, retro-digital |
| **Examples** | Space Mono, JetBrains Mono, VT323 (for extreme pixel) |
| **Weight** | 400-500 |
| **Tracking** | 0.1em-0.2em (wide, like old computer labels) |
| **Size** | 10-14px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, navigation, technical annotations. These tiny labels feel like readouts from a millennium-era computer interface — "SYSTEM", "STATUS", "FREQUENCY".

---

## Type Scale

```
Display:  clamp(4rem, 8vw, 10rem)  — monumental, inflated, chrome
Body:     clamp(0.875rem, 1vw, 1.125rem) — 14-18px, clean sans or mono
Micro:    10-14px                    — pixel/mono labels
```

The scale spans from 10px to 160px — a 16:1 ratio. The display is the chrome monument; the micro is the computer readout.

---

## Font Pairing Logic

**Inflated display + pixel/mono body:** Orbitron (chrome, inflated) + Space Mono (pixel, technical). The display is the millennium dream; the body is the millennium computer. This pairing captures both the optimism and the technology of the era.

**Alternative:** Eurostile Extended (display) + Inter (body) — less pixel, more modern. The contrast is between the geometric display and the humanist body.

**Never:** Serif typefaces (wrong era entirely), thin/light weights (the display needs mass), or handwritten fonts (wrong register).

# Color Architecture

## Ground

```css
--color-ground: #000000; /* Pure black — the stage for chrome */
```

**Why pure black:** Chrome against black is the same principle as stars against the night sky. The darkness makes the metallic surfaces visible. A chrome gradient on white looks washed out; on black, it looks like polished metal. The black is absolute — not dark gray, not near-black.

---

## Chrome Gradient

```css
--chrome-gradient: linear-gradient(
  135deg,
  #E8E8E8 0%,
  #FFFFFF 20%,
  #C0C0C0 40%,
  #808080 60%,
  #C0C0C0 80%,
  #E8E8E8 100%
);

--chrome-blue-shift: linear-gradient(
  135deg,
  #E8E8E8 0%,
  #FFFFFF 15%,
  #B0C4DE 35%,
  #C0C0C0 55%,
  #E8E8E8 80%,
  #A0A0A0 100%
);
```

**The chrome gradient** shifts between silver (#E8E8E8), white (#FFFFFF), and gray (#C0C0C0). The blue-shifted variant adds a subtle cool tint (#B0C4DE) that references the cool tones of polished chrome under daylight.

---

## Holographic / Iridescent Accents

```css
--holographic-gradient: linear-gradient(
  135deg,
  #FF006E 0%,
  #FB5607 15%,
  #FFBE0B 30%,
  #8338EC 45%,
  #3A86FF 60%,
  #06FFA5 75%,
  #FF006E 100%
);

--iridescent-shift: conic-gradient(
  from 0deg,
  #FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF, #06FFA5, #FF006E
);
```

**Usage:** Holographic gradients appear on hover, on chrome borders, and as accent fills. The iridescence shifts with interaction — like light hitting an oil slick or a CD surface. The rainbow is the "color" in a style that's otherwise chrome and black.

---

## Electric Accents

```css
--accent-electric-blue: #0066FF;  /* Y2K electric blue */
--accent-hot-magenta: #FF006E;   /* Hot pink/magenta */
--accent-acid-green: #06FFA5;     /* Acid green — Matrix reference */
--accent-cyber-yellow: #FFBE0B;   /* Cyber yellow */
```

**Rule:** These electric accents appear as solid color fills on small elements — buttons, icons, highlights. They're the Y2K color palette: saturated, electric, optimistic. Use them sparingly — the chrome and holographic gradients are the primary visual interest.

---

## Text

```css
--text-on-black: #E8E8E8;       /* Silver-white — readable on black */
--text-chrome: transparent;      /* Chrome gradient fill via background-clip */
--text-muted: rgba(232, 232, 232, 0.5); /* Muted silver for secondary text */
```

**On black:** Text is silver-white (#E8E8E8), not pure white. Pure white on black creates too much contrast — silver-white feels like it belongs in the chrome world.

---

## Color Treatment

| Surface | Treatment |
|---------|-----------|
| Background | Pure black #000000 |
| Display text | Chrome gradient (background-clip: text) |
| Body text | Silver-white #E8E8E8 |
| Borders | Chrome gradient or 1px solid #C0C0C0 |
| Buttons | Chrome gradient fill or holographic on hover |
| Cards | 1px chrome border, transparent bg, holographic hover |
| Accents | Electric blue, hot magenta, acid green (sparingly) |

---

## Color Don'ts

| Don't | Do Instead |
|------|------------|
| White or light background | Pure black #000000 — chrome needs darkness |
| Flat silver/gray fills | Chrome gradients with specular highlights |
| Muted or desaturated accents | Electric, saturated Y2K colors |
| Static color palettes | Holographic gradients that shift on interaction |
| Pastel tones | Electric, high-saturation colors only |
| Earth tones | Wrong era entirely — this is synthetic, not natural |
| Subtle gradients | Bold chrome gradients with high contrast |

# Motion Principles

## Philosophy

Motion in Retro-Futuristic is **energetic and bouncy**. This is the opposite of cinematic restraint — it's playful, optimistic, and physical. Spring physics, floating 3D objects, liquid metal morphing. The motion should feel like the millennium's optimism: everything is possible, everything is alive, everything is moving.

---

## Bouncy Spring Physics

| Element | Animation | Physics | Duration |
|---------|-----------|---------|----------|
| 3D objects | Float + rotate | Spring (stiffness 100, damping 10) | Continuous |
| Chrome text | Scale on hover | Spring (stiffness 200, damping 15) | 400ms |
| Cards | Lift on hover | Spring (stiffness 150, damping 12) | 500ms |
| Holographic borders | Gradient shift on hover | Ease-in-out | 600ms |

```javascript
// Spring physics (framer-motion)
<motion.div
  animate={{ y: [0, -10, 0], rotateY: [0, 360] }}
  transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
/>
```

**Why spring:** The Y2K aesthetic was optimistic and playful. Spring physics capture that energy — everything bounces, everything has life. Linear or ease-out feels too controlled; spring feels like the future is exciting.

---

## Floating / Rotating 3D Objects

| Object | Motion | Duration | Easing |
|--------|--------|----------|--------|
| Orbiting elements | Circular orbit + self-rotation | 8-12s | linear, infinite |
| Floating chrome spheres | Y-axis bob + slow rotate | 4-6s | ease-in-out, infinite |
| Inflated type | Subtle scale breathing (1.0 → 1.02) | 3-5s | ease-in-out, infinite |
| Wireframe shapes | 3D rotation (all axes) | 10-15s | linear, infinite |

**The floating should feel weightless** — like objects in zero gravity. The motion is slow, continuous, and hypnotic. It creates a sense that the page is a 3D space, not a flat surface.

---

## Liquid Metal Morphing

```css
@keyframes liquid-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

.liquid-metal {
  animation: liquid-morph 8s ease-in-out infinite;
  background: var(--chrome-gradient);
  filter: blur(2px) contrast(1.2);
}
```

**Purpose:** Liquid metal morphing creates the illusion of a chrome surface that's alive — shifting, flowing, reshaping. This is the millennium's vision of nanotechnology and smart materials.

---

## Scanline Effects

```css
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.3;
}
```

**Purpose:** Scanlines reference CRT monitors — the flickering, scanning display technology of the Y2K era. They're a textural overlay that says "this is a screen, this is digital, this is from the age of monitors."

---

## CRT Flicker on Hover

```css
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
  52% { opacity: 0.98; }
  54% { opacity: 0.93; }
}

.crt-hover:hover {
  animation: crt-flicker 0.15s infinite;
}
```

**Usage:** On hover, elements briefly flicker like a CRT monitor with a loose connection. It's a subtle, nostalgic effect that rewards interaction.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Chrome headline | Scale 0.8→1 + opacity 0→1 | 800ms | spring (stiffness 100) | 0ms |
| Orbiting 3D elements | Fade in + begin orbit | 1200ms | ease-out | 400ms |
| Holographic CTA | Scale 0.9→1 + gradient shift | 600ms | spring (stiffness 200) | 800ms |
| Cards | Staggered fade-in + scale | 500ms each | spring (stiffness 150) | 1000ms (stagger 100ms) |
| Scanline overlay | Opacity 0→0.3 | 2000ms | ease-in | 0ms |

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Chrome text | Gradient shift (rotate gradient 45deg) | — |
| Holographic borders | Rainbow shift animation (1s loop) | — |
| Cards | Lift -8px + chrome border glow | — |
| Buttons | Holographic gradient fill + scale 1.05 | — |
| 3D objects | Rotation speed 1x → 2x | — |

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All floating/rotation: disabled (static)
- Spring physics: instant (no bounce)
- Scanlines: static (no flicker)
- Liquid morphing: disabled
- Entrance animations: instant opacity

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Slow, cinematic fades | Wrong energy — this is bouncy, not contemplative |
| Linear, mechanical motion | Too controlled — needs spring physics |
| Subtle, barely-perceptible effects | This style is bold — effects should be visible |
| Text typing animations | Too gimmicky, even for this playful style |
| Parallax scroll | This style is about 3D space, not scroll depth |

# Layout Grammar

## Grid System

**No visible grid.** The layout is spatial and scene-based, not grid-based. Elements float in 3D space, orbit around a central composition, and arrange themselves like objects in a virtual showroom. Internally:

- Full viewport: `min-h-screen`, `overflow-hidden`
- Content centered: `max-w-[1200px] mx-auto`
- Hero composition: centered, poster-like
- 3D elements: absolute-positioned with orbit animations

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-screen` |
| Background | Pure black #000000 |
| Layout | Centered, poster-like — giant chrome type with orbiting 3D elements |
| Composition | Type centered, 3D objects orbiting around it |

```
┌─────────────────────────────────────────┐
│         ◆ (orbiting element)            │
│                                         │
│    ╔═══════════════════════════╗       │
│    ║   CHROME FM (chrome text)  ║       │
│    ╚═══════════════════════════╝       │
│                                         │
│         ◆ (orbiting element)            │
│    [HOLOGRAPHIC CTA]                   │
└─────────────────────────────────────────┘
```

**The hero is a poster.** Giant chrome type centered, 3D elements orbiting around it, holographic CTA below. It's not a web layout — it's a millennium concert poster rendered in a browser.

---

## Layout Patterns

### Pattern 1: Centered Poster Hero
```
┌─────────────────────────────────────────┐
│         [3D orbiting elements]          │
│                                         │
│         CHROME TYPE                     │
│         (giant, centered)               │
│                                         │
│         [HOLOGRAPHIC CTA]               │
│         [3D orbiting elements]          │
└─────────────────────────────────────────┘
```

### Pattern 2: Chrome Card Grid
```
┌──────────┐  ┌──────────┐  ┌──────────┐
│ Chrome   │  │ Chrome   │  │ Chrome   │
│ border   │  │ border   │  │ border   │
│ card     │  │ card     │  │ card     │
│ Holo     │  │ Holo     │  │ Holo     │
│ hover    │  │ hover    │  │ hover    │
└──────────┘  └──────────┘  └──────────┘
```

### Pattern 3: Spatial Scene
```
┌─────────────────────────────────────────┐
│  [3D object]    [Headline]    [3D obj]  │
│                                         │
│        [Floating chrome sphere]         │
│                                         │
│  [Body text]    [CTA]    [3D object]   │
└─────────────────────────────────────────┘
```

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 10vh, 8rem);
--content-max-width: 1200px;
--edge-margin: clamp(1.5rem, 4vw, 4rem);
```

**Spacing is generous but not monumental.** This style has energy — it doesn't need the extreme whitespace of cinematic styles. The sections should feel like scenes in a virtual showroom, not pages in a book.

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full poster hero with orbiting 3D elements, chrome card grid |
| **Tablet (768px)** | Simplified hero — fewer orbiting elements, cards stack 2-column |
| **Mobile (375px)** | Centered hero, no orbiting elements, cards stack 1-column, chrome text scales down |

**On mobile:** The 3D orbiting elements are removed — they're too complex for small screens. The chrome text remains but scales down. The holographic CTA stays. The energy is maintained through color and type, not 3D motion.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Grid-based layouts | Spatial, scene-based compositions |
| Left-aligned editorial layouts | Centered, poster-like compositions |
| Dense content areas | Generous spacing with floating elements |
| Standard card grids | Chrome-bordered cards with holographic hover |
| Top navigation bars | Minimal nav — chrome text links or icon nav |
| Asymmetric layouts | This style is centered and poster-like — symmetry is part of the aesthetic |

# Texture & Surface

## Primary Texture: Chrome / Metallic

The texture IS chrome. Every prominent surface should have a metallic quality:

| Surface | Treatment |
|---------|-----------|
| Display text | Chrome gradient (silver/white/gray shift) with specular highlights |
| Borders | Chrome gradient or 1px solid #C0C0C0 |
| Buttons | Chrome gradient fill or holographic on hover |
| Cards | 1px chrome border, transparent bg, holographic gradient on hover |
| 3D objects | Chrome material (metallic shader or CSS gradient simulation) |

**Chrome gradient:**
```css
background: linear-gradient(135deg, #E8E8E8 0%, #FFFFFF 25%, #C0C0C0 50%, #E8E8E8 75%, #A0A0A0 100%);
```

The gradient shifts between silver, white, and gray — simulating light hitting a curved metallic surface.

---

## Holographic / Iridescent Reflections

```css
.holographic {
  background: linear-gradient(135deg, #FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF, #06FFA5);
  background-size: 200% 200%;
  animation: holo-shift 3s ease-in-out infinite;
}

@keyframes holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
```

**Usage:** Holographic gradients appear on hover, on chrome borders, and as accent fills. The iridescence shifts continuously — like light hitting an oil slick or a CD surface. The rainbow is the "color" in a style that's otherwise chrome and black.

---

## Scanlines

```css
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.3;
}
```

**Parameters:**
- Line spacing: 3px (1px dark, 2px transparent)
- Opacity: 0.3 (visible but not overwhelming)
- Position: fixed (covers viewport, doesn't scroll)

**Purpose:** Scanlines reference CRT monitors — the display technology of the Y2K era. They're a textural overlay that says "this is a screen, this is digital, this is from the age of monitors."

---

## Pixel Dithering

```css
.pixel-dither {
  background-image: radial-gradient(circle, #C0C0C0 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.05;
}
```

**Usage:** Subtle pixel dithering on backgrounds creates a retro-digital texture. It references the limited color depth of early computer graphics. Keep it very subtle (5% opacity).

---

## Lens Flare

```css
.lens-flare {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
```

**Usage:** Lens flares appear on chrome surfaces — simulating light hitting a camera lens. They should be subtle and positioned where a real light source would create a flare. This is a millennium visual effect — the era loved lens flares.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Pure black #000000 |
| Display text | Chrome gradient (background-clip: text) |
| Body text | Silver-white #E8E8E8 on black |
| Cards | 1px chrome border, transparent bg, holographic hover |
| Buttons | Chrome gradient or holographic fill |
| 3D objects | Chrome material with specular highlights |
| Scanlines | Fixed overlay at 30% opacity |
| Pixel dither | 5% opacity on backgrounds (optional) |

---

## Texture Don'ts

| Don't | Do Instead |
|------|------------|
| Flat, matte surfaces | Chrome gradients with specular highlights |
| Subtle, invisible textures | Bold scanlines, holographic shifts, lens flares |
| Film grain or analog noise | Digital textures — scanlines, pixel dithering |
| Paper or natural textures | Synthetic, digital, metallic textures only |
| Subtle gradients | Bold chrome gradients with high contrast |
| Muted holographic effects | Full rainbow iridescence that shifts on interaction |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `chrome type` | Metallic gradient text with specular highlights — the style's signature |
| `holographic` | Rainbow gradient that shifts on interaction — the "color" in a chrome/black world |
| `iridescent` | Oil-slick rainbow reflections on chrome surfaces |
| `Y2K aesthetic` | The visual language of 1998-2004 — optimism, chrome, 3D, holographic |
| `inflated type` | 3D, extruded, bubble display type — physical, dimensional |
| `metallic shader` | Chrome material simulation via CSS gradients |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `chrome gradient` | Silver/white/gray shift simulating polished metal |
| `scanlines` | CRT monitor overlay — 1px dark lines at 3px intervals, 30% opacity |
| `pixel dithering` | Retro-digital dot pattern at 5% opacity |
| `lens flare` | Light reflection on chrome surfaces — millennium visual effect |
| `spring physics` | Bouncy, energetic motion — stiffness 100-200, damping 10-15 |
| `liquid metal morphing` | Chrome surface that shifts shape — nanotech aesthetic |
| `CRT flicker` | Subtle opacity flicker on hover — loose-connection monitor effect |
| `orbiting 3D elements` | Objects that circle the hero composition in zero-gravity space |
| `electric blue` | #0066FF — Y2K accent color |
| `hot magenta` | #FF006E — saturated pink accent |

---

## Context Terms

| Term | Mood |
|------|------|
| `millennium optimism` | The future is bright, shiny, and chrome |
| `Y2K` | The year 2000 — technological optimism, digital revolution |
| `concert poster` | Bold, centered, poster-like composition |
| `virtual showroom` | 3D objects floating in black space |
| `nanotechnology` | Smart materials, liquid metal, shape-shifting surfaces |
| `CD surface` | Iridescent rainbow reflections |
| `CRT monitor` | Scanlines, flicker, pixel depth |
| `chrome car` | Polished metal, specular highlights, reflections |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `flat design` | Everything needs dimension — chrome, 3D, inflated type |
| `minimalist` | This style is maximal in its visual effects |
| `muted colors` | Electric, saturated Y2K colors only |
| `subtle animations` | Bouncy, energetic, visible motion |
| `earth tones` | Synthetic, not natural — no browns, greens, or warm grays |
| `paper texture` | Digital, metallic textures only |
| `serif typography` | Wrong era — this is geometric, inflated, chrome |
| `whitespace-driven` | This style fills space with visual effects, not emptiness |
| `cinematic restraint` | This is the opposite of restraint — it's millennium excess |
| `editorial layout` | This is poster-like, not editorial |

---

## Prompt-Ready Phrases

```
"chrome gradient text with specular highlights on pure black ground"
"holographic rainbow gradient that shifts on hover"
"inflated 3D display type at clamp(4rem, 8vw, 10rem)"
"scanline overlay at 30% opacity (CRT monitor effect)"
"spring physics with stiffness 100, damping 10"
"orbiting 3D elements in zero-gravity space"
"liquid metal morphing border-radius animation"
"electric blue #0066FF, hot magenta #FF006E, acid green #06FFA5"
"lens flare on chrome surfaces"
"pixel dithering at 5% opacity"
"CRT flicker on hover (0.15s opacity animation)"
"Y2K aesthetic with modern rendering — not a Windows 98 screenshot"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Music/entertainment** | The chrome-and-black aesthetic matches album art and music visuals |
| **Gen-Z brands** | Y2K nostalgia is a Gen-Z aesthetic — they reclaim what they didn't experience |
| **Streetwear** | Chrome, holographic, and inflated type are streetwear visual language |
| **Gaming** | The 3D, energetic, visual-effects-heavy aesthetic matches gaming culture |
| **Crypto/web3** | The futuristic, chrome, holographic look signals "the future of money" |
| **Creative agencies** | The bold visual effects demonstrate creative capability |
| **Event/festival sites** | The poster-like, high-energy composition matches event promotion |

## Brand Personality Match

This style reinforces brands that are:
- **Optimistic** — the millennium believed the future was bright
- **Bold** — chrome and holographic effects are not for the timid
- **Playful** — spring physics and inflated type have energy and joy
- **Futuristic** — but specifically retro-futuristic, not clean-futuristic
- **Synthetic** — chrome, holographic, pixel — nothing natural here

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B** | Too playful, too bold, too nostalgic for professional services |
| **Luxury (traditional)** | Traditional luxury is restrained — this style is excess |
| **Healthcare/wellness** | The synthetic, chrome aesthetic is the opposite of natural wellness |
| **News/journalism** | The visual effects compete with content and credibility |
| **Government/legal** | Too irreverent, too playful, too "internet" |
| **Minimalist brands** | This style is maximal in its visual effects |
| **Brands needing trust/reliability** | The holographic, shifting aesthetic feels unstable |

## How to Decide

Ask: **"Does my brand want to feel like a millennium concert poster — chrome, holographic, and unapologetically bold?"**

If yes → Retro-Futuristic / Chrome Millennium.
If no → Consider Futuristic Fashion (if you want precision over excess), Dark Tech Terminal (if you want dark without chrome), or Bold Anti-Corporate Color (if you want bold color without chrome).

# Reference Gallery

## Live Sites

### Chrome FM (reference implementation)
- **What works:** Pure black ground, chrome gradient text, holographic accents, inflated display type, scanline overlay, orbiting 3D elements, spring physics
- **URL:** Reference implementation — the canonical example of this style

### Awwwards Y2K-inspired sites
- **What works:** Chrome materials, holographic gradients, inflated 3D type, bouncy motion, scanline textures
- **URL:** awwwards.com (search "Y2K" or "chrome" trends)

### MSCHF (mschf.com)
- **What works:** Bold, irreverent visual language, chrome and holographic accents, high-energy compositions
- **URL:** mschf.com

### Liquid Death (liquiddeath.com)
- **What works:** Bold visual branding, metallic aesthetic, high-contrast black-and-chrome
- **URL:** liquiddeath.com

## Key Visual References

### Chrome Material
- **Chrome gradient** — silver/white/gray shift simulating polished metal
- **Specular highlights** — bright spots where light hits the surface
- **Background-clip: text** — chrome gradient applied to display type
- **Drop-shadow** — depth beneath chrome elements

### Holographic Effects
- **Rainbow gradient** — #FF006E → #FB5607 → #FFBE0B → #8338EC → #3A86FF → #06FFA5
- **Shifting animation** — gradient position animates on hover (3s loop)
- **Oil-slick iridescence** — conic-gradient with rainbow rotation

### Typography References
- **Orbitron 700-900** — geometric, futuristic, chrome-rendered
- **Eurostile Extended** — wide, architectural, millennium
- **Space Mono** — pixel/mono body, retro-digital
- **Inflated/bubble type** — 3D extruded display with chrome fill

### Texture References
- **Scanlines** — 1px dark lines at 3px intervals, 30% opacity
- **Pixel dithering** — dot pattern at 5% opacity
- **Lens flare** — radial gradient simulating light reflection
- **CRT flicker** — subtle opacity animation on hover

## Screenshot Notes

> When capturing references for this style, look for:
> - The background color (must be pure #000000)
> - The chrome treatment (must be gradient, not flat)
> - The holographic effects (must shift on interaction)
> - The scanline overlay (must be visible at ~30% opacity)
> - The motion (must be spring/bouncy, not linear)
> - The type treatment (must be inflated/3D, not flat)
> - The overall energy (must feel optimistic and bold, not restrained)