# Old School & Vintage: Honest craft with a little wear

Old School & Vintage treats the web page like a printed catalogue, a film-archive sleeve or a beloved piece of hardware. The UI chrome stays nearly colourless: warm off-black ink, paper-white or studio-grey grounds, hairline rules and square corners. Analog photography, illustrated covers, pixel art and stickers supply the colour, and a single muted or saturated ink accent marks every action. The type works in two voices: a bookish serif or chunky grotesk for the voice, and tiny tracked uppercase sans or mono for labels and logistics.

Sites in this collection: [Field Notes](https://fieldnotesbrand.com), [Panic](https://panic.com), [Playdate](https://play.date), [Polaroid](https://www.polaroid.com), [Daylight](https://daylightcomputer.com), [Criterion](https://www.criterion.com).

## Brief for your agent

Design this in an Old School & Vintage style, like a mid-century printed catalogue or a film-archive sleeve. Use a paper background (#ffffff or warm #faf5f2), with alternating bands in #ebebeb–#efefef and dark bands or footers in #252525. Set text in warm near-black #302e2a, secondary text in #545049, captions in #8e8e8e, and hairlines in 1px #dadada (#4a4a4a on dark). Use exactly one accent, rust #9c3e14, for prices, links and the primary button, and nothing else. Typography has two voices. Headlines use Fraunces or Source Serif 4 at 44–60px, weight 300–400, line-height 1.05, tracking -0.015em, with italic for subheads and titles. Labels, nav, buttons and table headers use uppercase sans (DM Sans/Jost) or IBM Plex Mono at 11–13px, weight 600, tracking 0.1–0.15em, often ending in a thin →. Body copy is 16px at line-height 1.5. Set every corner to 0px radius and use no CSS shadows or gradients. Buttons are 44px tall: solid #302e2a or the accent with white caps, or a 1–2px outline. Inputs are square 1px boxes or underline-only with an arrow submit. Lay out full-bleed bands with 1200px content, a one-viewport hero built on analog photography with a small centred serif lockup, and 96–160px between sections. Product and content grids are 3–4 columns of equal cells sharing 1px rules with zero gaps; drop signup or editorial blocks into a cell at the same size. Product cards show a cut-out photo, a 13px tracked caps name and the price in rust with a superscript $. Add one print flourish, such as a 4px ochre (#c78334) rule across the top, a circular rust sticker badge or an oversized footer wordmark. Write headings as plain sentences ending in a period. For app screens, use a paper sidebar with caps section labels and a 2px accent bar on the active item, hairline tables with mono numbers and no zebra fills, gapless metric tiles with serif numbers, square solid status chips, and empty states with a line illustration and a one-sentence serif message.

## Principles

### The product is the colour; the chrome is ink and paper

Keep the UI to warm near-black, white or grey paper, a hairline grey and one accent, so loud imagery never clashes. Field Notes runs dozens of illustrated covers on #ffffff with #302e2a text. Polaroid holds its chrome to #151515, #ffffff and #e9e9e9 and lets the rainbow appear only on product and badges. Criterion frames wildly different film art in identical #252525 chrome. Panic floats coloured icons on a flat #ebebeb field.

### Two typographic voices: one for feeling, one for logistics

Pair an expressive display voice with a tiny tracked uppercase utility voice. Field Notes sets New Century Schoolbook serif for prose (46px/400 hero, 15px/1.5 body) against Futura Bold caps at 13–14px with 0.1–0.15em tracking. Criterion pairs Mercury serif for navigation with Gotham Narrow Bold caps at 11–13px and 0.077em. Daylight pairs a 60px/300 serif with 11–13px caps at weight 500–600. Polaroid uses a 40px/600 grotesk against 11–12px uppercase mono CTAs followed by a thin arrow. Skip intermediate weights; the jump in scale creates the hierarchy.

### Catalogue grids: hairlines, zero gaps, square corners

Build grids as contact sheets rather than floating cards. Tiles share 1px borders and have no gutters. Field Notes uses 1px #dadada hairlines between roughly 360px cells in a 4-column grid. Polaroid uses 1px #151515 rules between #e9e9e9 tiles and between stacked 620–720px banner panels. Criterion stacks gapless full-viewport panels. Radius is 0px for buttons, inputs, tiles and chips. Drop editorial and signup content into a grid slot at the same size, the way Field Notes places magazine-style ads.

### Warm, aged neutrals instead of pure black and white

Text sits in the #151515–#312f28 range with a warm bias: #302e2a pencil black (Field Notes), #312f28 screen charcoal (Playdate), #17190f olive ink (Daylight). Dark frames use #1c1c1c–#252525, never #000. Light grounds range across #ffffff, #faf5f2 warm paper, #efefef/#ebebeb/#e9e9e9 newsprint and studio grey. Muted text is #545049–#8e8e8e. Khaki #aea288 and oat #e8ded8 serve as secondary tints.

### One ink accent for every action and value

Choose exactly one accent and use it for prices, links, the primary button and focus states. Examples: rust #9c3e14 for Field Notes prices with a superscript $, marigold #ff9d00 for all Daylight actions and card borders, gumdrop purple #7a1fff for Playdate's only CTA, archival gold #b4841e used rarely at Criterion, and exclusive red #d60026 for Polaroid tag chips. A second accent breaks the system.

### Analog, tactile imagery does the storytelling

Use grainy film footage (Polaroid hero), overhead tabletop shots on dark wood (Field Notes), hardware in sunlit grass (Daylight), cut-out objects with baked-in natural shadows (Field Notes, Polaroid category row), 1-bit pixel tiles in #312f28 on #b1aea7 (Playdate), and film stills or painted key art (Criterion). Avoid glossy stock renders. Without strong art-directed imagery this style looks empty.

### Small print-era flourishes and a human voice

Add one or two hand-assembled details: a 3–4px ochre rule along the top edge (Field Notes), circular rust stickers ('36 LEFT') overlapping product corners, rotated sticker badges and speech-bubble asides (Playdate), a circular-text seal (Daylight), a vertical wordmark beside a round mark (Criterion), italics for publication titles, curly quotes, a superscript $, or a giant wordmark in the footer (Polaroid). Write headings as plain sentences ending in a period ('Panic publishes amazing video games.', 'The System.').

## Colour

Light mode is the default. Backgrounds: #ffffff bond white, #faf5f2 warm paper, or #e9e9e9–#efefef studio/newsprint grey for alternating bands and tile fills. Dark bands and footers: #1c1c1c–#252525. Text: warm near-black #151515–#312f28 (prefer #302e2a). Secondary text: #545049–#5a5a4e. Captions: #808080–#8e8e8e, used only at 13px+ on light grounds and never for long copy on dark. Borders: #dadada for hairlines on white, #151515 for a bolder contact-sheet frame, #4a4a4a on dark. Supporting tints: kraft khaki #aea288, ochre #c78334, oat #e8ded8. Pick one accent: rust #9c3e14 (default, most print-like), marigold #ff9d00, gold #b4841e, or a single saturated hardware colour (#7a1fff, #d60026) for a playful brand. Product colours such as Playdate yellow #ffc600 may fill a full-bleed band, but always put charcoal text on them, never white. No gradients in UI chrome.

## Typography

Display: an old-style or schoolbook serif (Fraunces, Source Serif 4, Newsreader, Libre Caslon) at 44–64px, weight 300–400, line-height 1.0–1.1, tracking -0.01 to -0.02em. Use italic for subheads and titles of works. For playful hardware brands, a chunky grotesk at 700–800 and 57–68px with line-height 1.0 can replace the serif. Section heads run 28–42px. Labels, nav, buttons and prices use a geometric sans (Jost/Futura-like, DM Sans) or a mono (IBM Plex Mono, Space Mono) in UPPERCASE at 11–14px, weight 500–700, tracking 0.08–0.15em, often followed by a thin → arrow. Body copy is 15–17px serif or sans at line-height 1.4–1.5 with a 60–70ch measure. Caption blocks can tighten to 1.2 at a ~300px measure, as Polaroid does. Never set the utility voice in lowercase or untracked. Never use weight-300 display below 40px.

## Layout

Use full-bleed bands stacked edge to edge, with content capped at 1080–1200px (up to 1380px for catalogue grids) and 24–32px side margins. Heroes are one viewport tall (860–1000px) and carry a photo or footage with a small lockup: centred (Criterion, Field Notes) or anchored bottom-left in a narrow column (Polaroid). Daylight insets the hero as a 16px-margin framed photo. Leave 96–200px between modules and zero gaps inside grids. Product grids are 3–4 columns of equal cells sharing 1px rules, with 24–40px internal padding. A centred header (wordmark above a single row of tracked caps nav) suits catalogue brands. Transparent nav over imagery suits cinematic ones. Use at most two diagonal band edges, if any. Footers sit on a dark or white field with serif column heads, small tracked caps links on 20–24px rows, and optionally an oversized wordmark.

## Components

Buttons have a 0px radius and are 30–52px tall with uppercase tracked 11–13px labels. Primary is a solid ink fill (#151515 with white text, or white with #252525 text on imagery) or the accent. Secondary is a 1–2px outline with a transparent fill. Pair them with an 8px gap. Ghost buttons with a 2px white border work over photos. A playful brand may allow exactly one tactile pill CTA (34px radius, inset highlight) as its sole skeuomorphic element. Inputs are square with a 1px border, or underline-only with a 1px dark bottom border and a thin arrow submit. Search uses a divided magnifier cell. Product cards have no chrome: a cut-out photo on white or #e9e9e9, a 13px uppercase tracked name, the price in the accent with a superscript currency, and an optional rectangular tag chip (11px caps on solid ink, red or green). Badges are circular stickers in the accent overlapping an image corner. Use thin 1.5px line icons (envelope, chevron, magnifier, arrow), and show the cart as a bracketed count '[0]'. No CSS drop shadows on UI; shadows only exist inside photographs.

## App UI

Carry the printed-ledger feel into product screens. Canvas: #ffffff or #faf5f2. Sidebar: same paper with a 1px #dadada right rule. Section labels are 11px uppercase tracked in #8e8e8e. Nav items are 14px, with the active item in #302e2a at weight 600 and a 2px accent bar at left, and inactive items in #545049. Page titles use the serif at 28–32px. Tables use 1px hairline row rules and no zebra fills; header cells are 11px uppercase tracked sans or mono; numbers and IDs are set in mono, right-aligned; key values and links are in the accent; rows are 40–44px. Dashboard metrics sit in gapless tiles sharing 1px borders, with a 32–40px serif number over a caps label and no cards or shadows. Status uses small square chips with solid fills and white or ink caps text. Forms use square 1px inputs 36–40px tall, caps labels above, and inline compact controls (select + 'Go') where possible. Modals are square, with a 1px #151515 border and a paper fill. Empty states show a single black line illustration, a serif sentence ending in a period ('Nothing filed here yet.'), a short secondary line, and one outline button. Toasts are #252525 strips with white caps text. Dark mode uses #1c1c1c–#252525 with #4a4a4a rules and white serif titles.

## Do

- Keep UI chrome to warm ink, paper and one hairline grey; let imagery bring the colour.
- Set every label, button and nav item in uppercase with 0.08–0.15em tracking at 11–14px.
- Use a schoolbook or old-style serif for headlines and conversational copy.
- Divide grids with shared 1px rules and zero gutters, like a contact sheet.
- Use 0px corners on buttons, inputs, tiles and chips.
- Reserve a single accent (e.g. rust #9c3e14) for prices, links and the primary action.
- Use warm off-blacks (#302e2a, #252525) instead of #000.
- Shoot or source analog, tactile photography: film grain, tabletops, cut-outs with natural shadows.
- Add one print flourish: a top rule, a sticker badge, a superscript $ or a giant footer wordmark.
- Write headings as short plain sentences that end in a period.

## Don't

- Don't add rounded cards, soft CSS drop shadows or gradient buttons.
- Don't introduce a second accent colour or colour-fill UI chrome.
- Don't set utility labels in lowercase or untracked sans.
- Don't put white text on yellow or on bright photo areas without a scrim.
- Don't use #808080–#8e8e8e text below 13px on dark grounds or for long copy.
- Don't use weight-300 serif display below 40px.
- Don't fill the layout with stock renders or generic icons; weak imagery leaves the grid empty.
- Don't overdo the nostalgia with fake paper-tear textures, distressed fonts or sepia filters everywhere; restraint reads as authentic.
- Don't use more than two diagonal section edges.

## Theme preset

```json
{
    "brand": "#9c3e14",
    "neutral_tone": "warm",
    "mode": "light",
    "radius": 0,
    "density": "comfortable",
    "heading_font": "Fraunces",
    "body_font": "DM Sans",
    "shadow": "none"
}
```

## The sites

### Field Notes (https://fieldnotesbrand.com)

Field Notes reads like a mid-century American printed catalogue moved to the web: a centred Futura Bold wordmark, tracked uppercase labels, New Century Schoolbook serif for editorial notes, and a hairline-ruled, square-cornered product grid where photographed notebook covers supply nearly all the colour. The chrome stays almost colourless (warm near-black, white, a khaki rule and a rust price colour), so dozens of loud, illustrated covers can sit side by side without the page feeling chaotic.

Palette: #ffffff background, #302e2a text, #545049 muted, #9c3e14 accent, #aea288 highlight, #c78334 highlight, #dadada border, #ededed surface. Type: Futura W01 Bold (Futura Bold / Heavy) headings, Futura W01 Bold for labels and UI; New Century Schoolbook W01 for editorial copy body.

Signature moves:
- Let the products be the only colour: keep UI to warm black, white, khaki and one rust accent so busy illustrated imagery never clashes.
- Split the type into two voices — tracked uppercase geometric sans for every label, button and name; an old-fashioned schoolbook serif for anything conversational.
- Use a gapless grid divided by 1px hairlines, like a printed catalogue page, instead of floating rounded cards.
- Insert editorial and signup content as same-size grid cells so marketing reads like ads in a magazine spread rather than interrupting banners.
- Set prices in a rust brown with a superscript dollar sign — a small print-catalogue detail that signals craft.
- Top the page with a thin ochre rule, like the stitched or printed edge of a memo book.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/field-notes.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/field-notes/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/field-notes/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/field-notes/tokens.json

### Panic (https://panic.com)

Panic's homepage is a playful, almost toy-like index of everything the company makes: a full-bleed dark game-art hero with a featured logo, then a pale grey (#ebebeb) field of large app and game icons grouped under light-weight, coloured one-line headlines, ending in a near-black help footer. It works because the product artwork does all the visual talking while the chrome stays minimal and centred, and two slanted section edges plus per-section headline colours give a quiet, friendly personality with no cards, shadows or buttons.

Palette: #ebebeb background, #171717 surface, #1c1c1c surface, #444444 text, #808080 muted, #9844f6 accent, #1f95c1 highlight, #41bb9c accent. Type: Booton headings, Booton body.

Signature moves:
- Write every section heading as a complete, plain sentence in a light-weight grotesk ('Panic publishes amazing video games.'), led by a matching outline icon.
- Let real product icons and key-art stickers at about 120px be the entire content of a section, with no cards, captions or shadows, floating on a flat grey field.
- Separate full-bleed bands with diagonal edges instead of horizontal rules, so the page feels tilted and lively.
- Give each section headline its own saturated colour (violet, teal, yellow) while body text stays neutral grey.
- Use a no-nav, no-copy hero: one darkened game screenshot with the brand badge and a featured product logo stacked in the centre.
- Embed tiny functional forms (select plus 'Go', email plus 'Go') inside footer sentences, each line led by a coloured app-icon bullet.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/panic.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/panic/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/panic/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/panic/tokens.json

### Playdate (https://play.date)

Playdate's homepage is a toy box: a cool grey stage for a glossy 3D render of the yellow console, then a full-bleed saturated-yellow story section with chunky 800-weight Roobert headings, cut-out product photography and a wall of 1-bit game title cards. It works because the yellow device is the brand. The page lets the hardware's colour, the screen's monochrome pixel art and a chatty, jokey voice carry everything, and uses only a single bubble-gum purple button as the call to action.

Palette: #7b8087 background, #ffc600 background, #efefef surface, #312f28 text, #b1aea7 muted, #ffffff text, #7a1fff accent, #ffb000 highlight. Type: Roobert headings, Roobert body.

Signature moves:
- Make the product's own colour the page's colour: a full-bleed #ffc600 band matches the yellow device so photos melt into the background.
- Stage the hero render on flat cool grey with a radial spotlight, so the saturated hardware pops like a museum object.
- End every section heading with a period and write body copy as Q&A banter ('Is it a gimmick? Nah.'), with one bolded key claim per paragraph.
- Use one tactile, glossy purple pill CTA with layered inset shadows as the only skeuomorphic element on an otherwise flat page.
- Slap on rotated sticker badges and speech-bubble asides so the page feels hand-assembled and jokey.
- Show the content library as a dense grid of strictly 2-tone pixel-art tiles, letting a constraint (1-bit screen) become a visual identity.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/playdate.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/playdate/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/playdate/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/playdate/tokens.json

### Polaroid (https://www.polaroid.com)

Polaroid's store reads like a gallery catalogue: full-bleed analog film footage up top, then flat #e9e9e9 and white panels framed by 1px near-black hairlines, square corners everywhere, and a tight grotesk set against small monospaced uppercase labels. Colour comes almost entirely from photography, products and the Polaroid rainbow, so the chrome stays neutral and the merchandise reads as the brand.

Palette: #ffffff background, #e9e9e9 surface, #151515 text, #151515 border, #d60026 accent, #78be20 highlight, #ffb500 highlight, #198cd9 highlight. Type: FF Real Header Offc Demibold (REAL_HEADER_OFFC_DEMIBOLD) headings, FF Real Header Offc Regular (REAL_HEADER_OFFC_REGULAR) body.

Signature moves:
- Separate everything with 1px #151515 hairlines and zero gaps, so grids read like a contact sheet or printed catalogue rather than floating cards.
- Set every CTA and label in tiny uppercase monospace with a thin arrow ('DISCOVER IT →'), against a tight grotesk for headlines, creating a technical/archival voice.
- Keep the UI chrome strictly black, white and #e9e9e9, and let the brand rainbow appear only in product, packaging, badges and campaign panels.
- Anchor banner copy bottom-left in a narrow column, with the product or footage owning the rest of the frame.
- Use grainy, imperfect analog film footage as the hero instead of polished product renders, which reinforces the 'beautifully imperfect' brand promise.
- Close the page with a giant wordmark in the footer as a graphic element.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/polaroid.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/polaroid/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/polaroid/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/polaroid/tokens.json

### Daylight (https://daylightcomputer.com)

Daylight presents a calm-technology product as a warm, editorial object: a full-bleed, rounded-corner photograph of the tablet lying in sunlit grass, set on a warm-paper page with thin serif headlines in ABC Arizona Flare and a single saturated marigold orange for every action. The result feels like a lifestyle magazine rather than a gadget launch, which suits a product sold on focus and wellbeing; the below-fold content renders blank in the capture, so the hero carries the whole identity.

Palette: #faf5f2 background, #e8ded8 surface, #ff9d00 accent, #17190f text, #ffffff highlight, #5a5a4e muted, #3b3a1f border. Type: ABC Arizona Flare (Dinamo) headings, ABC Room (Dinamo), with Arizona Flare for larger body copy body.

Signature moves:
- Shoot the hardware as a natural still life (grass, sunlight, fallen leaves, dappled shadow) instead of a studio render, so the device feels like paper or wood rather than electronics.
- Inset the full-bleed hero as a rounded card on a warm off-white page (#faf5f2) so even immersive photography feels framed and gentle.
- Use one saturated marigold (#ff9d00) for everything actionable: buttons, card borders, play icon. Keep the rest of the palette earthy and desaturated.
- Pair a light-weight (300) serif display with tiny uppercase grotesk utility labels, separating emotion from logistics.
- Pin interactive UI to the four corners of the hero and leave the centre to the product image.
- Use olive-black (#17190f) instead of pure black for text, keeping contrast warm and organic.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/daylight.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/daylight/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/daylight/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/daylight/tokens.json

### Criterion (https://www.criterion.com)

Criterion's homepage is a stack of full-bleed, edge-to-edge cinematic panels, each one a film still or poster art with bespoke title lettering and a single small white rectangular button, sitting over a near-black #252525 frame. The chrome is deliberately quiet so the films carry the page: a literary serif (Mercury) for navigation and section names, tracked uppercase Gotham Narrow for utility text, and zero radii, shadows or decoration.

Palette: #252525 background, #ffffff text, #8e8e8e muted, #4a4a4a border, #b4841e accent, #f2e51f highlight. Type: Mercury Text G1 (Regular and Italic), with custom per-campaign display lettering baked into artwork headings, Gotham Narrow Bold (uppercase utility) + Mercury Text G1 body.

Signature moves:
- Let each feature carry its own custom title lettering in the artwork, while the UI chrome stays identical and neutral around it.
- Use one unchanging white, square-cornered, small-caps button on every panel so the CTA reads consistently over wildly different imagery.
- Pair a bookish serif for names and navigation with tight, tracked uppercase sans for actions — and italicise publication titles as in print.
- Stack full-viewport, gapless image panels with a single centred message each, like a sequence of film frames.
- Set the wordmark vertically beside a circular mark in the top-left corner, as on a disc spine.
- Keep the frame a soft charcoal (#252525) rather than pure black so photography reads as projected rather than boxed.

Full teardown: https://pageproofer.com/inspiration/old-school-vintage/criterion.md · Screenshots: https://pageproofer.com/images/inspiration/old-school-vintage/criterion/hero.jpg (first screen), https://pageproofer.com/images/inspiration/old-school-vintage/criterion/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/old-school-vintage/criterion/tokens.json