Design Aesthetic Reference
Texture-Forward Analog Authenticity
A design language that celebrates the raw, tactile qualities of analog media — film grain, noise overlays, rough surfaces, and the beautiful imperfections of physical production. Every surface carries evidence of time, touch, and physical reality.
Typography
imperfect letterforms, industrial mono, warm editorial weight
Display / DM Serif Display
Raw Surface
Heading / Libre Baskerville
Warm Editorial Serifs
Editorial / Playfair Display
Analog Warmth
Body / Source Serif 4
Readable serif text for long-form content against textured backgrounds. The grain enhances rather than overwhelms the reading experience.
Mono / Space Mono
EXPOSURE: ISO 3200 // GRAIN: COARSE // FILM: EXPIRED TRI-X
UI / Inter
Navigation & Interface Labels
DM Serif Display + Source Serif 4
Darkroom print: elegant display with sturdy body text
Inter 700 + Space Mono
Industrial manual: technical, precise, factory documentation
Libre Baskerville + IBM Plex Mono
Analog terminal: warm headings with mechanical body text
Color Palette
wet concrete, oxidized metal, photographic sepia, slate stone
Components
every surface carries evidence of physical material
Persistent, fine-grained noise covering backgrounds and images, simulating the silver halide crystals of analog film at ISO 800-3200.
Concrete, stone, uncoated paper, raw canvas, and weathered wood serve as visual references for background treatments and container surfaces.
Dense fields of tiny dots and irregular marks that create visual density and tactile suggestion without specific imagery.
Gradual darkening at edges draws focus inward and references lens optics and analog printing falloff from the darkroom process.
Cards and surfaces use grain intensity and shadow to communicate elevation. Rougher, noisier surfaces feel closer to the viewer.
Light leaks, halation, depth-of-field blur, and expired film artifacts recall darkroom printing and chemical development.
Visual Effects
all SVG noise, blend modes, and analog techniques — no image assets
SVG feTurbulence fractalNoise at high frequency with animated drift for organic movement.
Smooth color transition with visible dithering noise for analog color blending.
Clay-to-rust gradient with layered noise simulating aged photographic toning.
Dual-layer radial gradient dots at offset positions for ink-stipple illustration texture.
Radial gradient darkening from center to edges simulating analog lens optical falloff.
Storm gray to slate blue gradient with gritty noise for cold, atmospheric surfaces.
Interactive Elements
solid, grounded, with grain texture on every surface
Grain is not decorative afterthought but structural foundation — it is the first thing applied and the last thing seen. Every surface carries the beautiful imperfections of physical production.— The Grain and Grit Manifesto
warmth, authenticity, resistance to digital homogeneity
The Grain and Grit aesthetic applies film grain first, then composes. Muted ochres, slates, and warm grays reinforce material honesty. Every rough edge is a deliberate design choice — chaos controlled, never accidental.
Back to the Surface