Back to Hub
Design Sample / Grain Texture Go to Hub

Film Grain
Aesthetic

Combine film grain with muted tones to bring analog aesthetics into digital form. In AI prompts, specify "noise texture overlay", "muted warm palette", "editorial serif typography" to achieve results that are both vintage and modern.

Generate grain overlay with SVG feTurbulence
Lower saturation and maintain warm neutral tones
Create tension with serif + sans-serif contrast
Use terracotta/sage accent colors

AI Request Prompt

Design a web landing page with film grain texture aesthetics.

Style conditions:
- Background: Dark brown (#1a1714) base, SVG feTurbulence grain overlay
- Place 1-2 subtle ambient lights (radial-gradient)
- Colors: Terracotta #e07a5f, sage #81b29a, muted beige #a09484
- Typography: Titles in serif (DM Serif Display), body in sans-serif (DM Sans)
- UI: Low-contrast borders, rounded cards, generous whitespace
- Accent: Small circular indicators for visual rhythm
- Motion: Minimal sequential entrance animations

Responsive:
- Mobile (~768px): Single column, grain overlay opacity reduced, serif titles scaled down
- Desktop: max-width 1000px, 2-column feature cards with generous gap

Restrictions:
- No saturated or neon colors — earthy muted palette only
- No sharp corners — minimum 12px border-radius
- No heavy box-shadows — depth through color layering, not elevation

Output:
1) Grain overlay CSS code (SVG feTurbulence)
2) Color tokens and typography system
3) Hero/Feature/CTA section HTML/CSS with responsive support