Vintage Analog / Retro Film

Also called: Retro Film, Analog Nostalgia, Polaroid UI

Faded warm film colour, grain, polaroid frames, orange date stamps and cassette-label stripes — a UI that feels developed, not rendered.

“Film camera”Retro & NostalgiaEra: 1970s–90s film & home video, revived 2020sNostalgicFriendlyCalmNatural

Open full screen ↗

vintage-analog-retro-film / landingEN

vintage-analog-retro-film / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg6pxRadius xl10pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

film grainpolaroid framefaded warm colourorange date stampVHS timestampcassette label stripeslight leakfilm strip sprocketssoft 70s serif

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

Not to be confused with

Skeuomorphism →Skeuomorphism renders glossy, realistic hardware; Vintage Analog keeps flat UI and only borrows the faded photo, grain and paper of old prints.Risograph Print →Risograph is two flat fluoro inks with halftone and misregistration; Vintage Analog is full faded colour photography with polaroid frames and a date stamp.Vaporwave →Vaporwave is neon pink/cyan digital nostalgia with grid floors; Vintage Analog is warm, earthy and photographic with no neon.

On mobile

Keep the grain as one static overlay (no animated noise), frame the featured card and onboarding art as polaroids with a date stamp, and keep lists flat and untilted so touch targets stay precise.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinFraunces · 500/600

The quick brown fox

Heading · ThaiPridi · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinWork Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiSarabun · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 6px · xl 10px · pill 999px`
Border	`1px`
Shadow	`0 2px 4px rgba(70,40,15,0.12), 0 10px 22px rgba(70,40,15,0.16)`
Display	`clamp(2.75rem, 6vw, 5rem)`
Motion	`380ms cubic-bezier(.3,.7,.2,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Vintage Analog / Retro Film (vintage-analog-retro-film) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 6px;
  --background: #F2E8D5;
  --foreground: #2B1E16;
  --card: #FBF5EA;
  --card-foreground: #2B1E16;
  --popover: #FBF5EA;
  --popover-foreground: #2B1E16;
  --primary: #B0441D;
  --primary-foreground: #FFF6E8;
  --secondary: #D9A43A;
  --secondary-foreground: #2B1E16;
  --muted: #EADCC2;
  --muted-foreground: #67503F;
  --accent: #EADCC2;
  --accent-foreground: #2B1E16;
  --destructive: #A5302A;
  --border: #C9B391;
  --input: #C9B391;
  --ring: #B0441D;
  --chart-1: #B0441D;
  --chart-2: #D9A43A;
  --chart-3: #2F6B67;
  --chart-4: #8A5A7C;
  --chart-5: #7A6250;
  --sidebar: #FBF5EA;
  --sidebar-foreground: #2B1E16;
  --sidebar-primary: #B0441D;
  --sidebar-primary-foreground: #FFF6E8;
  --sidebar-accent: #EADCC2;
  --sidebar-accent-foreground: #2B1E16;
  --sidebar-border: #C9B391;
  --sidebar-ring: #B0441D;
}

.dark {
  --background: #18120E;
  --foreground: #F1E4CC;
  --card: #231B15;
  --card-foreground: #F1E4CC;
  --popover: #231B15;
  --popover-foreground: #F1E4CC;
  --primary: #E2733F;
  --primary-foreground: #18120E;
  --secondary: #E6B450;
  --secondary-foreground: #18120E;
  --muted: #2D231B;
  --muted-foreground: #BCA585;
  --accent: #2D231B;
  --accent-foreground: #F1E4CC;
  --destructive: #E7695A;
  --border: #4E3D2E;
  --input: #4E3D2E;
  --ring: #E2733F;
  --chart-1: #E2733F;
  --chart-2: #E6B450;
  --chart-3: #6FB3A9;
  --chart-4: #C08BB2;
  --chart-5: #BCA585;
  --sidebar: #231B15;
  --sidebar-foreground: #F1E4CC;
  --sidebar-primary: #E2733F;
  --sidebar-primary-foreground: #18120E;
  --sidebar-accent: #2D231B;
  --sidebar-accent-foreground: #F1E4CC;
  --sidebar-border: #4E3D2E;
  --sidebar-ring: #E2733F;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Vintage Analog / Retro Film (vintage-analog-retro-film) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F2E8D5;
  --color-surface: #FBF5EA;
  --color-surface-2: #EADCC2;
  --color-text: #2B1E16;
  --color-text-muted: #67503F;
  --color-primary: #B0441D;
  --color-on-primary: #FFF6E8;
  --color-secondary: #D9A43A;
  --color-on-secondary: #2B1E16;
  --color-accent: #2F6B67;
  --color-border: #C9B391;
  --color-success: #4C7838;
  --color-warning: #A86F0F;
  --color-danger: #A5302A;
  --color-chart-1: #B0441D;
  --color-chart-2: #D9A43A;
  --color-chart-3: #2F6B67;
  --color-chart-4: #8A5A7C;
  --color-chart-5: #7A6250;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(70,40,15,0.18);
  --shadow-md: 0 2px 4px rgba(70,40,15,0.12), 0 10px 22px rgba(70,40,15,0.16);
  --shadow-lg: 0 4px 8px rgba(70,40,15,0.14), 0 24px 48px rgba(70,40,15,0.22);
  --font-heading: "Fraunces", "Pridi", system-ui, sans-serif;
  --font-body: "Work Sans", "Sarabun", system-ui, sans-serif;
  --font-mono: "VT323", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

.dark {
  --color-bg: #18120E;
  --color-surface: #231B15;
  --color-surface-2: #2D231B;
  --color-text: #F1E4CC;
  --color-text-muted: #BCA585;
  --color-primary: #E2733F;
  --color-on-primary: #18120E;
  --color-secondary: #E6B450;
  --color-on-secondary: #18120E;
  --color-accent: #6FB3A9;
  --color-border: #4E3D2E;
  --color-success: #8DBB6A;
  --color-warning: #E6B450;
  --color-danger: #E7695A;
  --color-chart-1: #E2733F;
  --color-chart-2: #E6B450;
  --color-chart-3: #6FB3A9;
  --color-chart-4: #C08BB2;
  --color-chart-5: #BCA585;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Vintage Analog / Retro Film (vintage-analog-retro-film). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9098,
            0.8353
          ],
          "hex": "#f2e8d5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9608,
            0.9176
          ],
          "hex": "#fbf5ea"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.8627,
            0.7608
          ],
          "hex": "#eadcc2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1176,
            0.0863
          ],
          "hex": "#2b1e16"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4039,
            0.3137,
            0.2471
          ],
          "hex": "#67503f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.2667,
            0.1137
          ],
          "hex": "#b0441d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9647,
            0.9098
          ],
          "hex": "#fff6e8"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.6431,
            0.2275
          ],
          "hex": "#d9a43a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1176,
            0.0863
          ],
          "hex": "#2b1e16"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4196,
            0.4039
          ],
          "hex": "#2f6b67"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.702,
            0.5686
          ],
          "hex": "#c9b391"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.4706,
            0.2196
          ],
          "hex": "#4c7838"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.4353,
            0.0588
          ],
          "hex": "#a86f0f"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6471,
            0.1882,
            0.1647
          ],
          "hex": "#a5302a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.2667,
            0.1137
          ],
          "hex": "#b0441d"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.6431,
            0.2275
          ],
          "hex": "#d9a43a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4196,
            0.4039
          ],
          "hex": "#2f6b67"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.3529,
            0.4863
          ],
          "hex": "#8a5a7c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.3843,
            0.3137
          ],
          "hex": "#7a6250"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.0706,
            0.0549
          ],
          "hex": "#18120e"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.1059,
            0.0824
          ],
          "hex": "#231b15"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.1373,
            0.1059
          ],
          "hex": "#2d231b"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.8941,
            0.8
          ],
          "hex": "#f1e4cc"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7373,
            0.6471,
            0.5216
          ],
          "hex": "#bca585"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.451,
            0.2471
          ],
          "hex": "#e2733f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.0706,
            0.0549
          ],
          "hex": "#18120e"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.7059,
            0.3137
          ],
          "hex": "#e6b450"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.0706,
            0.0549
          ],
          "hex": "#18120e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.702,
            0.6627
          ],
          "hex": "#6fb3a9"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3059,
            0.2392,
            0.1804
          ],
          "hex": "#4e3d2e"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5529,
            0.7333,
            0.4157
          ],
          "hex": "#8dbb6a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.7059,
            0.3137
          ],
          "hex": "#e6b450"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.4118,
            0.3529
          ],
          "hex": "#e7695a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.451,
            0.2471
          ],
          "hex": "#e2733f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.7059,
            0.3137
          ],
          "hex": "#e6b450"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.702,
            0.6627
          ],
          "hex": "#6fb3a9"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.5451,
            0.698
          ],
          "hex": "#c08bb2"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7373,
            0.6471,
            0.5216
          ],
          "hex": "#bca585"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.0588
            ],
            "hex": "#46280f",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.0588
            ],
            "hex": "#46280f",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 4,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.0588
            ],
            "hex": "#46280f",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 22,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.0588
            ],
            "hex": "#46280f",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.0588
            ],
            "hex": "#46280f",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 48,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Fraunces",
        "Pridi",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Work Sans",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "VT323",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 380,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!