Grain-Noise Film Aesthetic

---
name: grain-noise-film
description: Apply the Grain-Noise Film Aesthetic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Grain-Noise Film Aesthetic, mentions film grain design, analog noise, 35mm aesthetic, or describes fixed SVG noise overlay, desaturated warm neutrals, subtle vignette — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Grain-Noise Film Aesthetic Design System

Analog film grain over a minimal base: desaturated warm neutrals, a burnt-sienna accent, clean grotesque type, airy layouts with full-bleed photography — all unified by a fixed feTurbulence noise overlay at 5% opacity and a subtle vignette, like a scanned 35mm print.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Grain-Noise Film Aesthetic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (film grain design, analog noise, 35mm aesthetic, grainy minimal, analog web), or describes its traits: fixed SVG noise overlay; desaturated warm neutrals; subtle vignette; clean grotesque type; full-bleed muted photography; EXIF-style mono captions.

## Design tokens

### Color palette

- Desaturated warm gray — faded print stock: `#e8e6e1` (--color-bg)
- Slightly lifted panels and image mats: `#efede8` (--color-surface)
- Soft charcoal ink, never pure black: `#26241f` (--color-text)
- Captions, dates, EXIF metadata: `#625e55` (--color-text-muted)
- Burnt sienna — links, markers, one warm highlight per view: `#9c4a26` (--color-accent)
- Hairline warm-gray rules and image frames: `#d4d1c9` (--color-border)

### Typography

- Display / headings: Chivo (fallback: Helvetica Neue, Arial, sans-serif) (ideal: PP Neue Montreal, premium — use Chivo as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.1, letter-spacing -0.01em
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 144 — Airy gallery pacing: photographs get room, text blocks stay short, and sections breathe like pages in a photo book.
- Border radius: none 0px, sm 4px, md 8px — Mostly square; 4–8px permitted on small UI (buttons, tags), never on photographs.
- Border treatment: 1px solid #d4d1c9 — Warm hairlines for image mats and section rules; occasionally a thicker paper-white mat around a photo like a print border.

### Shadows

- soft: `0 2px 12px rgba(38, 36, 31, 0.10)` — Subtle lift for images and cards — like a print resting on paper, not floating UI

### Layout

- Max content width: 1360px
- Full-bleed photographs alternating with narrow text columns (~560px)
- Fixed grain overlay div (pointer-events: none) above all content
- Images matted with paper-white borders or hairlines, captioned in mono
- Subtle radial-gradient vignette darkening viewport corners by 3–4%

### Effects

- Fixed feTurbulence SVG noise overlay at opacity 0.05 (fractalNoise, baseFrequency ~0.65)
- Radial-gradient vignette at 3–4% black over the viewport edges
- Slight desaturation and warm curve (filter: saturate(0.85) sepia(0.06)) on photography
- EXIF-style mono captions: KODAK PORTRA 400 · 35MM · F2.8

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 200ms / 400ms / 700ms
- Slow crossfades between images, like an editing table dissolve
- Content fades up gently on scroll entry — no slides or springs
- The grain layer itself stays static; animating it causes flicker and can trigger vestibular/photosensitive discomfort

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e8e6e1;
  --color-surface: #efede8;
  --color-text: #26241f;
  --color-text-muted: #625e55;
  --color-accent: #9c4a26;
  --color-border: #d4d1c9;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 2px 12px rgba(38, 36, 31, 0.10);
  --border-default: 1px solid #d4d1c9;
  --font-display: Chivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.4;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Chivo:wght@500;700&family=Inter:wght@400;500&family=Space+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Quiet 14px bar on the film-stock bg: name left, links right in muted charcoal warming to sienna on hover; hairline bottom rule appears on scroll
- **Hero:** A full-bleed desaturated photograph under the grain layer, 40–64px Chivo headline in charcoal on the paper margin below, mono EXIF caption line in muted
- **Card:** Photo card: image with paper-white mat and soft shadow, mono caption (frame number, film stock) below-left, title in 18px/500; hover deepens the shadow slightly
- **Button (primary):** Charcoal #26241f fill, film-stock-colored label, 4px radius; hover warms the fill toward sienna
- **Button (secondary):** 1px #d4d1c9 border, charcoal label, transparent fill; border darkens to charcoal on hover
- **Form fields:** Surface-toned input with 1px warm border, 4px radius; focus shifts the border to sienna — no glowing rings

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A viewport-fixed feTurbulence grain layer at ~5% opacity sitting over every surface, so the whole site — type, images, whitespace — feels printed on the same strip of film. Spend boldness here; keep everything else quiet.

## Do

- Apply one fixed grain layer over everything — per-element noise textures break the single-negative illusion
- Desaturate and warm all photography so it sits in the palette (saturate ~0.85, slight sepia)
- Use the mono face for camera-metadata flavor: film stocks, focal lengths, frame numbers, dates
- Keep the vignette and grain at whisper strength — 3–6% is atmosphere, 15% is Instagram 2012

## Don't

- Don't animate the noise (no flickering grain loops) — it reads as glitch, hurts performance, and is a motion-sensitivity risk
- No pure black, pure white, or saturated digital colors — everything stays slightly faded and warm
- Don't stack grain over long body text at more than ~5% opacity
- No heavy UI chrome, glassmorphism, or glossy gradients — the surface must feel like paper, not screens

## Accessibility notes

- Charcoal #26241f on film-stock #e8e6e1 passes AAA; muted #625e55 (~5.2:1) and sienna #9c4a26 (~4.9:1) both clear AA, but the grain overlay eats real contrast — keep it at or below 5–6% opacity over text and re-test with the overlay active
- The vignette must never darken areas containing text or controls beyond AA thresholds
- Static grain is essential: animated noise can trigger photosensitive and vestibular symptoms; if ever animated, gate it behind prefers-reduced-motion
- Mono EXIF captions are decorative flavor — pair essential info with standard accessible text

## Reference sites

- Lomography: https://www.lomography.com
- Ignant: https://www.ignant.com
- Cereal Magazine: https://readcereal.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip grain-noise-film.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/grain-noise-film.json

Settings → Capabilities → Skills → Upload skill → grain-noise-film.zip