# Vintage Analog / Retro Film > Faded warm film colour, grain, polaroid frames, orange date stamps and cassette-label stripes — a UI that feels developed, not rendered. - Nickname: Film camera - Also called: Retro Film, Analog Nostalgia, Polaroid UI - Category: Retro & Nostalgia - Moods: Nostalgic, Friendly, Calm, Natural - Industries: Travel & Hospitality, Food & Restaurant, Creative & Portfolio, Media & Entertainment, E‑commerce - Style page: https://uilingo.dev/styles/vintage-analog-retro-film/ Vintage Analog borrows from the shoebox of old prints and tapes: a cream paper ground under a fixed film-grain overlay and soft vignette, warm faded colour (rust, mustard, teal, brown), photos and cards in white polaroid frames with a thick bottom margin, a little tape and a slight tilt. The orange LED date stamp and the VHS on-screen timestamp, a pixel mono, mark imagery; 70s tri-stripes on labels and rules recall cassette inlays. Headlines use a soft, slightly italic 70s serif. ## Best for - Travel journals, hostels and road-trip brands - Photo, film and music apps (cameras, playlists) - Cafés, vinyl stores and lifestyle commerce - Memory, scrapbook and wedding products ## Avoid for - Fintech and security products that must look current - Dense enterprise dashboards (grain + tilt cost legibility) - Medical or government services ## Do - Keep grain subtle: a fixed noise overlay at 12–20% opacity, multiply blend - Frame images as polaroids: 10–12px white border, 40px+ bottom - Tilt only decorative frames (±1–3°), never inputs or tables - Use the orange date stamp (#FF8A1F, VT323) for one meta line per image - Keep italics for Latin, numerals and prices; set Thai text elements upright with :lang(th) font-style: normal — font-synthesis alone does not stop Chrome fake-slanting Pridi ## Don't - Don’t animate the grain — one static overlay, never flickering noise - Don’t sepia-tone everything into one brown; keep teal and mustard as relief - Don’t swap the soft italic serif for a geometric sans — the 70s serif carries half the nostalgia ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Vintage Analog / Retro Film" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Faded warm film colour, grain, polaroid frames, orange date stamps and cassette-label stripes — a UI that feels developed, not rendered. Design keywords: film grain, polaroid frame, faded warm colour, orange date stamp, VHS timestamp, cassette label stripes, light leak, film strip sprockets, soft 70s serif. ## Visual language A UI that looks developed from film rather than rendered: warm cream paper (#F2E8D5) under a fixed film-grain overlay and a soft brown vignette, with an orange light leak bleeding in from the top-right corner. Colour is faded and earthy — rust, mustard, dusty teal, chocolate brown — never pure white or black. Imagery sits in white polaroid frames tilted a degree or two and held on with masking tape, stamped with an orange LED date in a pixel mono; labels and rules carry 70s cassette tri-stripes, and dark film-strip bands with sprocket holes frame the stats band, the showcase contact sheet and the dashboard sidebar (the web nav is a cream bar with a 9px tri-stripe under it, not a film strip). Headlines are a soft italic 70s serif; the mood is a calm, nostalgic shoebox of travel prints. ## Signature details (must be visible) - Fixed grain overlay over the whole page: body::after, inline SVG feTurbulence (baseFrequency .85), opacity .16 (inside the 12-20% range; .2 reads dusty), mix-blend-mode multiply, pointer-events none — static, never animated - Light leak + vignette fixed on .ui-bg, under the grain: light leak radial-gradient(60% 45% at 100% 0%, rgba(255,138,31,.35), transparent 70%); vignette radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(70,40,15,.28) 100%); both over the bg token - Polaroid frames on every image and the hero product shot: 12px solid #FFFCF4 border, 46px bottom border, 2px radius, rotate -2deg to +1.5deg, shadow --deco-polaroid-shadow: 0 14px 30px rgba(60,35,15,.22). Masking tape on top: --deco-tape: repeating-linear-gradient(90deg, rgba(240,226,190,.82) 0 6px, rgba(232,214,172,.82) 6px 12px), 96×28px, rotate -4deg. Decorative-only colours are not tokens and are declared as --deco-* custom properties: polaroid #FFFCF4, LED #FF8A1F, button lips #74290F/#8E6418, tri-stripe #D9A43A/#E2733F/#9A3A1A, plus the polaroid shadow and tape above - Orange LED date stamp in the bottom-right of each photo: VT323 1.35rem, #FF8A1F, text-shadow 0 0 3px rgba(255,120,20,.85); a stamp like `'87 8 17` (the apostrophe is part of the stamp: year, month, day), a different date on every print. The hero corners carry the same pixel mono as a VHS on-screen display: '▶ PLAY SP' and 'AUG.17 1987 12:04' in VT323 1.5rem, rust colour with a faint glow - 70s cassette tri-stripes (#D9A43A / #E2733F / #9A3A1A, equal bands) as a 9px band under the nav, above the footer and tab bar, on eyebrow labels, progress fills and dividers - Film-strip bands: #2B1E16 background with sprocket holes — 14px wide × 10px tall rounded rects (2px radius) in cream #F2E8D5, inset 8px from each edge, repeating every 32px (repeating-linear-gradient, an SVG data-URI tile or a mask) along both long edges — used for the stats section, the showcase contact sheet and the dashboard sidebar - Faded photo placeholder: layered gradients — teal sky to peach to burnt orange, a pale sun disc, two olive hill silhouettes, saturate(.85) - Display and h1 in Fraunces 600 italic, body in Work Sans / Sarabun. Italic only on runs that contain no Thai: KPI values, prices, stat numerals, step numbers and the Latin brand stay italic in both languages. Elements that hold Thai text (display, h1/h2, card titles, quotes, captions, tab labels) get font-style: normal under :lang(th), with a selector at least as specific as the italic rule and placed after it — the page is so :lang(th) matches every element, and font-synthesis: style none does NOT stop Chrome fake-slanting the Pridi fallback inside an italic Fraunces run. Wrap any Latin run inside a Thai heading in with font-style: italic to keep the Fraunces italic ## Design tokens — use these exact values Colours (light mode): - background #F2E8D5 - surface #FBF5EA - surface-2 #EADCC2 - text #2B1E16 - text-muted #67503F - primary #B0441D (text on it #FFF6E8) - secondary #D9A43A (text on it #2B1E16) - accent #2F6B67 - border #C9B391 - success #4C7838 · warning #A86F0F · danger #A5302A - chart series #B0441D, #D9A43A, #2F6B67, #8A5A7C, #7A6250 Radius: sm 2px, md 4px, lg 6px, xl 10px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(70,40,15,0.18)`, md `0 2px 4px rgba(70,40,15,0.12), 0 10px 22px rgba(70,40,15,0.16)`, lg `0 4px 8px rgba(70,40,15,0.14), 0 24px 48px rgba(70,40,15,0.22)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 380ms cubic-bezier(.3,.7,.2,1) ## Typography (Latin + Thai) - Headings: Fraunces 500/600 with Thai fallback Pridi 500/600 - Body: Work Sans 400/500/600 with Thai fallback Sarabun 400/500/600 - Mono: VT323 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;1,500;1,600&family=Work+Sans:wght@400;500;600&family=VT323:wght@400&family=Pridi:wght@500;600&family=Sarabun:wght@400;500;600&display=swap - CSS stacks: heading `"Fraunces", "Pridi", system-ui, sans-serif`; body `"Work Sans", "Sarabun", system-ui, sans-serif`; mono `"VT323", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Sarabun — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 5rem), heading weight 600, heading tracking -0.015em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Pridi’s soft, slab-ish serif has the same warm 70s print feel as Fraunces; looped Sarabun reads like old printed Thai beside the plain grotesque Work Sans. ## Components - Primary button: rust #B0441D, cream text, 4px radius, inset top highlight plus a solid 3px #74290F bottom lip; hover lightens slightly, active translates down 3px and the lip collapses into an inset shadow like a tape-deck key. Secondary button: cream surface, 1px brown-at-35% border, 3px #C9B391 bottom lip; accent button is mustard with a #8E6418 lip - Cards: matte paper #FBF5EA, 1px warm border, 2px radius, small warm shadow; hover lifts 3px and rotates -0.4deg. Feature/list icons are tiny polaroids: the faded photo gradient inside a 3px white ring and a 1px border - Inputs: cream with an inset 1px paper shadow; focus turns the border rust and adds a 3px mustard halo - Pricing cards are ticket stubs: a dashed perforation line 96px from the bottom and two 22px circles filled with var(--c-bg) plus inset 0 1px 2px rgba(60,35,15,.2), centred on the left and right card edges 86px from the bottom (left/right -12px). A slight colour mismatch against the vignette is acceptable; alternatively cut real notches with a radial-gradient mask instead of a filled disc - Eyebrow: a small cassette label — cream chip, 1px border, a 26×12px tri-stripe swatch before the uppercase tracked text - CTA: a cassette inlay — dark brown body with a 10px darker frame, a tri-stripe band across the top and 'SIDE A · C-60' in VT323 mustard - Dashboard: film-strip sidebar with cream text and a cream active item marked by a 4px orange inset bar; KPI cards topped with a 6px tri-stripe; deltas and table headers in VT323; italic serif KPI values - Mobile tab bar: cream bar with a 7px tri-stripe on top; active item rust with an italic serif label - FAQ: items separated by 1px #C9B391 rules; summary in the heading font 600 (italic only for Latin, upright Pridi for Thai); a VT323 '+' marker in rust #B0441D on the right that turns into '−' when open - Mono: VT323 has no Thai glyphs, so the mono stack is "VT323", ui-monospace, Menlo, "Sarabun", monospace — Thai inside stamps, deltas and table labels renders in Sarabun (drop tracking and set it ~0.8rem so it sits with the pixel numerals) ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → showcase → stats → testimonials → pricing → faq → cta. Feature section as alternating. Split hero: italic serif headline on the left, a stack of tilted polaroid prints taped on the right: the product shot plus two smaller KPI prints — polaroid frames (12px border, 30px bottom) that each hold a KPI card with a 6px tri-stripe on top, not photos, with the VHS OSD text in the top corners. Features alternate copy with large taped polaroid photos tilted in opposite directions, each with its own date stamp. Showcase: a contact sheet, a 3-up row of small polaroids on a dark film-strip band with sprocket holes, each with its own date stamp and a caption in the heading font (italic for Latin, upright Pridi for Thai, 1rem, text-muted). A dark film-strip band carries the stats; testimonials are taped scrapbook notes; pricing cards are ticket stubs; the CTA is a cassette inlay. Keep the grid calm and generous — the nostalgia comes from materials, not chaos. Dashboards keep a film-strip sidebar and paper cards with only the KPI stripe and LED numerals as flourish. ## Content Use realistic product copy (fictional brand) suited to: Travel journals, hostels and road-trip brands. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep grain subtle: a fixed noise overlay at 12–20% opacity, multiply blend - Frame images as polaroids: 10–12px white border, 40px+ bottom - Tilt only decorative frames (±1–3°), never inputs or tables - Use the orange date stamp (#FF8A1F, VT323) for one meta line per image - Keep italics for Latin, numerals and prices; set Thai text elements upright with :lang(th) font-style: normal — font-synthesis alone does not stop Chrome fake-slanting Pridi ## Don't - Don’t animate the grain — one static overlay, never flickering noise - Don’t sepia-tone everything into one brown; keep teal and mustard as relief - Don’t swap the soft italic serif for a geometric sans — the 70s serif carries half the nostalgia - Pure white (#FFF) or pure black backgrounds — everything is faded and warm - Neon glows, RGB splits or scanlines — that reads as glitch or vaporwave, not film - Glossy gradients, bevels or realistic leather/metal textures — that becomes skeuomorphism - Tilting inputs, tables or body text; only frames and decorative prints rotate - Grain above 25% opacity or behind small text where it hurts legibility - Flat two-ink halftone graphics — that is risograph, not photographic film ## Stack notes One self-contained HTML file with a