# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Editorial serif or warm grotesque — feels set in metal, not rendered by software |
| **Examples** | Fraunces, GT Maru, STIX Two Text, Space Grotesk, DMs Serif Display |
| **Weight** | 400-600 (moderate — the texture is the personality, not the type) |
| **Tracking** | 0em-0.02em (loose, classic print tracking) |
| **Size** | `clamp(2rem, 4.5vw, 4.5rem)` — assertive, editorial |
| **Transform** | Sentence case, or title case at smaller sizes |

**Why serif or a warm grotesque:** The texture and analog warmth carry the emotion; the type should feel tangible. A serif (Fraunces, STIX) reads like letterpress or ink on uncoated stock; a warm grotesque (Space Grotesk) reads like a well-printed poster. Display type should feel like it was set in metal, not laid out in a design tool.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display, or a quiet humanist sans |
| **Examples** | Fraunces Regular, Source Serif Regular, Inter Regular |
| **Weight** | 400 |
| **Tracking** | 0.01em |
| **Size** | `clamp(0.875rem, 1vw, 1.0625rem)` — 14-17px |
| **Line Height** | 1.6-1.8 (generous, print-like leading) |
| **Color** | Not pure black — `--color-text-on-light: rgba(74, 70, 67, 0.92)` |

**Why slightly larger + reduced contrast:** Printed text on uncoated paper is usually a touch larger and less stark than screen text. The 92% ink opacity keeps body copy from glaring against the muted ground — it sits under the grain rather than above it.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, regular weight, wide tracking |
| **Examples** | Fraunces Light, Space Grotesk Light, Inter Light |
| **Weight** | 300-400 |
| **Tracking** | 0.1em-0.2em — reads like a stamped or typeset inscription |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, image captions, editions metadata. These function as printer's marks — "PLATE 27", "ISSUE 08", "STONE 400 GSM" — not as screen annotations.

---

## Type Scale

```
Display:  clamp(2rem, 4.5vw, 4.5rem)       — assertive, editorial
Body:     clamp(0.875rem, 1vw, 1.0625rem)  — 14-17px, ink at 92%
Micro:    10-12px                          — editorial captions
```

The scale is moderate — 10px to 72px. The emphasis comes from texture and muted color, not dramatic type-size jumps. Let the grain do the heavy lifting.

---

## Font Pairing Logic

**Two-family system:** a serif display family (Fraunces) paired with a muted grotesque for body and micro (Inter, Space Grotesk). The serif provides print warmth; the quiet sans keeps the pairing grounded. Both families render at reduced contrast to sit beneath the film grain overlay.

**Never:** Monospace for long body copy (terminal, not analog), pure black renders that fight the reduced-contrast rule, thin ultra-lightweights that disappear behind the grain, or decorative slab/serifs that read as retro pastiche rather than honest print.

---

## Reduced Motion & Ink Legibility

Grain adds noise to thin strokes. At display sizes the overlay barely matters, but body copy below 16px should sit under a lighter grain intensity (opacity 0.03) so the ink and the texture don't compete. If a page's grain reads stronger than its type, reduce the overlay before enlarging the type.

# Color Architecture

## Ground

The ground is warm and tactile — like uncoated, lightly aged paper. The palette is muted and desaturated so the grain can actually be seen, and so the screen surface reads as a physical sheet rather than a glowing panel.

```css
--color-ground-dark: #171512;     /* Warm near-black — like graphite rubbed on linen */
--color-ground-light: #EAE4DA;    /* Warm off-white — uncoated paper, stone */
```

**Why tinted warm:** Both ends carry a warm cast (never pure #000000 or #FFFFFF). Pure neutrals read clinical; warm tints read printed. The ground should feel like it absorbed ink, not like it emits light.

---

## Warm Neutral Base

```css
--neutral-stone: #D6CEC1;     /* Stone — dry, chalky */
--neutral-sand: #CBB79D;      /* Sand — warm, sun-baked */
--neutral-clay: #B08968;      /* Clay — terracotta, grounded */
--neutral-slate: #8A8580;     /* Slate — cool, mineral contrast */
--neutral-graphite: #4A4643;  /* Graphite — deep, carries ink */
```

**These are the base colors.** The palette stays within a tight warm band — stone, sand, clay — with one cooler counterpoint (slate) so the warmth never flattens. Everything is muted toward gray; nothing flies up from the page.

---

## Muted Accents

```css
--accent-rust: #9C5A3C;       /* Rust — burnt, faded by light */
--accent-olive: #6B7052;       /* Olive — dusty, botanical */
--accent-mustard: #C9A227;     /* Mustard — faded print yellow */
--accent-ink: #3B3632;         /* Ink — soft black-brown for strong type */
```

**Usage:** Accents appear at mid saturation — strong enough to read as part of the palette, muted enough to sit under the grain. They behave like ink colors on paper (rust, olive, mustard) rather than like screen colors. The grain should be visible across them.

**Rule:** No accent may be pushed to pure saturation. If a color survives as a bright neon spot, it breaks the tactile illusion — grain only reads against muted fields.

---

## Text

```css
--color-text-on-dark: rgba(234, 228, 218, 0.88);  /* Warm off-white, slightly translucent */
--color-text-on-light: rgba(74, 70, 67, 0.92);    /* Soft ink, not pure black */
--color-text-muted: rgba(74, 70, 67, 0.55);      /* Muted, for labels and metadata */
--color-text-link: rgba(107, 112, 82, 0.9);      /* Olive link — print-like */
```

**Text is slightly reduced contrast by design.** Body copy is ~92% opaque ink rather than pure black; headings sit in the same range. The 8-12% drop keeps the contrast feeling physical, matching the Anti-Slop checklist (no pure black, warm reduced contrast).

---

## Ink / Gradient Usage

```css
--ink-gradient: linear-gradient(105deg, #3B3B38 0%, #5A5650 55%, #3B3B38 100%);
```

**No polished white-to-black UI gradients.** If a gradient is needed, it runs across warm neutral ink tones — like the sheen of ink on paper — never a modern blue-to-purple or a glossy specular blend.

---

## Color Don'ts

| Don't | Do Instead |
|-------|-----------|
| Neon or saturated colors | Muted warm accent colors (rust, olive, mustard) |
| Pure black / pure white | Warm tinted neutrals (stone, sand, clay, slate) |
| Glossy, screen-like gradients | Ink-tone gradients, flat muted fills |
| Corporate cool palettes | Warm printed stock — uncoated paper warmth |
| High-contrast pure black text | Soft ink at 92% opacity |
| Color that hides the grain | Color light enough over the overlay to show it |

# Motion Principles

## Philosophy

Motion in Grain/Noise Texture is **analog and gentle**. Nothing slides mechanically, nothing snaps, nothing bounces with digital spring physics. Elements behave like physical media — film frames shimmer, paper barely settles, ink dries in place. The motion should feel like the surface is alive at 24 frames per second, not like a UI library running a default easing.

The center of gravity is low: the film-grain jitter is always running, and everything else fades in and out slowly around it.

---

## Film Grain Shimmer (The Signature)

```css
@keyframes grain-jitter {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, 1%); }
  30% { transform: translate(1%, -2%); }
  50% { transform: translate(-1%, 2%); }
  70% { transform: translate(2%, 1%); }
  90% { transform: translate(-2%, -1%); }
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;                    /* 0.03–0.08 — see index.mdx Texture */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */
  animation: grain-jitter 0.16s steps(2) infinite; /* 24fps-style jitter */
}
```

**Purpose:** The grain itself is the design layer. It must move the way projected film grain does — a fast, imperfect, frame-edge jitter, not a smooth CSS translate. Use `steps()` so the displacement happens in discrete 24fps-style hops, never a linear glide.

**Intensity guidance (index.mdx):** opacity between 0.03 and 0.08. The overlay is `position: fixed`, full viewport, `pointer-events: none`. When the page is mostly still, keep the jitter at the low end; when a hero wants more film feel, raise toward 0.08.

---

## Gentle Shimmer / Flicker

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Photographic blocks | Very slight opacity breathing (1.00 → 0.97) | 4-6s | `ease-in-out`, infinite |
| Display-text glow | Slight brightness lift in the ink | 3-5s | `ease-in-out`, infinite |
| UI tint overlays | Micro-offset (1-2px) alongside the grain jitter | 4-8s | `steps(2)` |

**The flicker should read as film-age artifacts, not as loading skeleton.** If a visitor does not consciously notice the shimmer but sees the whole page feel "alive," the effect is calibrated right. Nothing should be sharper than the grain. (Banned: clean, linear luminance sweeps.)

---

## Slow Fades (Not Slides)

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Sections | Opacity 0 → 1 | 1200-2000ms | `ease-in-out` | 0ms |
| Imagery on scroll | Crossfade between textures | 1500ms | `ease-out` | — |
| Embedded frames | Fade in with a shadow "film flash" | 1400ms | `ease-in-out` | 150ms |

**Key:** The page should fade in and out like slides in a projector — never slide horizontally, never stack with a spinner. Fades are slower than the AI-Surreal baseline (1000ms+ here too), and always use `ease-in-out`.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Links | Underline grows with a print-style ink fade (300ms) | — |
| Buttons | The grain across the button intensifies 1.05× (400ms) | Slight press — 1px translateY |
| Imagery | Grain jitter speed up slightly (like a reel braking) | pause the flicker |

**All state changes are slow (300ms+).** Even hover stays analog: a thickish ink underline drawing on, a grain field tightening. Nothing should pop, glow, or bloom at 120ms, and no box-shadow on state changes — shadows are synthetic here.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Film-grain jitter: frozen to a still overlay (same opacity, no transform)
- Shimmer/flicker: disabled
- Slow fades: instant opacity
- Scroll-linked fades: disabled

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

**The grain overlay stays visible** (it's texture, part of the design) but stops moving — accessibility over ambience.

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Spring / bounce physics | Physics libraries feel digital — this style is analog |
| Parallax scrolling    | Scroll-linked drift fights the "static sheet" feel |
| Horizontal slides | Has nothing to do with film/projector fades |
| Auto-playing carousels | User controls pace through scroll |
| Morphing borders | Organic morph belongs to other styles — here surfaces are paper-flat |
| Fast snaps (<300ms) | Grain-led sites are patient, not punchy |
| Glossy shine sweeps   | A glossy sheen contradicts tactile, matte surfaces |

# Layout Grammar

## Grid System

**Deliberately simple.** The texture is the design — the layout stays out of its way. A restrained, spacious, editorial grid that lets grain, paper tooth, and muted color do the work. Internally:

- Max content width: 1100px, centered, with generous margins
- Section grid: 12-column structure under the surface, but visually calm and regular
- Whitespace: generous — `clamp(6rem, 14vh, 12rem)` between sections
- Texture overlay: fixed, full-viewport, `pointer-events: none`, above everything

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Muted, desaturated warm surface (stone/sand) with film grain overlay |
| Text position | Centered, vertical rhythm — calm and grounded |
| Headline size | `clamp(2rem, 4vw, 4.5rem)` — substantial, editorial |
| Text contrast | Reduced — ink on muted stock, not pure black on white |

```
┌─────────────────────────────────────────┐
│  (film grain overlay — fixed, subtle)   │
│                                         │
│                                         │
│           WARM PRODUCTS                 │
│   Printed-on-paper, analog, tactile     │
│   [ENTER — like turning a page]         │
│                                         │
└─────────────────────────────────────────┘
```

**The texture is the hero.** Headline may sit center-stage, but the grain, paper tooth, and muted palette carry the visual identity.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 14vh, 12rem);
--content-max-width: 1100px;
--edge-margin: clamp(1.5rem, 4vw, 4rem);
```

**Spacing is generous and unhurried.** Whitespace is not empty — it is unprinted paper. Sections feel like printed spreads on uncoated stock. Pacing is slow, editorial, tactile.

---

## Layout Patterns

### Pattern 1: Full-Bleed Texture + Centered/Offset Text
```
┌─────────────────────────────────────────┐
│  [Paper/ink surface, grain overlay]     │
│                                         │
│        Headline (ink on stock)          │
│        Body text (muted)               │
│                                         │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Surface + Text
```
┌──────────────────┬──────────────────────┐
│                  │                      │
│  [Halftone,      │  Label               │
│   paper fiber,   │  Headline            │
│   misregister]   │  Body text           │
│                  │  (muted ink)         │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Texture Sequence (Tactile Blocks)
```
┌─────────────────────────────────────────┐
│  [Grain overlay] — subtle, consistent   │
├─────────────────────────────────────────┤
│  [Paper texture block] — deeper grain   │
├─────────────────────────────────────────┤
│  [Risograph misregistration panel]      │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Max-width single column, generous whitespace, fixed subtle grain overlay |
| **Tablet (768px)** | Reduced margin, texture overlay preserved, text blocks widen to full content |
| **Mobile (375px)** | Single column, gutters tighten, grain overlay at reduced opacity to preserve legibility |

**On mobile:** Texture stays but transparency drops — never allow grain or paper to muddy small text. The tactile feel is maintained through surface color and subtle overlays, not through noise density.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Cluttered, dense layouts | Generous whitespace — grain needs room to breathe |
| Heavy borders and boxes | Thin rules, hairlines, open composition |
| High-contrast full-black sections | Muted ink on warm neutral stock |
| Aggressive visual hierarchy | Calm, editorial hierarchy — the texture is the drama |
| Overwhelming texture everywhere | Texture accents — grain, paper, halftone used selectively |
| Sharp machine-precise edges everywhere | Gently imperfect edges — misregistration, soft tooth |
| Texture on text backgrounds at full strength | Texture behind UI, light/none behind body copy |

# Texture & Surface

## Primary Texture: Film Grain Overlay

The grain IS the design. Per index.mdx, the texture layer is a full-viewport overlay that never leaves the page:

| Property | Specification |
|----------|--------------|
| **Technique** | SVG noise via `feTurbulence` (baseFrequency ~0.9-1.1, fractalNoise) |
| **Placement** | `position: fixed; inset: 0; pointer-events: none; z-index` above content |
| **Opacity** | 0.03-0.08 (index.mdx Texture) — enough to feel, not enough to disturb |
| **Blend** | `mix-blend-mode: overlay` or soft-light over the muted palette |
| **Motion** | 24fps-style jitter via `steps(2)` — see motion.mdx |

**The goal:** The screen surface must read as physical — uncoated paper, projected film, or a litho print. The grain layer is the equivalent of the paper tooth in print; it is never optional and never decorative-only.

```css
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

---

## Paper & Analog Textures

| Texture | Application | Parameters |
|---------|-------------|-----------|
| **Paper fiber** | Page backgrounds, section backdrops | Subtle repeat, opacity 0.03-0.05, warm tint |
| **Halftone dots** | Image areas, featured panels | Screen 8-12% dot, varying radius with darkness |
| **Risograph misregistration** | Multicolor accents, overlapping type | Offset 1-2px misaligned color plates (cyan/magenta/olive) |
| **Scan artifacts** | Full-bleed imagery | Slight horizontal banding, sensor noise, 1-2px chroma shift at edges |
| **Chromatic aberration** | Display type accents, hero imagery | 1-2px RGB channel offset on edges only |

**Misregistration is a feature, not a bug.** Two-color overlaps should visibly misregister by 1-2px, exactly like an imperfect risograph run. That imperfection is what makes the palette feel printed. The Banned list in index.mdx (clinical perfection, sharp digital edges, glossy surfaces) is the inverse of every row in this table.

---

## SVG Noise Filters (feTurbulence)

```css
.svg-noise {
  filter: url(#grain-noise);
}
/* Definition placed in the SVG defs block:
   feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4"
   feColorMatrix type="saturate" values="0"  (desaturate the noise) */
```

**Usage:** feTurbulence powers both the full-page overlay and per-element noise (buttons, cards, image masks). Keep the noise desaturated and coarse — fine, colorful noise reads digital; coarse neutral noise reads film.

---

## Image Processing

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Grain** | Film texture over imagery | Overlay blend, opacity 0.04-0.07 |
| **Slight blur** | Softens digital sharpness | 0.3-0.5px Gaussian on edges |
| **Muted grade** | Print-like color | Saturation 75-90%, lifted blacks (not pure black) |
| **Paper tooth** | Bokeh-free matte finish | Noise-based texture under images |
| **Chromatics** | Analog lens feel | 1-2px chromatic aberration at edges |

**The goal:** Imagery should look scanned or projected, not photographed by a phone and uploaded. If a viewer could tell the image was captured this decade with a retina display, the treatment is too clean.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Page background | Paper fiber texture over the warm neutral ground |
| Grain overlay | Full-viewport, fixed, pointer-events none, 0.03-0.08 opacity |
| Cards / panels | Flat paper surfaces — hairline printed borders, no drop shadows |
| Buttons | Ink-filled flat, or two-tone misregistered; grain intensifies on hover |
| Navigation | Sticky bar with paper backdrop and hairline bottom rule |
| Dividers | Hairlines, not gradients — like print rules |
| Imagery | Grain overlaid, slightly blurred, muted, chromatic-edged |

**No glossy, no glass, no depth-heavy shadows.** Shadows are synthetic here; the analog surface reads flat with texture, like uncoated stock. If a shadow is unavoidable, keep it a tight 2-4px warm gray at low opacity — never a diffuse 20px glow.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|-----------|
| Clinical flat surfaces | Paper fiber, halftone, uncoated stock |
| Clean digital gradients | Ink-toned flat fills and hairlines |
| Neon glow effects | Muted ink accents with grain on top |
| Pure white backgrounds | Warm uncoated off-white (stone/sand) |
| Sharp pixel-perfect borders | Slight misregistration, halftone edges |
| Hidden artifacts | Featured scan lines, film jitter, chromatic edges |
| Glossy reflections | Matte, tactile, print-like surfaces |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `film grain` | The base surface — analog imperfection reintroduced to digital design |
| `noise overlay` | Fixed, full-viewport texture layer — `pointer-events: none`, opacity 0.03-0.08 |
| `paper texture` | The screen reads as a physical surface, not a display |
| `analog` | Human imperfection — misregistration, jitter, tooth |
| `tactile warmth` | The core mood — warmth that digital cleanliness destroys |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `feTurbulence` | SVG noise filter — procedural grain without image assets |
| `dithering` | Scattered pixel noise that softens banding in muted gradients |
| `chromatic aberration` | Slight RGB channel offset at edges — analog lens imperfection |
| `halftone dots` | Print-process dots as texture — risograph and newsprint feel |
| `risograph misregistration` | Off-register color plates — layered, slightly imperfect ink |
| `paper tooth` | Visible fiber texture of uncoated stock |
| `film jitter` | Subtle 24fps positional shimmer — grain animates like projected film |
| `grain shimmer` | Barely perceptible noise animation — gentle, never distracting |
| `reduced text contrast` | Text isn't pure black on white — softened like printed ink |

---

## Context Terms

| Term | Mood |
|------|------|
| `printed on uncoated stock` | Muted colors that feel absorbed, not glowing |
| `artisan` | Handmade, human, small-batch warmth |
| `editorial` | Serif-led, magazine-like composition |
| `grotesque` | Warm modern sans — pairs with grain without fighting it |
| `warm neutrals` | Stone, sand, clay — grounded, earthy |
| `cool mineral tones` | Slate, graphite, chalk — quiet, grounded alternative |
| `24fps jitter` | The grain moves like film — 24 frames, not 60fps smoothness |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `clinical perfection` | The enemy — this style deliberately reintroduces imperfection |
| `neon colors` | Saturation destroys the printed-on-stock feel |
| `sharp digital edges` | Edges should feel pressed, not cut |
| `glossy surfaces` | Gloss is the opposite of uncoated paper warmth |
| `pure black on white` | Text contrast must be reduced — nothing is fully black or white |
| `smooth gradients` | Banding is fine — dither it, don't hide it |
| `glassmorphism` | Frosted glass is digital — this style is physical |
| `snappy motion` | Motion is gentle, slow, film-like |

---

## Prompt-Ready Phrases

```
"fixed film grain overlay at 0.03-0.08 opacity (pointer-events: none)"
"SVG feTurbulence noise filter as the primary surface"
"muted desaturated palette — warm neutrals: stone, sand, clay"
"reduced text contrast — no pure black on white"
"grain shimmer — 24fps jitter, barely perceptible, infinite"
"paper fiber and halftone dot textures"
"risograph misregistration — layered, slightly imperfect ink"
"chromatic aberration at edges — subtle analog lens imperfection"
"serif (editorial) or grotesque (modern) type, softened contrast"
"generous whitespace — texture IS the design, layout stays simple"
"slow fades only — 1000ms+, ease-out, no snappy motion"
"no neon, no glossy surfaces, no sharp digital perfection"
```

---

## Style Axis

```
color: 3   typography: 3   motion: 2   density: 2   texture: 6   layout: 2
```

Texture carries the style (6/6). Color, typography, motion, density, and layout are restrained — the grain IS the design.

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Artisan/DTC brands** | Craft-made products feel honest on surfaces with paper tooth and film grain — imperfection signals human hands |
| **Film & photography studios** | The aesthetic literally embodies the medium — analog grain, shutter jitter, uncoated stock |
| **Craft food & beverage** | Roasteries, distilleries, natural-wine and small-batch labels read as small-batch on textured surfaces |
| **Lifestyle/wellness** | Muted warm neutrals and gentle motion feel calm, grounded, and tactile against clinical competitor design |
| **Independent publishers** | Editorial serifs on grainy paper feel like printed periodicals, not web templates |
| **Boutique hotels & hospitality** | A physical-room warmth carried into digital — stone, sand, and clay rooms become muted palettes |
| **Heritage & analog-feel products** | Instruments, journals, film cameras, ceramics — anything where material and touch are the product |

## Brand Personality Match

This style reinforces brands that are:
- **Tactile** — they care about physical material, touch, and surface
- **Warm** — approachable and human, not sterile or clinical
- **Analog** — comfortable with imperfection, jitter, and misregistration
- **Craft-led** — the making is part of the message
- **Quietly confident** — muted, understated, no need for neon

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **High-volume e-commerce** | The texture-forward, generous-whitespace layout can't carry dense product grids or metrics |
| **Fintech / banking** | Grain and analog noise undermine precision and trust in numbers |
| **SaaS dashboards & analytics** | Data-dense UIs fight the layout — the style is simple, not complex |
| **Tech startups needing "fast" energy** | Gentle 24fps jitter and slow fades feel slow to teams selling speed |
| **Mobile-first utility apps** | Heavy grain overlays blur small type and reduce legibility on small screens |
| **Any brand needing clinical polish** | The banned vocabulary is exactly this style's DNA — no glossy surfaces, no sharp perfection |
| **Content-heavy reference sites** | Long-form docs need clean density; this style is texture-forward and minimal by design |

## How to Decide

Ask: **"Does my brand want to feel like a physical object — printed, warm, tactile, and human rather than digital?"**

If yes → Grain/Noise Texture / Analog Warmth.
If no → Consider Quiet Editorial (if you want restraint without the grain), Organic Botanical Warmth (if you want warm and tactile through nature instead of analog), or Editorial Serif Narrative (if you want editorial type as the hero without texture-forward surfaces).

# Reference Gallery

## Live Sites

### Grain/Noise Texture Reference Implementation
- **What works:** SVG feTurbulence noise overlay, film-grain-to-paper-surface feel, muted desaturated palette, reduced-contrast serif/grotesque type, generous whitespace
- **URL:** Reference implementation — the canonical example of this style

### Leica (leica-camera.com)
- **What works:** Heritage photography brand, film-noir restraint, muted dark neutrals, editorial type set on quiet surfaces
- **URL:** leica-camera.com

### A24 (a24films.com)
- **What works:** Film grain and analog warmth across campaigns, desaturated cinematic stills, understated serif typography, texture over gloss
- **URL:** a24films.com

### Polaroid (polaroid.com)
- **What works:** Instant-film analog identity, warm imperfect color, grain-forward surfaces, heritage product legacy
- **URL:** polaroid.com

### Film Photography Studios & Labs
- **What works:** Simulated darkroom detail, 35mm grain and halftone, uncoated-stock imitation, matte over glossy
- **URL:** awwwards.com (search "film grain", "photography studio", or "analog" trends)

## Key Visual References

### Texture References
- **Film grain overlays** — fixed, pointer-events:none, opacity 0.03-0.08, never heavy enough to fight text
- **Paper fiber & tooth** — uncoated-stock feel, faint fiber direction, matte not gloss
- **Halftone dots** — risograph misregistration, slight color shift between passes
- **SVG noise** — feTurbulence filters generating the primary surface

### Color References
- **Warm neutrals** — stone #C9C2B4, sand #D9D2C4, clay #B7A99A as the base field
- **Cool mineral tones** — slate #8B9099, graphite #4A4E55, chalk #E3E1DC for contrast sections
- **Reduced-contrast ink** — text is warm off-black/tinted, never pure black on white
- **No neon** — saturation stays muted; accents are low, earthy, desaturated

### Typography References
- **Editorial serif** — high-contrast serif faces for display, read like printed periodicals
- **Warm sans/grotesque** — for modern brands, slightly humanist, not clinical geometric
- **Reduced contrast on text** — ink not pure black, so surfaces feel printed
- **Generous leading** — whitespace lets the grain breathe instead of clutter it

### Motion References
- **Grain jitter** — 24fps subtle: barely perceptible so it never distracts
- **Chromatic shimmer** — occasional noise-seeking offset, slow
- **Slow fades** — 800-1200ms ease-in-out entrances, no snappy eases
- **No bold motion** — the brand's ban on "sharp digital edges" extends to sharp motion

## Screenshot Notes

> When capturing references for this style, look for:
> - The texture (must be film grain / paper / analog surface, not flat digital color)
> - The color palette (must be muted, desaturated — warm or mineral, never neon)
> - The motion (must be gentle, jitter and slow fades — not snappy or bold)
> - The typography (must sit on the texture at reduced contrast, serif or warm sans)
> - The surfaces (must be matte / uncoated — never glossy or clinical)
> - The whitespace (must be generous — texture IS the design element)
> - The overall mood (must feel tactile, warm, analog, human — not perfect)