DARK-CINEMATIC-STUDIO

Dark Cinematic Studio

Dark moody cinematic with warm cream palette, video backgrounds, serif italic accent, giant pull-up typography.

Difficulty:★★★★☆

Mood:Moody · Warm · Cinematic · Creative · Intimate

Cinematic & Motion-Heavy

Visual DNA

Dark, moody, cinematic — the aesthetic of a filmmaker's studio after midnight. Warm cream (#DEDBC8, #E1E0CC) text on pure black creates intimacy, not intimidation. Video backgrounds with noise overlays add the texture of film grain. Serif italic accent text provides editorial punctuation within clean sans body. Giant pull-up typography animations create drama. Scroll-linked character opacity reveals make reading a cinematic experience. This is the ONE style that uses pure black (#000000) — because the video backgrounds need it. The pure black creates the "screen in a dark room" feeling that video backgrounds require. The warm cream text prevents the black from feeling cold. The noise overlay adds the analog warmth of actual film. Every element feels like it was shot on a camera, not designed in Figma.

Design Principles

WARMTH IN DARKNESS

Cream text (#DEDBC8) on pure black creates intimacy, not intimidation. The warm cream prevents the black from feeling cold or clinical. This is the darkness of a candlelit room, not a server room. Every text element, every surface, every accent carries warmth — the palette is dark but never cold. The warmth is what separates this from generic dark mode.

What it prevents: The default of cold blue or gray text on black that makes every dark site feel like a terminal. The cream palette creates a "midnight studio" feeling, not a "data center" feeling.

---

SERIF ITALIC AS ACCENT

A single italic serif phrase within clean sans creates editorial punctuation. "I am Marcus Chen, *a self-taught director.*" — the italic on "a self-taught director" changes the cadence and emphasis of the sentence. It's a vocal inflection in text form. The serif italic is the one ornate element in an otherwise clean typographic system — it provides the "creative" quality that defines the studio aesthetic.

What it prevents: The default of using bold or color for emphasis. Italic is more refined — it changes the voice, not the volume. It signals "this was written, not typed."

---

SCROLL AS NARRATIVE

Character-by-character opacity reveals tied to scroll position create reading rhythm. As you scroll, text brightens character by character, as if being illuminated by a moving light. This turns scrolling into a cinematic experience — the page reveals itself like a film unspooling. The scroll-linked reveal is the signature motion technique of the style.

What it prevents: The default of static text blocks or simple fade-in reveals. The character-by-character reveal makes the act of scrolling feel intentional and cinematic, not just navigational.

---

VIDEO AS ATMOSPHERE

Video backgrounds are not content — they're atmosphere. Dark, ambient, slow-moving video that adds the texture of real footage without distracting from the text. The video is always dark (underexposed), always slow (no fast cuts), always textured (noise overlay). It provides the "this was filmed" quality that static images cannot.

What it prevents: The default of static hero images or gradient backgrounds. Video creates the "cinematic" feeling that defines the style — but only when it's dark, slow, and atmospheric, not bright and busy.

---

PULL-UP TYPOGRAPHY

Giant text elements pull up from below with staggered timing — each line or word rising into position with a slight delay from the previous one. This creates the "credits rolling" feeling of a film opening. The pull-up is dramatic but controlled — cubic-bezier easing, not bounce. The stagger creates rhythm; the scale creates drama.

What it prevents: The default of simple fade-in or slide-in animations. The pull-up with stagger feels like a film title sequence, not a web page loading.

Typography System

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean sans — modern, confident, large-scale |
| **Examples** | Almarai (300/400/700/800), Inter (400/700/800), Satoshi (400/700) |
| **Weight** | 400-800 (range from regular to extra bold for dramatic scale) |
| **Tracking** | -0.02em to 0.02em (tight to neutral) |
| **Size** | `clamp(2rem, 5vw, 4rem)` — giant, cinematic |
| **Transform** | Sentence case for headlines; mixed case for dramatic effect |

**Why Almarai:** Almarai has a clean, geometric quality that works at giant scale. Its slightly warm character (compared to Inter's clinical precision) matches the cream-on-black palette. The weight range (300-800) allows for dramatic contrast within a single font family.

---

## Italic Accent Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Serif italic — editorial, ornate, the one "creative" element |
| **Examples** | Instrument Serif (italic), Playfair Display (italic), Cormorant (italic) |
| **Weight** | 400 italic (regular italic — the slant IS the emphasis) |
| **Usage** | ONE phrase per headline or sentence, surgically placed |
| **Purpose** | Vocal inflection — changes the cadence and emphasis of the line |

**Example:** "I am Marcus Chen, *a self-taught director.*" — the italic serif on "a self-taught director" creates a pause and emphasis that regular sans cannot. The serif italic is the "creative voice" within the clean sans body.

**Rule:** One italic phrase per sentence or headline. The contrast between sans and serif italic IS the technique — overusing it destroys the effect.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean sans — same family as display, lighter weight |
| **Examples** | Almarai (400), Inter (400/500), Satoshi (400) |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.01em (normal) |
| **Size** | 14-16px (medium — cinematic pages have readable body) |
| **Line Height** | 1.6-1.7 (generous for readability on dark ground) |

**Why same family:** Using the same sans for display and body creates typographic coherence. The italic serif is the only "different" voice — it stands out precisely because everything else is consistent.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same sans, uppercase, wide tracking |
| **Examples** | Almarai (500), Inter (500) |
| **Weight** | 500 |
| **Tracking** | 0.15em-0.2em (wide, cinematic) |
| **Size** | 11-12px (small but readable) |
| **Transform** | UPPERCASE |

**Usage:** Section labels, navigation, metadata, captions. These small uppercase labels provide structure without competing with the display type.

---

## Type Scale

**Ratio:** 1.5x (golden ratio — cinematic, not technical)

```
Display:    clamp(2rem, 5vw, 4rem)     — 1.5x
Headline:   clamp(1.33rem, 3.33vw, 2.67rem) — 1.5x
Subhead:    clamp(1rem, 2vw, 1.5rem)    — 1.5x
Body:       14-16px                      — baseline
Micro:      11-12px                      — 0.75x
```

---

## Font Pairing Logic

**Display + Body:** Same sans family, different weights. This creates coherence — the display and body speak with the same voice, just at different volumes.

**Display + Italic Accent:** Sans display + serif italic accent. This is the signature pairing. The sans speaks the message; the serif italic provides the "creative" inflection. The contrast between sans and serif IS the style.

**Never mix:** Don't use more than 2 typeface families. Sans (display + body) + serif (italic accent only). The serif italic is a voice, not a third family.

Color Architecture

# Color Architecture

## Ground

```css
--color-ground: #000000;       /* Pure black — the ONE style that uses it */
--color-ground-elevated: #0A0A0A; /* Slightly lighter for cards/panels */
--color-ground-panel: #101010;  /* For elevated sections */
```

**Why pure black:** This is the ONE style that uses pure #000000 — because video backgrounds need it. The pure black creates the "screen in a dark room" feeling that video requires. The darkness is the canvas; the video and cream text are the content. Any other background color would fight with the video.

**Why it works here:** The warm cream text and noise overlay prevent the pure black from feeling cold. The warmth comes from the text and texture, not the ground. This is the opposite of cold dark mode — it's warm dark mode.

---

## Text

```css
--color-text-primary: #DEDBC8;   /* Warm cream — the signature text color */
--color-text-secondary: #E1E0CC;  /* Slightly lighter cream */
--color-text-muted: #8A8780;      /* Muted warm gray for metadata */
```

**Why warm cream:** Pure white on pure black is clinical and exhausting. Warm cream (#DEDBC8) has a slight yellow undertone that creates intimacy — the feeling of candlelight, not fluorescent light. The cream prevents the black from feeling cold while maintaining high contrast and readability.

---

## Accent

```css
--color-accent: #DEDBC8;     /* Cream — accent matches text (subtle) */
--color-accent-warm: #C4A882; /* Warm amber — for CTAs and highlights */
```

**Rule:** ONE accent maximum. The accent appears ONLY on:
- Primary CTA buttons (cream or warm amber)
- Active navigation state
- One key phrase or element per section
- Hover state on interactive elements

**Why cream or warm amber:** The accent stays within the warm palette. Cream accent (#DEDBC8) is subtle — it matches the text color, creating emphasis through weight and shape rather than color. Warm amber (#C4A882) is for CTAs that need to stand out more — it's the one "bright" element in the warm-dark palette.

---

## Semantic Colors

```css
--color-success: #6A8A5A; /* Muted warm green */
--color-error: #C46A5A;   /* Muted warm red */
--color-warning: #C4A882; /* Warm amber */
```

**All semantic colors are warm and muted** to maintain the cinematic palette. They communicate meaning through position and context, not saturation.

---

## The Color Rule

> **The palette is warm-dark.** Pure black ground, warm cream text, one warm accent. No cold blues, no purples, no neon. The warmth is what separates this from generic dark mode.

---

## Gradient Policy

**Gradients are allowed for cinematic depth** — specifically for video overlays:
- Dark gradient overlays on video (top and bottom darkening for text readability)
- Subtle vignette effects (radial darkening at edges)
- No gradient buttons, text, or surfaces

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Cold blue or gray text | Warm cream #DEDBC8 |
| Pure white (#FFFFFF) text | Warm cream #DEDBC8 or #E1E0CC |
| Cold blue or purple accents | Warm amber #C4A882 or cream |
| Multiple accent colors | ONE warm accent, used surgically |
| Neon or saturated colors | Muted, warm, cinematic tones |
| Light backgrounds | Pure black #000000 (this is a dark style) |
| Cold dark mode palette | Warm-dark — cream, amber, not blue, gray |

Motion Principles

# Motion Principles

## Philosophy

Motion in Dark Cinematic Studio is **dramatic and choreographed**. Giant text pulls up from below like film credits. Characters brighten one by one as you scroll, as if being illuminated by a moving light. Cards fade and scale in with staggered timing. Everything moves with the patience and precision of a film title sequence — dramatic but controlled, never bouncy, never playful.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Video background | Opacity fade-in | 2000ms | `ease-out` | 0ms |
| Giant display text | Pull-up (translateY 100% → 0) + opacity | 1200ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 300ms |
| Display text (staggered) | Each line/word pulls up with 80ms delay | 1200ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 300ms + i*80ms |
| Body text | Opacity fade-in | 800ms | `ease-out` | 600ms |
| Cards | Scale (0.95 → 1) + opacity | 800ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 400ms + i*100ms |
| CTA | Opacity + scale (0.9 → 1) | 600ms | `ease-out` | 800ms |

**Key easing:** `cubic-bezier(0.22, 1, 0.36, 1)` — smooth deceleration, no bounce. This is the signature easing for all dramatic motion in the style.

---

## Scroll-Linked Animations

| Effect | Specification |
|--------|--------------|
| Character opacity reveal | Text characters brighten (0.2 → 1.0) based on scroll position |
| Card staggered entrance | Cards enter viewport with staggered scale+fade |
| Video playback speed | Optional: video playback rate tied to scroll (subtle) |
| Section transitions | Crossfade with 300ms overlap |

### Character Opacity Reveal Implementation

```jsx
// Each character's opacity is tied to scroll position
// Characters brighten as they enter the "reveal zone" (center of viewport)
const charOpacity = (charIndex, scrollProgress) => {
  const revealZone = 0.4; // 40% of viewport height
  const charPosition = charIndex * 0.02; // stagger per character
  const opacity = Math.max(0.2, Math.min(1, 
    (scrollProgress - charPosition) / revealZone
  ));
  return opacity;
};
```

**Parameters:**
- Base opacity: 0.2 (dim but visible)
- Full opacity: 1.0 (bright)
- Reveal zone: 40% of viewport height
- Stagger: 0.02 per character (subtle, creates wave effect)

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Cream → warm amber (300ms) | — |
| CTA buttons | Slight scale (1.02) + warm glow | Scale 0.98 (tactile press) |
| Cards | Subtle brightness increase (1.0 → 1.05) | — |
| Video backgrounds | No hover state — they're atmosphere | — |
| Links in body | Underline appears (200ms) | — |

**Hover states are subtle and warm.** The warm amber glow on CTA hover matches the cinematic palette — it brightens like a candle, not like a neon light.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant opacity changes
- No pull-up animation (text appears in place)
- No scroll-linked character reveals (text at full opacity)
- No card staggered entrance (all cards appear together)
- Video backgrounds pause or become static images
- Hover states use instant changes (no transition)

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

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Bounce or spring easing | Too playful — this is cinematic, not bouncy |
| Color transitions (except hover) | Breaks the warm-dark discipline |
| Rotation or skew | Too dynamic for cinematic motion |
| Fast, aggressive motion | Cinematic motion is patient and controlled |
| Pulsing or flashing | Too aggressive — the motion is choreographed, not strobing |
| Every element on the page | Motion must be purposeful — pull-up, scroll-reveal, stagger only |
| Video scrubbing on scroll | Too gimmicky — video is atmosphere, not interaction |

Layout Grammar

# Layout Grammar

## Grid System

**Full viewport sections with left-aligned content.**

Each section occupies a full viewport height (`min-h-[100dvh]`), creating the "cinematic frame" feeling. Content within each section is left-aligned with generous margins. The layout breathes — large empty space is intentional, creating the "dark room" atmosphere.

```
┌─────────────────────────────────────────┐
│ [video background, full-bleed]           │
│                                         │
│  GIANT DISPLAY TEXT                      │
│  (left-aligned, pull-up animation)       │
│                                         │
│  Body text (left, max-width 520px)       │
│  [CTA]                                   │
│                                         │
└─────────────────────────────────────────┘
```

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Video (dark, ambient, slow) with noise overlay |
| Headline position | Left-aligned, vertically centered or bottom-aligned |
| Headline size | `clamp(2rem, 5vw, 4rem)` — giant, cinematic |
| Pull-up animation | Staggered, each line/word rises with 80ms delay |
| Supporting text | Below headline, left-aligned, max-width 520px |
| CTA | Below supporting text, left-aligned, warm amber or cream |

**Never centered hero.** Left-aligned content on video background is the structural signature. The video provides atmosphere; the text provides narrative.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 12vh, 10rem);
--component-gap: clamp(2rem, 4vw, 4rem);
--content-max-width: min(1200px, calc(100vw - clamp(2rem, 8vw, 6rem)));
--body-max-width: 520px;
```

**Spacing is very generous.** Cinematic pages have the most whitespace of any style in the system. Each section is a full viewport — the space between sections IS the breathing room.

---

## Layout Patterns

### Pattern 1: Full Viewport Video Hero
```
┌─────────────────────────────────────────┐
│ [dark ambient video, full-bleed]         │
│                                         │
│  GIANT TEXT                              │
│  (pull-up, staggered)                    │
│                                         │
│  Body text                               │
│  [CTA with arrow-in-circle]              │
└─────────────────────────────────────────┘
```

### Pattern 2: Centered Card on Dark
```
┌─────────────────────────────────────────┐
│ [noise overlay on black]                 │
│                                         │
│         ┌─────────────────┐              │
│         │  Centered card   │              │
│         │  bg-[#101010]    │              │
│         │                  │              │
│         │  "I am Marcus,   │              │
│         │  *a director.*"  │              │
│         │  (italic serif)  │              │
│         └─────────────────┘              │
│                                         │
└─────────────────────────────────────────┘
```

### Pattern 3: 4-Column Card Grid
```
┌─────────────────────────────────────────┐
│ [noise overlay on black]                 │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐           │
│  │card│ │card│ │card│ │card│           │
│  │ 1  │ │ 2  │ │ 3  │ │ 4  │           │
│  └────┘ └────┘ └────┘ └────┘           │
│  (staggered entrance, scale+fade)        │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full viewport sections, 4-column card grid, video backgrounds |
| **Tablet (768px)** | Full viewport sections, 2-column cards, video simplified |
| **Mobile (375px)** | Single column, 1-column cards, video may become static image |

**Fluid typography via `clamp()`** keeps the cinematic scale at all sizes. Video backgrounds may degrade to static images on mobile for performance.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered hero layout | Left-aligned on video background |
| Light backgrounds | Pure black #000000 (this is a dark style) |
| Static image heroes | Video backgrounds with noise overlay |
| Dense, packed sections | Full viewport sections with generous space |
| Cold blue or gray text | Warm cream #DEDBC8 |
| Sharp-cornered cards | Subtle rounded corners (4-8px) for cinematic softness |
| No noise overlay | Noise overlay is mandatory — it adds film grain |
| Sans-serif everything | Include serif italic accent phrases |

Texture & Surface

# Texture & Surface

## Primary Texture: Video Backgrounds with Noise Overlay

**The defining element.** Dark, ambient, slow-moving video backgrounds create the "this was filmed" quality that defines the cinematic style. The video is always underexposed (dark), always slow (no fast cuts), always atmospheric (not content). A noise overlay adds the analog warmth of actual film grain.

### Video Specifications

| Property | Specification |
|----------|--------------|
| **Content** | Dark, ambient, slow-moving (clouds, smoke, water, light patterns) |
| **Exposure** | Underexposed — video should be barely visible, mostly texture |
| **Speed** | Slow (no fast motion, no rapid cuts) |
| **Loop** | Seamless loop (no visible jump point) |
| **Audio** | Muted (video is atmosphere, not content) |
| **Overlay** | Dark gradient (top and bottom) for text readability |

### Noise Overlay Implementation

```css
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' /></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>");
}
```

**Parameters:**
- Opacity: 0.5-0.7 (higher than other styles — this is film grain, not subtle paper texture)
- Blend mode: `overlay` (adds texture without darkening)
- Position: `fixed` (covers entire viewport, doesn't scroll)
- No animation — static noise for consistent film grain

---

## Secondary Texture: Dark Gradient Overlays

```css
.video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
```

**Purpose:** Darkens the top and bottom of video backgrounds for text readability. The gradient creates a "vignette" effect that focuses attention on the center while maintaining the dark cinematic atmosphere at the edges.

---

## Tertiary Texture: Film Grain on Cards

Cards and panels have a subtle noise texture that matches the global noise overlay, creating continuity between the video background and the elevated surfaces.

```css
.cinematic-card {
  background: #101010;
  position: relative;
}
.cinematic-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,..."); /* Same noise as global */
  pointer-events: none;
}
```

---

## Image Processing Rules

**All imagery must feel cinematic — dark, grainy, atmospheric:**

| Processing | Effect | When to Use |
|-----------|--------|-------------|
| Noise overlay | Film grain | All surfaces, video backgrounds |
| Dark gradient | Vignette for readability | Over video backgrounds |
| Underexposure | Dark, moody quality | Video and image content |
| Warm tone | Cream/amber color cast | All imagery |
| Desaturation | Muted, cinematic color | Colored imagery |

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Pure black (#000000) + video + noise overlay |
| Cards/Panels | #101010 with subtle noise texture, 4-8px border-radius |
| Buttons | Cream or warm amber, subtle rounded corners, warm glow on hover |
| Navigation | Transparent, cream text, warm amber on hover/active |
| Dividers | 1px hairline (#2A2A2A) or none (sections separated by space) |
| Video overlays | Dark gradient (top and bottom) for text readability |

**Surfaces feel like film — dark, grainy, warm.** The noise overlay is mandatory on all surfaces. Cards have subtle rounded corners (4-8px) for cinematic softness — the ONE style where rounded corners are appropriate.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Bright, busy video | Dark, ambient, slow video |
| No noise overlay | Noise overlay is mandatory (opacity 0.5-0.7) |
| Static image heroes | Video backgrounds (or static images with heavy grain) |
| Cold blue tones | Warm cream and amber tones |
| Sharp-cornered cards | Subtle rounded corners (4-8px) for softness |
| Glossy or glassmorphic surfaces | Dark, grainy, matte surfaces |
| Saturated, vibrant imagery | Underexposed, desaturated, cinematic |
| No gradient overlay on video | Dark gradient for text readability |

Vocabulary Bank

# Vocabulary Bank

## Primary Terms (must appear in prompt to unlock the style)

| Term | Why It Matters |
|------|---------------|
| `warm cream on black` | The specific color combination — #DEDBC8 on #000000 |
| `video background` | The primary texture — dark, ambient, slow-moving video |
| `noise overlay` | The film grain texture — mandatory, opacity 0.5-0.7 |
| `serif italic accent` | The signature typographic technique — one italic phrase |
| `pull-up text animation` | The signature motion — giant text rising from below |
| `scroll-linked character reveal` | The signature scroll effect — characters brighten on scroll |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `filmmaker's studio` | Sets the mood — midnight, creative, intimate |
| `film grain` | The noise quality — analog, warm, not digital |
| `underexposed video` | The video treatment — dark, barely visible, atmospheric |
| `staggered entrance` | The card animation — scale+fade with delay per card |
| `arrow-in-circle CTA` | The specific CTA style — circular button with arrow icon |
| `candlelit darkness` | The warmth quality — warm, not cold, dark |
| `cinematic breathing room` | The generous spacing — full viewport sections |
| `credits rolling` | The pull-up reference — film title sequence aesthetic |
| `vignette` | The gradient overlay — darkened edges for focus |
| `warm-dark` | The palette quality — warm cream prevents cold black |
| `analog warmth` | The texture quality — film, not digital |

---

## Context Terms (set the mood and emotional register)

| Term | Mood |
|------|------|
| `moody` | Dark, atmospheric, emotional |
| `cinematic` | Film-like, dramatic, produced |
| `intimate` | Close, personal, warm |
| `creative` | Artistic, expressive, crafted |
| `midnight` | Late, quiet, focused |
| `studio` | Creative workspace, production environment |
| `filmmaker` | Director, creator, auteur |
| `atmospheric` | Surrounding, immersive, environmental |

---

## Banned Terms (if these appear, the style has broken)

| Term | Why It Breaks the Style |
|------|------------------------|
| `cold blue tones` | The palette is warm-dark, not cold-dark |
| `bright colors` | Everything is muted, dark, and warm |
| `static images only` | Video backgrounds are the primary texture |
| `sans-serif everything` | Serif italic accent is mandatory |
| `light backgrounds` | Pure black #000000 only |
| `neon` / `vibrant` | Muted, warm, cinematic tones only |
| `bounce` / `spring` | Motion is dramatic and controlled, not playful |
| `glassmorphism` | Dark, grainy, matte surfaces — not frosted glass |
| `purple` / `pink` | Warm cream and amber only |
| `fast motion` | Cinematic motion is patient and controlled |
| `clinical` / `technical` | This is creative, not technical |
| `data visualization` | Wrong register — this is cinematic, not data-driven |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"warm cream text (#DEDBC8) on pure black (#000000)"
"dark ambient video background with noise overlay (opacity 0.7)"
"serif italic accent on one phrase per headline"
"giant pull-up text animation (staggered, cubic-bezier(0.22, 1, 0.36, 1))"
"scroll-linked character opacity reveals (0.2 → 1.0)"
"filmmaker's studio after midnight"
"film grain texture on all surfaces"
"underexposed video — dark, barely visible, atmospheric"
"warm-dark palette — cream, amber, not blue, gray"
"arrow-in-circle CTA with warm glow"
"no cold colors, no bright colors, no static-only backgrounds"
```

Anti-Slop Checklist

☐No cold blue or gray text (use warm cream #DEDBC8)

☐No pure white (#FFFFFF) text (use warm cream #DEDBC8 or #E1E0CC)

☐No cold blue or purple accents (warm amber #C4A882 only)

☐No light backgrounds (pure black #000000 only)

☐No static image heroes (video backgrounds with noise overlay)

☐No missing noise overlay (opacity 0.5-0.7 is mandatory)

☐No sans-serif everything (serif italic accent phrases required)

☐No centered hero layout (left-aligned on video)

☐No bounce or spring easing (cubic-bezier(0.22, 1, 0.36, 1) only)

☐No fast, aggressive motion (cinematic motion is patient)

☐No bright, saturated colors (muted, warm, cinematic tones)

☐No glassmorphic surfaces (dark, grainy, matte surfaces)

☐No more than ONE accent color

☐Pure black ground (#000000) present

☐Warm cream text (#DEDBC8) present

☐Video background with noise overlay present

☐Serif italic accent on at least one headline

☐Pull-up text animation (staggered) present

☐Scroll-linked character opacity reveals present

☐Dark gradient overlay on video for readability

☐Full viewport sections (min-h-[100dvh])

☐`prefers-reduced-motion` is honored (video pauses, motion collapses)

☐Generous spacing between sections (cinematic breathing room)

When to Use

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Creative studios & agencies** | The filmmaker's studio aesthetic directly expresses what creative studios do — produce, craft, create. The cinematic quality signals "we make beautiful things." |
| **Filmmaker & photographer portfolios** | The video backgrounds and film grain texture speak the language of film. The pull-up animations feel like title sequences. |
| **Production houses** | The cinematic aesthetic is native to production. Dark, moody, warm — the feeling of a set after hours. |
| **Premium creative tools** | Tools for creators should feel creative. The cinematic quality implies "this tool was made by people who understand craft." |
| **Music & album sites** | Dark, moody, atmospheric — the aesthetic of album art and music videos. The warm cream feels like vinyl liner notes. |
| **Fashion & luxury brands** | Cinematic, intimate, warm — the aesthetic of fashion films. The darkness creates luxury; the warmth creates desire. |
| **Restaurant & hospitality (premium)** | The "midnight studio" feeling maps to intimate, high-end dining and hospitality experiences. |

## Brand Personality Match

This style reinforces brands that are:
- **Creative** — artistic, expressive, crafted
- **Moody** — atmospheric, emotional, not cheerful
- **Intimate** — close, personal, warm
- **Cinematic** — produced, dramatic, film-like
- **Premium** — expensive-feeling through darkness and warmth

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Technical/developer tools** | Too creative and atmospheric. Developers expect technical clarity, not cinematic mood. |
| **Data platforms & analytics** | The cinematic aesthetic works against data density. Data needs clarity, not atmosphere. |
| **Consumer SaaS** | Too dark and moody for casual consumer products. |
| **E-commerce** | The dark, video-heavy aesthetic doesn't support product display or shopping. |
| **Children's or family brands** | Too dark and moody for family audiences. |
| **Healthcare for general consumers** | Too intimate and cinematic for clinical health contexts. |
| **B2B enterprise software** | Too creative and atmospheric for enterprise buyers who expect professional clarity. |

## How to Decide

Ask: **"Does my brand want to feel like a filmmaker's studio after midnight?"**

If yes → Dark Cinematic Studio.
If no → Consider Dither Mono (more brutalist), Data-as-Texture (more data-driven), or Editorial Portrait (more personal).

Common Mistakes

Mistake 1: Using Cold Blue or Gray Text

**What people do:** Set text color to `#FFFFFF` or a cold gray because "it's a dark background, white pops."

**Why it fails:** Pure white and cold grays create a clinical, digital feeling — the opposite of cinematic. The warm cream (#DEDBC8) is what creates the "candlelit" intimacy that defines the style. Cold text on black feels like a terminal; warm cream on black feels like a film.

**Fix:** Use `#DEDBC8` (warm cream) for primary text. The slight yellow undertone creates warmth that prevents the black from feeling cold. Use `#E1E0CC` for slightly lighter text and `#8A8780` for muted metadata.

---

Mistake 2: Using Bright, Busy Video

**What people do:** Use a bright, colorful, fast-moving video as the background because "it's cinematic."

**Why it fails:** The video must be dark, ambient, and slow — barely visible, mostly texture. Bright, busy video competes with the text and destroys the cinematic mood. The video is atmosphere, not content. If the viewer is watching the video instead of reading the text, the video is too bright or too busy.

**Fix:** Use underexposed, slow-moving video — clouds drifting, smoke rising, water rippling, light patterns shifting. The video should be mostly dark with subtle movement. Add a dark gradient overlay (top and bottom) to further darken it for text readability.

---

Mistake 3: Omitting the Noise Overlay

**What people do:** Skip the noise overlay because "it's just texture, it doesn't matter."

**Why it fails:** The noise overlay is the film grain — it's what makes the page feel like film, not digital. Without it, the video background looks like a digital video playing on a website. With it, the entire page feels like it was shot on film. The noise overlay is mandatory, not optional.

**Fix:** Add a global noise overlay (SVG feTurbulence, opacity 0.5-0.7, mix-blend-mode: overlay, position: fixed). This is higher opacity than other styles because the film grain needs to be visible — it's a defining texture, not a subtle enhancement.

---

Mistake 4: Using Sans-Serif for Everything

**What people do:** Use the same sans font for all text, including emphasis, because "it's cleaner."

**Why it fails:** The serif italic accent is the one "creative" element in the typographic system. Without it, the page has clean sans type on dark video — which looks like a generic dark-mode SaaS page, not a creative studio. The serif italic provides the "this was written, not typed" quality that signals craft.

**Fix:** Include at least one serif italic accent phrase per major section. "I am Marcus Chen, *a self-taught director.*" — the italic serif on "a self-taught director" creates the editorial punctuation that defines the style. Use Instrument Serif italic or Playfair Display italic.

---

Mistake 5: Using Bounce or Spring Easing

**What people do:** Add bounce easing to the pull-up animation or spring physics to card entrances because "it feels lively."

**Why it fails:** Cinematic motion is patient and controlled — cubic-bezier easing, not bounce. Bounce feels playful and cheap; the opposite of cinematic. The pull-up animation should feel like film credits rolling — smooth, dramatic, unhurried. Bounce makes it feel like a web animation, not a film sequence.

**Fix:** Use `cubic-bezier(0.22, 1, 0.36, 1)` for all dramatic motion. This easing creates smooth deceleration — the element arrives at its position with confidence, not with a bounce. Keep durations between 800-1200ms for dramatic motion.

---

Mistake 6: No Scroll-Linked Character Reveals

**What people do:** Use simple fade-in for text blocks because "scroll-linked reveals are too complex."

**Why it fails:** The scroll-linked character opacity reveal is the signature scroll effect of the style. Without it, scrolling feels like navigating a web page, not watching a film. The character-by-character brightening creates the "moving light" effect that makes scrolling cinematic. Simple fade-in is generic; character reveal is specific.

**Fix:** Implement scroll-linked character opacity reveals for body text sections. Each character's opacity is tied to scroll position, brightening from 0.2 to 1.0 as it enters the reveal zone (center 40% of viewport). Use framer-motion's `useScroll` and `useTransform` hooks for implementation.

---

Mistake 7: Using Light or Cold Accents

**What people do:** Use a bright blue or white accent for the CTA because "it needs to pop."

**Why it fails:** The accent must stay within the warm palette. A bright blue CTA on a warm-dark page looks like a foreign element — it breaks the cinematic mood. The warm amber accent (#C4A882) pops through warmth, not through cold brightness. It glows like a candle, not like a neon sign.

**Fix:** Use `#C4A882` (warm amber) for the CTA accent. If more subtlety is needed, use `#DEDBC8` (cream) — the CTA stands out through weight and shape, not color. Never use blue, purple, or neon colors.

Reference Gallery

# Reference Gallery

## Live Sites

### Awwwards — Cinematic/Creative Studio Winners
- **What works:** Dark video backgrounds, warm cream text, noise overlays, serif italic accents, pull-up animations, scroll-linked reveals
- **Search:** Awwwards "cinematic" + "video" + "dark" filter, "creative studio" tag

### Filmmaker & Photographer Portfolios
- **What works:** Full viewport video sections, film grain textures, staggered text animations, intimate dark palettes
- **Search:** Top filmmaker portfolio sites, production house websites

### Creative Agency Sites
- **What works:** Dark moody aesthetics, warm text on black, dramatic typography animations, atmospheric video
- **Search:** Award-winning creative agency sites (Noomo, Active Theory, Resn)

## Key Visual References

### Video Background Treatment
- **Content:** Dark, ambient, slow-moving (clouds, smoke, water, light)
- **Exposure:** Underexposed — barely visible, mostly texture
- **Overlay:** Dark gradient (top and bottom) + noise overlay (opacity 0.7)
- **Loop:** Seamless, no visible jump

### Pull-Up Text Animation
- **Style:** Giant text rises from below (translateY 100% → 0)
- **Stagger:** Each line/word delayed by 80ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)` — smooth deceleration
- **Duration:** 1200ms per element

### Scroll-Linked Character Reveal
- **Effect:** Characters brighten (0.2 → 1.0) based on scroll position
- **Reveal zone:** Center 40% of viewport
- **Stagger:** 0.02 per character (subtle wave)
- **Implementation:** framer-motion useScroll + useTransform

### Serif Italic Accent
- **Font:** Instrument Serif italic or Playfair Display italic
- **Usage:** ONE phrase per headline, surgically placed
- **Example:** "I am Marcus Chen, *a self-taught director.*"

## Typography Reference
- **Almarai 400/700/800** at `clamp(2rem, 5vw, 4rem)` — giant display
- **Almarai 400** at 14-16px — body text
- **Instrument Serif italic** — accent phrases
- **Almarai 500** at 11-12px, tracking 0.15em, uppercase — micro labels

## Screenshot Notes

> When capturing references for this style, look for:
> - The quality of the video background (dark, ambient, slow)
> - The noise overlay visibility (film grain, opacity 0.5-0.7)
> - The warmth of the cream text (not white, not cold)
> - The pull-up animation timing (staggered, 80ms delay)
> - The scroll-linked character reveal (brightening wave)
> - The serif italic accent placement (one phrase per headline)
> - The generous spacing (full viewport sections)
> - The warm-dark palette (no cold blues or grays)

AI Prompts

EXACT REPLICA8662 charactersTested with: cursor, claude-code

> Copy this entire prompt and paste it into your AI coding assistant (Cursor, Claude Code, v0.dev, etc.) to generate a Dark Cinematic Studio landing page.

---

```
Build a dark cinematic studio landing page for "PRISMA" — a creative studio. Stack: React + Vite + TypeScript + Tailwind CSS v4 + framer-motion + lucide-react. Page title: `Prisma — Join the Lab`.

Vibe: A filmmaker's studio after midnight. Dark, moody, warm. Video backgrounds with film grain. Giant pull-up typography. Serif italic accents. Cinematic, intimate, creative.

---

## ANTI-SLOP CONSTRAINTS (hard bans)

- NO cold blue or gray text — use warm cream #DEDBC8
- NO pure white (#FFFFFF) text — use warm cream
- NO cold blue or purple accents — warm amber #C4A882 only
- NO light backgrounds — pure black #000000 only
- NO static image heroes — video backgrounds with noise overlay
- NO missing noise overlay — opacity 0.5-0.7 is mandatory
- NO sans-serif everything — serif italic accent phrases required
- NO centered hero layout — left-aligned on video
- NO bounce or spring easing — cubic-bezier(0.22, 1, 0.36, 1) only
- NO fast, aggressive motion — cinematic motion is patient
- NO bright, saturated colors — muted, warm, cinematic tones
- NO glassmorphic surfaces — dark, grainy, matte surfaces
- NO more than ONE accent color

---

## FONTS

Load via Google Fonts:
```
https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Instrument+Serif:ital@0;1&display=swap
```

Usage:
- **Almarai** (300/400/700/800): Logo "PRISMA", main headlines, body text, UI
- **Instrument Serif** (italic): Accent phrases within headlines — the one "creative" voice

CSS utilities:
- `.font-display { font-family: 'Almarai', sans-serif; }`
- `.font-body { font-family: 'Almarai', sans-serif; }`
- `.font-italic-accent { font-family: 'Instrument Serif', serif; font-style: italic; }`

---

## FLUID SIZE SYSTEM

```css
:root {
  --pad-x: clamp(1.5rem, 5vw, 4rem);
  --section-gap: clamp(4rem, 12vh, 10rem);
  --logo: clamp(1.1rem, 1vw, 1.4rem);
  --nav: clamp(0.7rem, 0.3vw + 0.5rem, 0.85rem);
  --headline: clamp(2rem, 5vw, 4rem);
  --subhead: clamp(1.33rem, 3.33vw, 2.67rem);
  --body: clamp(0.85rem, 0.3vw + 0.75rem, 1rem);
  --micro: clamp(0.65rem, 0.2vw + 0.55rem, 0.75rem);
  --btn-px: clamp(1.5rem, 2vw, 2rem);
  --btn-py: clamp(0.7rem, 0.8vh, 0.9rem);
}
```

---

## COLOR SYSTEM

```css
:root {
  --ground: #000000;          /* Pure black — the ONE style that uses it */
  --ground-elevated: #0A0A0A;
  --ground-panel: #101010;
  --text-primary: #DEDBC8;     /* Warm cream — NEVER white */
  --text-secondary: #E1E0CC;
  --text-muted: #8A8780;
  --accent: #C4A882;           /* Warm amber — ONE accent */
  --border: #1A1A1A;
}
```

Body: `bg-[#000000] text-[#DEDBC8] antialiased font-body`.
Selection: `selection:bg-[#C4A882] selection:text-[#000000]`.

Noise overlay (mandatory, global):
```css
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.7; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' /></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>");
}
```

---

## PAGE STRUCTURE

Root: `min-h-screen bg-[#000000] text-[#DEDBC8] font-body relative overflow-x-hidden`.

### 1. Header
Padding: `paddingInline: var(--pad-x)`, `paddingTop: clamp(1.2rem, 2vh, 2rem)`.
Flex space-between, items center. Transparent over video.

**Logo (left):** Almarai 800, tracking `0.15em`, size `var(--logo)`. Text: `PRISMA`. Uppercase. Color `#DEDBC8`.

**Nav (right):** Almarai 500, uppercase, tracking `0.15em`, size `var(--nav)`, gap `clamp(1.5rem, 3vw, 2.5rem)`.
Links: `WORK` | `STUDIO` | `PROCESS` | `CONTACT`
Hover: color → `#C4A882` (300ms).

### 2. Hero Section
`min-h-[100dvh]`, flex column, justify-center.
Padding: `paddingInline: var(--pad-x)`, `paddingBlock: var(--section-gap)`.

**Background:** Dark ambient video (clouds drifting, smoke, or light patterns), underexposed, muted, seamless loop.
**Video overlay:** Dark gradient (top 60% black, bottom 80% black) for text readability.

**Content (left-aligned, max-width 60%, z-10):**
1. Giant display text — Almarai 800, tracking `0.02em`, leading `0.95`, size `var(--headline)`:
   `Prisma`
   (Pull-up animation: translateY 100% → 0, 1200ms, cubic-bezier(0.22, 1, 0.36, 1), delay 300ms)
2. Subtext — Almarai 400, size `var(--body)`, color `#E1E0CC`, max-width 480px, line-height 1.7:
   `A creative studio for brands that want to feel something. We make films, sites, and experiences that linger.`
   (Scroll-linked character opacity reveal: 0.2 → 1.0 based on scroll position)
3. CTA — Circular button with arrow icon:
   - `bg-[#C4A882] text-[#000000]`, rounded-full, size 56px
   - lucide `ArrowUpRight` (size 24)
   - Hover: warm glow (box-shadow: 0 0 40px rgba(196, 168, 130, 0.4)) + slight scale (1.05)
   - Text label next to circle: Almarai 500, `var(--body)`, `#DEDBC8`, tracking 0.05em: `Join the lab`

### 3. About Section
`min-h-[100dvh]`, flex column, justify-center, items-center.
Padding: `var(--section-gap)` vertical, `var(--pad-x)` horizontal.

**Centered card:** `bg-[#101010]`, padding `clamp(2rem, 5vw, 4rem)`, max-width 640px, rounded-lg (8px).
**Mixed-style heading:** Almarai 700 + Instrument Serif italic, size `clamp(1.5rem, 3vw, 2.5rem)`, leading 1.3, color `#DEDBC8`:
`I am Marcus Chen, *a self-taught director.*`
(The phrase "a self-taught director" is in Instrument Serif italic)
**Body:** Almarai 400, `var(--body)`, `#E1E0CC`, line-height 1.7:
`I started Prisma in 2019 with a camera and a conviction: that brands deserve better than templates. Six years later, we're a studio of twelve, making work for clients who refuse to blend in.`

### 4. Features Section (4-column card grid)
`min-h-[100dvh]`, padding `var(--section-gap)` vertical, `var(--pad-x)` horizontal.
Background: noise overlay on black (no video).

**4 cards in a row, staggered entrance (scale 0.95→1 + opacity, 800ms, delay 400ms + i*100ms):**

Each card: `bg-[#101010]`, padding `1.5rem`, rounded-lg (8px), border `1px solid #1A1A1A`.

**Card 1 — Film**
- Almarai 700, `clamp(1rem, 2vw, 1.5rem)`: `Film`
- Almarai 400, `var(--body)`, `#E1E0CC`: `Brand films, documentaries, and shorts that move people to move.`

**Card 2 — Web**
- Title: `Web`
- Body: `Sites and experiences that feel like the future, not the template.`

**Card 3 — Identity**
- Title: `Identity`
- Body: `Brand systems built to last — logos, type, voice, and the spaces between.`

**Card 4 — Sound**
- Title: `Sound`
- Body: `Original scores and sound design that make your work feel as good as it looks.`

### 5. Footer
`paddingBlock: clamp(2rem, 5vh, 4rem)`, `paddingInline: var(--pad-x)`.
- Footer row: flex space-between, Almarai 400, size `var(--micro)`, color `#8A8780`:
  - Left: `PRISMA CREATIVE STUDIO`
  - Center: `© 2026`
  - Right: `JOIN THE LAB`

---

## VISUAL RULES

- Pure black ground (#000000), warm cream text (#DEDBC8), warm amber accent (#C4A882) on CTA only
- Video backgrounds: dark, ambient, slow, underexposed, muted, seamless loop
- Noise overlay: mandatory, opacity 0.7, mix-blend-mode: overlay, position: fixed
- Dark gradient overlay on video for text readability
- Serif italic accent (Instrument Serif) on at least one headline
- Pull-up text animation: staggered, cubic-bezier(0.22, 1, 0.36, 1), 1200ms
- Scroll-linked character opacity reveals (0.2 → 1.0)
- Card staggered entrance: scale+fade, 800ms, 100ms delay per card
- Full viewport sections (min-h-[100dvh])
- Generous spacing (cinematic breathing room)
- Honor `prefers-reduced-motion: reduce`

---

## ANIMATIONS

| Class | Keyframes | Duration | Easing | Delay |
|-------|-----------|----------|--------|-------|
| `anim-video-fade` | opacity 0→1 | 2000ms | `ease-out` | 0ms |
| `anim-pull-up` | translateY(100%)→0, opacity 0→1 | 1200ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 300ms + i*80ms |
| `anim-card-enter` | scale(0.95)→1, opacity 0→1 | 800ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 400ms + i*100ms |
| `anim-cta` | opacity 0→1, scale(0.9)→1 | 600ms | `ease-out` | 800ms |

Scroll-linked: framer-motion `useScroll` + `useTransform` for character opacity (0.2 → 1.0).

`prefers-reduced-motion: reduce` → video pauses, all motion collapses to 0.01ms, text at full opacity.

---

## ICONS

lucide-react: `ArrowUpRight` (CTA circle), `ArrowRight` (links).
Custom: noise overlay SVG, video background component.

---

Recreate this page faithfully with the exact colors, fonts, fluid clamps, copy, layout structure, and animation timings above.
```

This prompt recreates a specific design pixel-faithfully. Study it to understand the style at its purest.