Hub
24A — 36exp
Film Grain Aesthetic
Analog texture · Warm muted tones · Darkroom print

Combine film grain with muted tones to bring analog aesthetics into digital form. Specify "noise texture overlay" and "muted warm palette" in AI prompts to evoke the tactile warmth of a photographer's darkroom.

Contact Sheet — Grain Intensity by Film Stock
ISO 100
Fine Grain
Smooth tones, minimal texture. Studio daylight stock.
ISO 400
Classic Grain
The everyday film look. Balanced grain and sharpness.
ISO 1600
High Speed
Visible grain structure. Low-light and street photography.
ISO 3200
Push Process
Heavy grain, high contrast. Darkroom push-developed.
Exposure Guide — Grain × Tone Interaction
Deep Shadow
Zone I
Shadow
Zone III
Midtone
Zone V
Light
Zone VII
Highlight
Zone IX

Grain is most visible in midtones (Zone V) and gradually disappears in deep shadows and blown highlights. Use this to control visual texture density in your designs.

Film Canister Labels — Color Palette Tokens
--bg
Darkroom Black
#1a1714
--text
Matte Print White
#e8ddd0
--accent
Terracotta Warm
#e07a5f
--accent-2
Sage Selenium
#81b29a
--muted
Fixer Bath Grey
#a09484
“The grain is the soul of the photograph.”
On Analog Imperfection
GRAIN OVERLAY: feTurbulence 0.9 / 4 octaves 256px repeat · 0.035 opacity

AI Request Prompt

Design a landing page in Grain Texture style — analog film noise over earthy dark tones.

COLOR TOKENS:
--bg: #1a1714
--card-bg: rgba(38, 34, 28, 0.85)
--border: rgba(232, 221, 208, 0.12)
--text: #e8ddd0
--text-muted: #a09484
--accent-1: #e07a5f
--accent-2: #81b29a
No other colors.

TYPOGRAPHY:
Heading: "DM Serif Display" serif, regular weight, tracking -0.02em
Body: "DM Sans" sans-serif, 400 / 500 / 600 / 700 weight
Scale: 14 / 15 / 16 / 17 / 21 / 35 / 80px (clamp(2.2rem, 6vw, 5rem))
Body line-height: 1.8
Heading line-height: 1.05

UI:
- Cards: 1px solid var(--border), border-radius 24px (hero) / 14px (tiles), background var(--card-bg)
- 6px circular dot indicators before each tile (accent-1, accent-2, muted — 0.7 opacity)
- 60px horizontal divider line using accent-1 at 0.6 opacity
- Pill-shaped buttons: border-radius 999px, 1px solid accent-1, transparent background, hover rgba(224, 122, 95, 0.12)

LAYOUT:
- Container: min(1080px, 92vw) centered, padding 28px 0 80px
- Hero padding: clamp(24px, 5vw, 48px)
- Feature grid: repeat(auto-fit, minmax(220px, 1fr)), gap 12px
- Lead paragraph max-width: 680px

MOTION:
- Tile entrance: translateY(12px) to 0, opacity 0 to 1, 0.65s ease, stagger 0.1s per tile
- Button hover: all 0.25s ease
- Film grain: SVG feTurbulence overlay — fixed position, inset 0, opacity 0.035, pointer-events none, baseFrequency 0.9, numOctaves 4, background-size 256px repeat
- Ambient glow: two radial-gradients — rgba(224,122,95,0.12) at 20% 20% and rgba(129,178,154,0.1) at 75% 70%, both fading to transparent at 50%

RESPONSIVE:
- Below 768px: single column tiles, grain overlay opacity reduced to 0.02, hero padding 24px, title clamps down to 2.2rem
- Above 768px: auto-fit grid fills 2–4 columns, container stays at 92vw

FORBIDDEN:
- No saturated or neon colors
- No sharp corners below 14px border-radius on cards
- No box-shadow — depth only through color layering and opacity
- No heavy font weights on body text
- No images or icons — texture comes only from SVG noise filter

OUTPUT:
1. Single HTML file with inline CSS
2. Film grain overlay using SVG feTurbulence in body::after
3. Color token custom properties in :root
4. Hero section with DM Serif Display heading + DM Sans body
5. Feature tile grid with dot indicators and staggered entrance
6. Responsive layout using CSS clamp() and auto-fit grid