---
name: 1982-style
description: Use when designing or building any page, site or app for 1982 / Freddy's so it looks and moves the 1982 way ("our style" - Teenage Engineering + Apple): thin lowercase Inter, black with amber touches, fine grey outlines, one locked screen, the "..1982.." tag on every page.
---

# our style (1982)

Teenage Engineering + Apple. Calm, black, precise, a little playful. If a choice isn't covered here, pick the quieter one.

## The rules (non-negotiable)
1. **One screen, no scrolling.** Every page fits the viewport in portrait AND landscape. Lock it: `html,body{height:100%;overflow:hidden;overscroll-behavior:none}` and size with `100dvh`/`100dvw` plus safe-area insets. Scroll only inside a list when it is truly unavoidable.
2. **No zoom fiddling in apps.** `touch-action:manipulation` (kills double-tap zoom) and `overscroll-behavior:none` (kills bounce). Every page, app or website, is zoom-locked. Size everything for the device's screen instead.
3. **"..1982.." on every page.** Fixed at the bottom centre, always visible, never overlapping anything (reserve its space; content sits above it). Exact text: `..1982..`. Nothing else in the tag.
4. **Business in the front, party in the back.** Plain, useful words and the main action first. The fun (animations, easter eggs, games) comes after or behind a tap.
5. **Follow the brief literally.** Build what was sketched or said, no extra panels, banners or invented taglines. Copy comes from 1982. No permanent warning notices.
6. **Nothing private on public pages.** No real names (use "1982"), no keys, PINs, staff names, internal links.

## Tokens
```css
@font-face{font-family:I;src:url(inter-200.woff2) format("woff2");font-weight:100 900;font-display:block}
:root{
  --bg:#000;      /* page */
  --card:#0b0b0b; /* dark cards */
  --ln:#1f1f1f;   /* fine outline */
  --ln2:#2c2c2c;  /* stronger outline, pills, chips */
  --dim:#8e8e8e;  /* secondary text */
  --dim2:#5c5c5c; /* tertiary text, the tag */
  --soft:#d9d9d9; /* big display text */
  --a:#f2a33a;    /* amber accent - use sparingly */
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
}
html,body{background:#000;color:#fff;font-family:I,-apple-system,system-ui,sans-serif;
  font-weight:200;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
```

## Type
- Inter at weight **200** for everything, headings included. Never bold for emphasis; use size, white vs grey, or amber.
- **lowercase** labels, buttons, tabs and tags. Proper names can keep their own case.
- Headings 26-27px with letter-spacing -0.2px; body 14-15px; small labels 12px; the tag about 10.5-12px.
- Tight, airy, generous margins. One idea per screen.

## Colour
- Black and white first. Greys (`--dim`, `--dim2`) for hierarchy.
- **Amber is a touch, not a theme:** a dot, an active state, one disc, a glow on the selected item. One or two per screen.
- No gradients, no drop-shadow stacks, no stock-photo looks.

## Shapes and parts
- Cards: `background:var(--card);border:1px solid var(--ln);border-radius:22px;padding:14px 16px`
- Lists: same card, radius 18px. Sheets: radius 26px top corners, slide up from the bottom.
- Pills, chips and segmented controls: `border:1px solid var(--ln2);border-radius:999px`. The selected one goes white-on-black inverted or gets the amber dot.
- Little round dots (5-6px) as markers: grey off, white or amber on.
- Toggles: 44x26px, grey track, white knob.
- Tab bar: thin top hairline, translucent black with `backdrop-filter:blur(20px)`, sits just above the "..1982.." tag.
- Drawings and device art: **fine 1px grey outlines on black**, Teenage Engineering instrument-diagram style (think EP-133 / OP-1 field / OP-XY): lots of tiny precise detail (screws, legends, LCD segments, tiny print) drawn as lines, never photo-real, never chunky.
- Tap targets: at least 44x44px, even when the visible thing is smaller.

## Motion (pub.controller feel)
- Short and precise. Taps: scale press 0.12-0.15s. Colour/state: 0.15-0.2s. Screens and sheets: `transform .32s cubic-bezier(.2,.8,.2,1)`.
- Animate only `transform` and `opacity` (GPU), `will-change:transform` on moving panels.
- Every arrival is 0.6s or less and cancels on the next input; nothing blocks a tap.
- Mechanical, satisfying details over flashy ones: a key dips, a door flips, a reel spins, a dot lights.
- `prefers-reduced-motion`: show end states, no movement.

## The tag
```html
<div class="made">..1982..</div>
```
```css
.made{position:fixed;left:0;right:0;bottom:0;height:calc(16px + var(--sb));
  display:flex;justify-content:center;align-items:flex-start;padding-top:3px;
  font-size:10.5px;letter-spacing:.06em;color:var(--dim2);background:#000;
  pointer-events:none;z-index:70}
/* reserve it: anything fixed to the bottom sits at bottom: calc(16px + var(--sb)) */
```

## Before you call it done
- Real iPhone check, portrait and landscape: nothing scrolls, nothing overlaps the tag, notch and home bar respected.
- Real numbers, not just screenshots: LCP 2.5s or less, INP 200ms or less, CLS 0.1 or less, a smooth 60fps on a CPU-throttled mobile run.
- Motion check: speeds feel quick and nothing waits on an animation.
- Contrast: body text meets WCAG AA (grey on black included).
- Re-read the brief: anything on screen that wasn't asked for comes off.