# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Geometric, futuristic, engineered |
| **Examples** | Orbitron 600-900, Eurostile Extended, Space Grotesk, Monument Extended |
| **Weight** | 600-900 (bold — this style uses heavy display type) |
| **Tracking** | 0.02em-0.06em (slightly open, geometric) |
| **Size** | `clamp(2rem, 4.5vw, 5.25rem)` — large but not monumental |
| **Transform** | UPPERCASE for headlines |

**Why geometric display:** The futuristic aesthetic demands type that looks engineered, not written. Orbitron's circular geometry and wide stance feel like they were designed in a CAD program. This matches the wireframe globe and checkerboard technical framing.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, modern, highly readable sans-serif |
| **Examples** | Plus Jakarta Sans 400-700, Inter, Satoshi, Space Grotesk |
| **Weight** | 400-700 (range for hierarchy) |
| **Tracking** | 0.01em-0.02em (standard) |
| **Size** | `clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem)` — small, precise |
| **Line Height** | 1.5-1.6 |

**Why Plus Jakarta Sans:** It's geometric but humanist — the body text feels modern without being cold. The contrast with Orbitron's extreme geometry creates a productive tension: the display is machine-like, the body is human.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family as body, lighter weight |
| **Examples** | Plus Jakarta Sans 400-500 |
| **Weight** | 400-500 |
| **Tracking** | 0.15em-0.25em (very wide, technical) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, product codes, technical annotations. These tiny labels feel like measurement readouts on a technical instrument — "SHOP", "COLLECTIONS", "JOURNAL", product codes, size indicators.

---

## Type Scale

```
Display:  clamp(2rem, 4.5vw, 5.25rem)  — large, geometric, uppercase
Body:     clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem) — small, precise
Micro:    10-12px                        — technical labels
```

The scale is compact — 10px to 84px. The contrast is between the geometric display and the precise body, not between extreme type sizes.

---

## Font Pairing Logic

**Geometric display + humanist body:** Orbitron + Plus Jakarta Sans. The display is the brand statement (futuristic, engineered); the body is the user interface (readable, functional). This pairing creates a specific tension: the brand feels like the future, the interface feels like now.

**Alternative:** Space Grotesk for both display and body — it has geometric qualities at heavy weights and humanist qualities at regular weights. A single-family approach with extreme weight contrast.

**Never:** Serif typefaces (wrong register entirely), monospace for body (too technical for fashion), or decorative/display fonts that aren't geometric.

# Color Architecture

## Ground

```css
--color-ground: #FFFFFF; /* Pure white — the gallery wall */
```

**Why pure white:** Not cream (#F5F3F0), not off-white (#FAFAFA), not warm white. Pure #FFFFFF. The white is a statement — it's the absence of color, the blank canvas, the gallery wall. Any tint destroys the futuristic precision.

---

## Text

```css
--color-text: #000000;          /* Pure black — the ink */
--color-text-secondary: #333333; /* Dark gray for secondary text */
--color-text-muted: #888888;     /* Medium gray for labels and metadata */
```

**Why pure black:** Not near-black (#1A1A1A), not ink (#111411). Pure #000000. The black-on-white contrast is the highest possible — it's the contrast of a printed page, a technical drawing, a blueprint. This is intentional.

---

## Accents (Gray Only)

```css
--color-gray-200: #E5E5E5;  /* Light gray — borders, dividers */
--color-gray-300: #D1D1D1;  /* Light gray — hover states */
--color-gray-400: #A3A3A3;  /* Medium gray — inactive elements */
--color-gray-500: #737373;  /* Medium gray — secondary text */
--color-gray-600: #525252;  /* Dark gray — active states */
```

**Rule:** No color. No purple, no blue, no warm tones, no cool tones. Gray is the only accent. The restriction forces all visual interest into typography, layout, and interaction.

---

## Grid Overlay

```css
--color-grid: #64748b; /* Slate — for the SVG grid overlay */
--grid-opacity: 0.1;   /* 10% — barely visible, subliminal */
```

**Purpose:** A subtle SVG grid overlay at 10% opacity creates a technical drawing aesthetic. It's not a visible grid — it's a subliminal texture that says "precision, measurement, engineering" without being distracting.

---

## Dual-Image Reveal

The background uses two images:
- **Base layer:** Dark, moody fashion photograph (visible by default)
- **Reveal layer:** Brighter, alternative photograph (revealed by mouse spotlight)

```css
--reveal-mask: radial-gradient(
  circle 200px at var(--mouse-x) var(--mouse-y),
  transparent 0%,
  rgba(0, 0, 0, 0.9) 100%
);
```

The spotlight reveals the second image through the mask. The radius clamps between 160px and 420px depending on viewport size.

---

## Color Don'ts

| Don't | Do Instead |
|------|------------|
| Cream or off-white background | Pure white #FFFFFF |
| Near-black text (#1A1A1A) | Pure black #000000 |
| Any accent color (purple, blue, warm) | Gray-200 through gray-600 only |
| Gradient backgrounds | Solid white or the dual-image reveal |
| Colored hover states | Gray opacity shifts (e.g., #000 → #333) |
| Tinted grid lines | Slate #64748b at 10% opacity |
| Colorful photography | The dual-image reveal uses dark/moody fashion photography |

# Motion Principles

## Philosophy

Motion in Futuristic Fashion is **precise and interactive**. The mouse is the primary motion driver — a spotlight that reveals hidden layers. Secondary motion comes from parallax grid offsets and drawer slide-ins. Everything moves with technical precision, not organic ease. The motion feels engineered.

---

## Mouse-Tracking Spotlight

| Property | Specification |
|----------|--------------|
| **Ease factor** | 0.1 (smooth follow, slight lag) |
| **Radius** | `clamp(160px, 16vw, 420px)` — viewport-relative |
| **Mask** | Radial gradient, transparent center → dark edges |
| **Layers** | Base image (dark) + reveal image (bright) beneath |
| **Update** | `requestAnimationFrame` with lerp smoothing |

```javascript
let mouseX = 0, mouseY = 0;
let smoothX = 0, smoothY = 0;
const ease = 0.1;

function updateSpotlight() {
  smoothX += (mouseX - smoothX) * ease;
  smoothY += (mouseY - smoothY) * ease;
  document.documentElement.style.setProperty('--mouse-x', smoothX + 'px');
  document.documentElement.style.setProperty('--mouse-y', smoothY + 'px');
  requestAnimationFrame(updateSpotlight);
}
```

**The spotlight should feel like a flashlight** — smooth, weighted, slightly trailing the cursor. The 0.1 ease factor creates a cinematic lag that makes the interaction feel intentional, not instantaneous.

---

## Parallax Grid Offset

| Property | Specification |
|----------|--------------|
| **Ease factor** | 0.06 (slower than spotlight — more subtle) |
| **Offset** | `cx * 16 / cy * 16` (16px max offset) |
| **Target** | SVG grid overlay only |

```javascript
const cx = (e.clientX / window.innerWidth - 0.5) * 2;
const cy = (e.clientY / window.innerHeight - 0.5) * 2;
gridX += (cx * 16 - gridX) * 0.06;
gridY += (cy * 16 - gridY) * 0.06;
grid.style.transform = `translate(${gridX}px, ${gridY}px)`;
```

**The grid parallax is subliminal.** At 16px max offset with 0.06 ease, the grid barely moves. But the movement is perceptible — it creates a sense that the page is a 3D space, not a flat surface.

---

## Side Drawer Slide-In

| Property | Specification |
|----------|--------------|
| **Direction** | Right slide-in (translateX 100% → 0) |
| **Duration** | 400-500ms |
| **Easing** | `cubic-bezier(0.76, 0, 0.24, 1)` — smooth, precise |
| **Backdrop** | Blur overlay, fade-in 300ms |

```css
.drawer {
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(0.76, 0, 0.24, 1);
}
.drawer.open {
  transform: translateX(0);
}
.drawer-backdrop {
  opacity: 0;
  transition: opacity 300ms ease;
  backdrop-filter: blur(8px);
}
.drawer-backdrop.open {
  opacity: 1;
}
```

**Why this easing:** `cubic-bezier(0.76, 0, 0.24, 1)` is a smooth S-curve — fast start, slow finish, no bounce. It feels engineered, not organic. The drawer slides in with precision and settles exactly where it should.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Logo | Opacity 0→1 + translateY(-8px)→0 | 600ms | `ease-out` | 0ms |
| Nav links | Opacity 0→1 | 400ms | `ease-out` | 200ms (staggered 80ms) |
| L-corner brackets | Scale 0.8→1 + opacity 0→1 | 800ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 400ms |
| Headline | Opacity 0→1 + translateY(20px)→0 | 700ms | `ease-out` | 600ms |
| Wireframe globe | Rotation 0→360deg + opacity 0→1 | 1200ms | `linear` | 800ms |
| CTA | Opacity 0→1 + scale(0.95)→1 | 500ms | `ease-out` | 1000ms |

**Key:** The wireframe globe rotates continuously — a slow, perpetual spin that signals "global, connected, always on." The rotation is linear, not eased, because it's mechanical.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Nav links | Color #000 → #333 (300ms) | — |
| CTA | Background transparent → #000, text #000 → #FFF (300ms) | — |
| L-corner brackets | Scale 1.0 → 1.02 (400ms) | — |
| Wireframe globe | Rotation speed 1x → 2x (600ms) | — |
| Checkerboard | Opacity 0.5 → 0.8 (300ms) | — |

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Spotlight: instant position (no lerp)
- Grid parallax: disabled
- Drawer: instant open/close
- Entrance animations: instant opacity
- Wireframe globe: static (no rotation)

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

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Bounce or spring easing | Wrong register — this is precision, not play |
| Auto-rotating carousels | The user controls exploration via spotlight |
| Pulsing or breathing effects | Too organic for the engineered aesthetic |
| Text typing animations | Too gimmicky for this precise style |
| Parallax on text elements | Only the grid and spotlight move |

# Layout Grammar

## Grid System

**No visible grid, but a subliminal SVG grid overlay at 10% opacity.** Internally:

- Full viewport: `min-h-screen`, `overflow-hidden`
- Content max-width: `clamp(320px, 90vw, 1400px)`
- Edge margin: `clamp(1.5rem, 4vw, 4rem)`
- The SVG grid overlay creates a technical drawing aesthetic without being a visible grid

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-screen` |
| Background | Dual-image reveal (dark base + spotlight-revealed layer) |
| Layout | Asymmetric — headline left, feature block right-bottom |
| Framing | L-corner brackets at composition edges |
| Overflow | Hidden — the spotlight stays within viewport |

```
┌─[L]──────────────────────────────────[L]─┐
│                                           │
│  LOGO˚                        SHOP | COL  |
│                              ┌────────────┤
│  FUTURE                      │  JOURNAL   │
│  FORWARD                     │  [bag]     │
│  FASHION                     └────────────┤
│                                           │
│  ┌─────────┐    ┌─────────────────────┐   │
│  │SHOP NOW │    │  Wireframe globe    │   │
│  └─────────┘    │  + tagline text     │   │
│                 └─────────────────────┘   │
│                                           │
└─[L]──────────────────────────────────[L]─┘
```

**The L-corner brackets** frame the composition like a camera viewfinder. They're positioned at the four corners of the hero, creating a technical framing that says "this is a composed shot."

---

## L-Corner Brackets

```css
.corner-bracket {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid #000;
}
.corner-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.corner-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.corner-br { bottom: 20px; right: 20px; border-left: none; border-top: none; }
```

**Purpose:** The brackets frame the viewport like a camera viewfinder. They're a visual language that says "precision, composition, technical craft." They should be thin (1px), black, and positioned 20px from the viewport edges.

---

## Side Drawer Navigation

```
┌─────────────────────────────┬──────────────┐
│                             │              │
│  [Main composition]         │  [Drawer]    │
│  (dimmed + blurred          │  SHOP        │
│   when drawer open)         │  COLLECTIONS │
│                             │  JOURNAL     │
│                             │  CART (0)    │
│                             │              │
└─────────────────────────────┴──────────────┘
```

The drawer slides in from the right:
- Width: `clamp(280px, 30vw, 400px)`
- Background: white with backdrop blur
- Easing: `cubic-bezier(0.76, 0, 0.24, 1)`
- The main composition dims and blurs when the drawer is open

---

## Layout Patterns

### Pattern 1: Asymmetric Hero
```
┌─────────────────────────────────────────┐
│  LOGO                        NAV + CART │
│                                         │
│  HEADLINE                               │
│  (large, left-aligned)                  │
│                                         │
│  [CTA]          [Wireframe globe box]  │
└─────────────────────────────────────────┘
```

### Pattern 2: Checkerboard Accent Section
```
┌─────────────────────────────────────────┐
│  [Checkerboard SVG]  [Product image]    │
│  [Product details]   [Checkerboard SVG] │
└─────────────────────────────────────────┘
```

### Pattern 3: Full-Bleed Feature
```
┌─────────────────────────────────────────┐
│  [Full-bleed fashion photography]       │
│  [Small label overlay]                  │
│  [Technical annotation]                 │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full asymmetric hero, L-corner brackets, side drawer, wireframe globe |
| **Tablet (768px)** | Simplified hero — headline stacks, globe hidden, brackets smaller |
| **Mobile (375px)** | Centered hero, no L-brackets, drawer becomes full-width overlay, spotlight radius reduces to 120-200px |

**On mobile:** The spotlight interaction still works but with a smaller radius. The L-corner brackets may be hidden — they can feel cramped on small screens. The drawer becomes a full-width overlay rather than a side panel.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Centered layouts | Asymmetric — headline left, feature block right |
| Card-based design | Full-bleed sections with technical framing |
| Top navigation bar | Side drawer navigation (right slide-in) |
| Visible grid lines | Subliminal SVG grid at 10% opacity |
| Standard hero centering | L-corner bracket framing at viewport edges |
| Multiple columns of text | Single column, left-aligned, precise |
| Filling the viewport with content | Let the white space breathe — the white IS the design |

# Texture & Surface

## Primary Texture: Dual-Image Reveal

The background is not a solid color — it's a dual-image system:

| Layer | Content | Visibility |
|-------|---------|-----------|
| Base layer | Dark, moody fashion photograph | Always visible |
| Reveal layer | Brighter, alternative photograph | Revealed by mouse spotlight |
| Mask | Radial gradient at mouse position | Controls reveal area |

```css
.image-reveal {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.image-reveal__base {
  position: absolute;
  inset: 0;
  background-image: url('dark-fashion-photo.jpg');
  background-size: cover;
  background-position: center;
}
.image-reveal__hidden {
  position: absolute;
  inset: 0;
  background-image: url('bright-fashion-photo.jpg');
  background-size: cover;
  background-position: center;
  -webkit-mask: radial-gradient(
    circle var(--spotlight-radius) at var(--mouse-x) var(--mouse-y),
    black 0%, transparent 100%
  );
  mask: radial-gradient(
    circle var(--spotlight-radius) at var(--mouse-x) var(--mouse-y),
    black 0%, transparent 100%
  );
}
```

**Why dual-image:** The reveal creates an interactive texture — the surface changes as you explore. It's not a static background; it's a surface that responds to touch.

---

## SVG Grid Overlay

```css
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,...");
  /* SVG: thin lines at 40px intervals, stroke #64748b */
}
```

**Parameters:**
- Opacity: 0.1 (10% — subliminal, not visible as a grid)
- Line color: slate #64748b
- Line spacing: 40px
- Parallax: offset by mouse position (16px max, ease 0.06)

**Purpose:** The grid creates a technical drawing aesthetic. It's not a visible grid — it's a texture that says "precision, measurement, engineering" without being distracting.

---

## Checkerboard Pattern

```css
.checkerboard {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: 0.08;
}
```

**Usage:** Checkerboard patterns appear as accent elements — framing product images, filling small decorative areas, referencing 3D modeling viewports. They should be subtle (8% opacity) and used sparingly.

---

## Wireframe Globe

```svg
<svg viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="none" stroke="#000" stroke-width="0.5"/>
  <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="#000" stroke-width="0.5"/>
  <ellipse cx="100" cy="100" rx="80" ry="60" fill="none" stroke="#000" stroke-width="0.5"/>
  <ellipse cx="100" cy="100" rx="30" ry="80" fill="none" stroke="#000" stroke-width="0.5"/>
  <ellipse cx="100" cy="100" rx="60" ry="80" fill="none" stroke="#000" stroke-width="0.5"/>
  <line x1="20" y1="100" x2="180" y2="100" stroke="#000" stroke-width="0.5"/>
</svg>
```

**Usage:** The wireframe globe sits in a small box (120-160px) with a tagline. It rotates continuously (linear, 20s per rotation) — a slow, perpetual spin that signals "global, connected, always on." The globe is a technical decoration, not a functional element.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Dual-image reveal (dark base + spotlight-revealed layer) |
| Grid overlay | SVG grid at 10% opacity, slate #64748b |
| Content area | Pure white #FFFFFF (over the reveal) |
| L-corner brackets | 1px solid #000, 32px × 32px |
| Drawer | White with backdrop blur, 1px left border #E5E5E5 |
| CTA | Transparent bg, 1px border #000 → fill #000 on hover |
| Checkerboard | 8% opacity, 20px squares, used as accent only |

**No shadows, no gradients, no glassmorphism (except drawer backdrop blur).** The style is defined by precision and flatness — depth comes from the dual-image reveal, not from visual effects.

---

## Texture Don'ts

| Don't | Do Instead |
|------|------------|
| Gradient backgrounds | Solid white or dual-image reveal |
| Drop shadows | Flat surfaces — depth comes from the reveal interaction |
| Film grain or noise | Clean, digital, precise — no analog texture |
| Glassmorphism on cards | Backdrop blur only on the drawer overlay |
| Patterned backgrounds (dots, lines) | SVG grid at 10% opacity only |
| Textured photography | Clean, high-contrast fashion photography |
| Colorful imagery | Dark/moody base, brighter reveal — both desaturated |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `pure white minimal` | #FFFFFF ground — the gallery wall, not cream, not off-white |
| `mouse spotlight reveal` | Interactive dual-image system — the mouse is a flashlight |
| `wireframe globe` | Technical SVG decoration — signals global, connected, engineered |
| `checkerboard accent` | 3D viewport reference — precision and measurement |
| `L-corner brackets` | Camera viewfinder framing — technical composition |
| `side drawer navigation` | Right slide-in panels — keeps the canvas clean |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `dual-image reveal` | Dark base + bright reveal layer, masked by radial gradient at mouse position |
| `spotlight radius` | `clamp(160px, 16vw, 420px)` — viewport-relative reveal area |
| `grid parallax` | SVG grid offset by mouse position, 16px max, ease 0.06 |
| `Orbitron display` | Geometric, futuristic typeface — CAD-program aesthetic |
| `Plus Jakarta Sans body` | Humanist sans — readable, modern, not cold |
| `gray accents only` | Gray-200 through gray-600 — no color, ever |
| `subliminal grid` | SVG grid at 10% opacity — texture, not visible grid |
| `drawer slide-in` | `cubic-bezier(0.76, 0, 0.24, 1)` — smooth, precise, engineered |
| `technical framing` | L-brackets + wireframe globe + checkerboard — precision language |
| `gallery wall` | The pure white background — blank, intentional, curated |

---

## Context Terms

| Term | Mood |
|------|------|
| `technical drawing` | Precise, measured, engineered |
| `camera viewfinder` | Composed, intentional, framed |
| `3D modeling viewport` | Digital, spatial, technical |
| `fashion editorial` | Curated, minimal, intentional |
| `CAD program` | Geometric, precise, machine-designed |
| `blueprint` | Technical, planned, exact |
| `gallery` | White walls, curated, minimal |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `cream backgrounds` | Destroys the pure white precision |
| `purple accents` | The most common AI default — destroys the minimalist aesthetic |
| `centered layouts` | Too generic — this style is asymmetric |
| `card-based design` | Too web-app — this is a gallery, not a dashboard |
| `colorful imagery` | Only dark/moody + brighter reveal — no saturated color |
| `gradient backgrounds` | Flat white or dual-image reveal only |
| `drop shadows` | Flat surfaces — depth comes from interaction, not effects |
| `warm tones` | No warmth — this is cool, precise, engineered |
| `serif typography` | Wrong register — this is geometric, not editorial |
| `organic shapes` | Everything is geometric, precise, angular |

---

## Prompt-Ready Phrases

```
"pure white #FFFFFF ground with black text"
"mouse-tracking spotlight reveal with radial gradient mask"
"radius clamp(160px, 16vw, 420px) with ease factor 0.1"
"L-corner brackets framing the composition"
"wireframe globe SVG with continuous linear rotation"
"checkerboard pattern accent at 8% opacity"
"side drawer navigation with cubic-bezier(0.76, 0, 0.24, 1)"
"Orbitron 600-900 display, Plus Jakarta Sans body"
"gray accents only — no purple, no cream, no color"
"SVG grid overlay at 10% opacity, slate #64748b"
"dual-image reveal: dark base + spotlight-revealed bright layer"
"no gradients, no shadows, no glassmorphism (except drawer blur)"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Fashion brands** | The gallery-wall aesthetic showcases fashion as art, not product |
| **Luxury product launches** | The interactive reveal creates engagement without losing premium feel |
| **Design studios** | The technical framing signals craft and precision — the studio's own aesthetic |
| **Architectural firms** | The geometric type and technical framing match architectural drawing language |
| **Premium product pages** | The spotlight reveal turns product viewing into exploration |
| **Tech-fashion hybrids** | The geometric display + interactive reveal bridges tech and fashion |
| **Avant-garde brands** | The extreme minimalism (white, black, gray only) signals confidence and edge |

## Brand Personality Match

This style reinforces brands that are:
- **Precise** — engineered, intentional, measured
- **Futuristic** — forward-looking, not nostalgic
- **Minimal** — confident enough to use only white, black, and gray
- **Interactive** — the spotlight reveal makes every visit an exploration
- **Technical** — the framing elements signal craft and engineering

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **E-commerce with many products** | The minimal layout can't support product grids or catalogs |
| **Content-heavy sites** | The small body text and minimal layout can't support long-form content |
| **Warm, organic brands** | The extreme precision and gray-only palette feels cold |
| **Youth/casual brands** | Too serious, too precise, too gallery-like |
| **Sites needing color** | The no-color rule is absolute — if you need color, this isn't the style |
| **Brands with warm photography** | The dual-image reveal uses dark/moody photography — warm, bright photos don't work |

## How to Decide

Ask: **"Does my brand want to feel like a futuristic gallery — precise, interactive, and completely devoid of color?"**

If yes → Futuristic Fashion.
If no → Consider Monochrome Single Accent (if you need one color), Dark Tech Terminal (if you want dark mode), or Bold Anti-Corporate Color (if you want maximum color).

# Reference Gallery

## Live Sites

### LGPSM
- **What works:** Pure white minimal, black text, mouse-tracking spotlight reveal, wireframe globe, L-corner brackets, checkerboard accents, side drawer navigation
- **URL:** Reference implementation — the canonical example of this style

### Off-White (off---white.com)
- **What works:** Minimal aesthetic with technical/industrial framing, zip-tie motifs, quotation marks as design elements, black-on-white precision
- **URL:** off---white.com

### Acne Studios (acnestudios.com)
- **What works:** Minimal fashion layout, precise typography, generous whitespace, gallery-wall aesthetic
- **URL:** acnestudios.com

### COS (cos.com)
- **What works:** Clean minimal fashion layout, geometric type, restrained color palette, editorial precision
- **URL:** cos.com

## Key Visual References

### Layout References
- **L-corner brackets** — 1px black, 32px × 32px, at viewport corners
- **Asymmetric hero** — headline left, feature block right-bottom
- **Side drawer** — right slide-in, backdrop blur, `cubic-bezier(0.76, 0, 0.24, 1)`
- **Subliminal grid** — SVG at 10% opacity, slate #64748b

### Typography References
- **Orbitron 600-900** — geometric, futuristic, CAD-program aesthetic
- **Plus Jakarta Sans 400-700** — humanist sans, modern, readable
- **UPPERCASE display** — tracking 0.02em-0.06em
- **Micro labels** — 10-12px, tracking 0.15em-0.25em, uppercase

### Interaction References
- **Mouse spotlight** — radial gradient mask, ease 0.1, radius clamp(160px, 16vw, 420px)
- **Grid parallax** — 16px max offset, ease 0.06
- **Wireframe globe rotation** — linear, 20s per rotation, continuous
- **Drawer slide-in** — 500ms, `cubic-bezier(0.76, 0, 0.24, 1)`

### Color References
- **Pure white #FFFFFF** — the gallery wall
- **Pure black #000000** — the ink
- **Gray-200 through gray-600** — the only accents
- **Slate #64748b at 10%** — the grid overlay

## Screenshot Notes

> When capturing references for this style, look for:
> - The background color (must be pure #FFFFFF, not cream)
> - The text color (must be pure #000000, not near-black)
> - The presence of technical framing (L-brackets, globe, checkerboard)
> - The spotlight interaction (should have weighted, cinematic lag)
> - The layout (should be asymmetric, not centered)
> - The color palette (should be gray only — no purple, no blue, no warm tones)
> - The drawer navigation (should slide from right with smooth easing)