The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Overprint — Design Conference Website with Schedule

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A two-page website (home and schedule) for [BRAND], a small independent two-day conference about [EVENT_TOPIC], held in [CITY] on [EVENT_DATES]. The home page is designed like a Swiss event poster: paper off-white, near-black ink, one vermilion accent, hard rules, numbered sections, and a giant variable-font headline of the event name whose letters get heavier and wider as the pointer approaches. It covers about, speakers (abstract code-generated portraits with bios on hover), venue (hand-drawn SVG map), ticket tiers with a sold-out tier, and FAQ. The schedule page lists every session with day tabs and track filters that work entirely in the browser. All content is invented.

- Audience: [AUDIENCE] deciding whether to buy a ticket, plus attendees checking the schedule on their phone during the event.
- Goal: Make the event feel worth attending in five seconds, then get visitors to the ticket tiers or the schedule with no friction.
- Tone: Confident, dry and a little opinionated, like a poster written by designers for designers. Short sentences, concrete numbers, no hype words, no exclamation marks.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/anybody (OFL-1.1), @fontsource-variable/inter (OFL-1.1), @fontsource/jetbrains-mono (OFL-1.1), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with Vite's react-ts template; package.json scripts: "dev": "vite", "build": "tsc -b && vite build", "preview": "vite preview".
  - Two real HTML entry files at the project root: index.html (mounts src/home.tsx) and schedule.html (mounts src/schedule.tsx). Each has <title>[BRAND] — [EVENT_TOPIC] conference</title> (schedule: <title>Schedule — [BRAND]</title>) and <link rel="icon" href="./favicon.svg">.
  - vite.config.ts: base: './', plugins: [react()], build: { sourcemap: false, rollupOptions: { input: { main: 'index.html', schedule: 'schedule.html' } } }.
  - public/favicon.svg: a 32×32 vermilion #FF4A1C square with a black #141414 circle of radius 9 centred in it, nothing else.
  - Fonts are imported once in src/styles.css via JS imports in src/fonts.ts: import '@fontsource-variable/anybody/wdth.css' (family 'Anybody Variable', wght 100–900, wdth 50–150), import '@fontsource-variable/inter' (family 'Inter Variable'), import '@fontsource/jetbrains-mono/400.css' and '@fontsource/jetbrains-mono/700.css' (family 'JetBrains Mono'). Both entry files import src/fonts.ts and src/styles.css.
  - tailwind.config.ts: content ['./index.html','./schedule.html','./src/**/*.{ts,tsx}']; theme.extend.colors { paper: '#F3EFE6', shade: '#E7E1D4', ink: '#141414', mute: '#6E6A62', signal: '#FF4A1C', signaldeep: '#D93A12' }; fontFamily { display: ['"Anybody Variable"','sans-serif'], sans: ['"Inter Variable"','sans-serif'], mono: ['"JetBrains Mono"','monospace'] }; keyframes marquee (from translateX(0) to translateX(-50%)) and pinpulse (0%: scale(1) opacity 0.6; 100%: scale(2.4) opacity 0) with animations marquee: 'marquee 40s linear infinite' and pinpulse: 'pinpulse 2s ease-out infinite'.
  - src/styles.css: @tailwind base/components/utilities; body bg-paper text-ink font-sans antialiased; add a .tabular class with font-variant-numeric: tabular-nums; add a global @media (prefers-reduced-motion: reduce) block that sets animation: none and transition-duration: 0.01ms on all elements.
  - All copy, speakers, sessions, tiers, FAQ items, nav links and the marquee items live in src/content.ts as typed exports (site, nav, hero, marquee, about, speakers, venue, tiers, faq, cta, footer, schedule). Components only read from it.
  - Shared components in src/components/: Header.tsx, PosterHeadline.tsx, Marquee.tsx, SectionHead.tsx, Portrait.tsx, VenueMap.tsx, TicketDialog.tsx, CtaBand.tsx, Footer.tsx. Pages in src/pages/Home.tsx and src/pages/Schedule.tsx.
  - src/lib/useReducedMotion.ts: wrap Motion's useReducedMotion; every JS-driven animation (headline, map draw-in, schedule list, accordion) checks it and renders the final static state when true.

## Variables
- [BRAND] — Event name (used as the giant poster headline) (default: "Kernfolk"). One word of 5–10 letters works best for the per-letter headline effect.
- [EVENT_TOPIC] — What the conference is about (default: "independent web design")
- [CITY] — Host city (invented or real, no real venue names) (default: "Port Ellery")
- [EVENT_DATES] — The two event days (default: "June 11–12"). Day tabs read 'Day 1 — Thu 11 June' and 'Day 2 — Fri 12 June'; adjust weekdays to your dates.
- [AUDIENCE] — Who attends (default: "designers and front-end developers who still hand-build the web")
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/overprint in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F3EFE6` — Page background everywhere except ink bands
- Shade `#E7E1D4` — Portrait backgrounds, break rows in the schedule, map land, card hover fill
- Ink `#141414` — All text, 2px rules and borders, marquee and footer background, active tab fill
- Mute `#6E6A62` — Secondary text: roles, meta labels, durations, map street labels
- Signal `#FF4A1C` — The only accent: primary buttons, hero disc (multiply), section numbers, sold-out stamp, map pin, CTA band background, focus rings
- Signal Deep `#D93A12` — Hover state of Signal buttons only

### Typography
- Display (poster headline, section titles, speaker names, prices, big times): Anybody Variable (OFL), weights 300/600/800/900
- Body (paragraphs, bios, FAQ answers, buttons): Inter Variable (OFL), weights 400/500/600
- Mono (meta rows, labels, track names, marquee, map labels, session times on mobile): JetBrains Mono (OFL), weights 400/700

### Layout & motion
- Spacing: 12-column grid, max width 1440px, side padding 40px desktop / 20px mobile, 24px column gap. Sections are separated by a full-bleed 2px Ink rule and have 120px vertical padding desktop / 72px mobile. Inside cards use 24px padding. Every section opens with a SectionHead: a row with the number in Signal (Anybody 900, 20px, e.g. '02') followed by the title in Anybody 800 at font-stretch 85%, uppercase, clamp(40px, 6vw, 88px), line-height 0.9, and a 2px Ink rule underneath with 32px gap.
- Radius: 0 everywhere: buttons, cards, chips, dialog and inputs are square-cornered. The only round things are circles in the art (hero disc, portraits, map pin).
- Motion: Poster headline: each letter is its own span; on pointermove (desktop) a requestAnimationFrame loop computes the distance d from the pointer to each letter's centre and sets font-variation-settings 'wght' and 'wdth' from t = 1 − smoothstep(0, 360px, d): wght = 300 + 600·t, wdth = 60 + 80·t. Current values ease toward targets with lerp factor 0.14 per frame. When the pointer leaves the hero, targets return to rest (wght 300, wdth 60).
- Motion: On devices with (pointer: coarse) or no pointer movement for 4s, a virtual pointer at the vertical centre of the headline sweeps left to right and back across the word, one full cycle every 7s (x = centre + sin(time) · half width).
- Motion: Headline fit: on load and on resize, set font-size so the word fits the container with every letter at wght 900 / wdth 140, capped at 300px. The word never wraps or overflows at any pointer position.
- Motion: Section reveal: SectionHead and the first block of each section fade in and move up 24px over 600ms ease [0.2, 0.7, 0.2, 1] when 20% visible (Motion whileInView, once: true).
- Motion: Marquee: Ink band, content duplicated twice in one track, translateX 0 → −50% over 40s linear infinite; pauses on hover.
- Motion: Buttons: on hover the background shifts to Signal Deep (or Ink buttons to Signal) and the label's arrow moves 4px right, 150ms. Focus-visible: 3px Signal outline with 3px offset.
- Motion: Reduced motion: headline renders static at wght 800 / wdth 100 with no pointer tracking, marquee is static and wraps, no reveals, map is fully drawn, schedule and accordion change instantly.
- Imagery: No photos and no bitmaps. All art is drawn in code: the hero disc (CSS), abstract speaker portraits (SVG generated from a seeded random function of the speaker's name), the venue street map (inline SVG), the favicon (SVG). Icons come from lucide-react only. The overprint idea: Signal shapes sit on top of or behind Ink with mix-blend-mode: multiply so overlaps read as a darker red-black, like two inks printed over each other.

## Pages & Sections
### Home (`index.html`)
1. **Header** — Wordmark on the left: a 14px Signal square followed by 'KERNFOLK' in Anybody 900 at font-stretch 120%, 22px, letter-spacing 0.02em. Centre links: Speakers (./index.html#speakers), Venue (./index.html#venue), Tickets (./index.html#tickets), FAQ (./index.html#faq), Schedule (./schedule.html). Right: Signal button 'Get tickets' linking to ./index.html#tickets. On the schedule page the Schedule link shows a 3px Signal underline.
   Layout: Sticky at top, height 64px, Paper background, 2px Ink bottom border, links in Inter 500 15px with 32px gaps. Under 900px the centre links and button collapse into a square 44px Ink button with the lucide Menu icon; it opens a full-screen Ink overlay with the five links stacked in Anybody 800 48px Paper text, a Signal 'Get tickets' button at the bottom, and an X icon to close. Escape closes it; focus is trapped inside while open.
   Motion: Overlay slides down from top over 300ms; links stagger in 40ms apart.
2. **Hero poster** — Meta row in JetBrains Mono 400 13px uppercase, three items separated by 2px Ink vertical rules: 'N°01 — A conference on independent web design', 'June 11–12', 'Port Ellery'. Headline: 'KERNFOLK' (the [BRAND] value, uppercase). Under it, a two-column row: left a paragraph in Inter 500 22px, max 30ch: 'Two days of talks, workshops and crits for designers and front-end developers who still hand-build the web.' Right: two buttons, Signal 'Get tickets →' (./index.html#tickets) and an outlined 2px Ink 'See the schedule →' (./schedule.html). Bottom stats row, four cells divided by 2px Ink rules: '2' days, '10' talks, '4' workshops, '3' tracks — number in Anybody 900 64px tabular, label in Mono 13px uppercase Mute.
   Layout: Height min(100vh − 64px, 900px), content laid out in a column with the meta row at top, the headline in the vertical centre spanning all 12 columns, the paragraph/buttons row below, and the stats row pinned to the bottom with a 2px Ink top rule. A Signal circle of diameter 42vw (max 620px) sits behind the right half of the headline, its centre at 72% x / 46% y of the hero, with mix-blend-mode: multiply on the headline text so overlapping ink reads darker. The headline uses Anybody Variable, uppercase, line-height 0.82, centred, white-space nowrap. On mobile (390px) the disc is 70vw centred behind the last three letters, the paragraph and buttons stack, buttons go full width, and stats become a 2×2 grid.
   Motion: Per-letter pointer-reactive weight and width as described in Design → Motion, with the auto-sweep on touch. On load the letters animate from wght 100 / wdth 50 to rest over 900ms, staggered 50ms per letter, and the disc scales in from 0.6 to 1 over 900ms.
3. **Fact marquee** — Items in JetBrains Mono 700 18px uppercase Paper: 'June 11–12', 'Port Ellery', '10 talks', '4 workshops', '3 tracks', 'Poster night', 'No sponsors on stage', 'Coffee all day'. Between items a lucide Asterisk icon 18px in Signal.
   Layout: Full-bleed Ink band, height 56px, items centred vertically with 32px gaps, a single row repeated twice for seamless looping.
   Motion: Continuous leftward scroll, 40s per loop, pause on hover; static under reduced motion.
4. **01 About** — SectionHead '01' / 'About'. Statement: 'Kernfolk is a small, independent conference for people who still hand-build the web. No sponsors on stage, no product demos — ten talks, four workshops and a lot of opinions about type.' Then three columns, each with a Mono 13px uppercase label and an Inter 17px paragraph: 'Talks' — 'Forty-five minutes, one stage, no parallel keynotes. Every talk ends with ten minutes of real questions.'; 'Workshops' — 'Twenty seats each, laptops open. You leave with code you wrote, not slides you photographed.'; 'Crits' — 'Bring a homepage, get honest feedback from people who ship for a living. Kind, specific, fast.'
   Layout: Statement spans columns 3–12 in Anybody 600 at font-stretch 100%, clamp(28px, 3.4vw, 48px), line-height 1.1; columns 1–2 hold a vertical Mono label 'WHY COME' rotated −90°. The three columns sit below in a 3-up grid with 2px Ink top rules, 48px gap. Mobile: statement full width, vertical label hidden, columns stack.
   Motion: Statement reveals line by line (split by sentence), each fading up 16px, 80ms apart.
5. **02 Speakers** — SectionHead '02' / 'Speakers'. Eight cards (name — role, studio — talk — bio): 1) Mara Okonkwo-Felt — Type designer, Halfmoon Type — 'Variable fonts as interface' — 'Draws typefaces for screens first and print second. Has opinions about optical sizes that she will share at length.' 2) Jun Arakawa-Penn — Front-end lead, Fernway — 'CSS that survives five redesigns' — 'Has maintained the same stylesheet through three rebrands and one acquisition. Writes about cascade layers.' 3) Sølvi Brandt — Creative director, Studio Lintel — 'Opening: Why the web still needs posters' — 'Runs a six-person studio that makes identities for cultural venues. Prints her own gig posters on weekends.' 4) Ravi Castellanos — Accessibility lead, Northgrid — 'Contrast is a layout decision' — 'Audits public-sector sites and teaches designers to read a screen reader transcript like a storyboard.' 5) Edda Quist — Illustrator and creative coder — 'Generative art without the gimmick' — 'Makes plotter drawings from code and code from plotter drawings. Teaches SVG to people who think they hate maths.' 6) Nnamdi Hale — Performance engineer, Lowtide — 'The 14 KB homepage' — 'Gets landing pages under one round trip for a living. Will audit your site in the hallway if you ask.' 7) Clio Marchetti-Sun — Design systems, independent — 'Tokens for small teams' — 'Builds design systems for teams of three to thirty. Believes most components should be deleted.' 8) Tove Lindqvist-Reyes — Motion designer, Paper Engine — 'Motion that respects the reader' — 'Animates interfaces for news sites and insists every transition must earn its 200 milliseconds.' Below the grid a link 'Full schedule →' to ./schedule.html.
   Layout: 4-column grid on desktop, 2 on tablet and mobile, zero gap with collapsed 2px Ink borders (each card has right and bottom borders; the grid has top and left borders). Each card is a button element with aria-expanded: Portrait SVG at 4:5 aspect on top, then 20px padding with the name in Anybody 800 at font-stretch 90% 24px, role and studio in Inter 400 14px Mute, and the talk title in Mono 400 13px with a 10px Signal square bullet. Bio panel: absolutely positioned over the bottom 55% of the portrait, Ink background, Paper Inter 15px text, 20px padding.
   Motion: On hover or focus (desktop) or tap (touch, toggles aria-expanded) the bio panel slides up from translateY(100%) to 0 over 240ms ease-out, and each portrait shape rotates by its own preset angle (±8–20°) over 400ms. Card background shifts from Paper to Shade on hover.
6. **Portrait generator (component used by Speakers)** — Portrait.tsx renders a 240×300 SVG from the speaker name. Seed = FNV-1a 32-bit hash of the name; random = mulberry32(seed). Background rect fill Shade. Draw exactly three shapes picked from [full circle, half circle, quarter circle, square, triangle, 3-stripe band], each with random position inside the frame (may bleed off the edge), size 90–200px, rotation in multiples of 45°. Shape 1 is Ink, shape 2 is Signal with mix-blend-mode multiply, shape 3 is Paper. Add a 2px Ink frame line inset 12px. The same name always produces the same portrait.
   Layout: Fills the portrait area of each speaker card, preserveAspectRatio xMidYMid slice, aria-hidden with the speaker name provided by the card text.
   Motion: Shapes carry CSS transition transform 400ms so the card hover can rotate them.
7. **03 Venue** — SectionHead '03' / 'Venue'. Left column: venue name 'The Print Hall' in Anybody 800 40px, address '14 Ropewalk Lane, Port Ellery' in Mono 15px, a paragraph 'A former print works by the river, now one big room, two workshop studios and a courtyard for poster night.' Then three rows with lucide icons (24px, stroke 2) and Inter 16px text: TrainFront — '8 minutes on foot from Harbour Station'; Bike — 'Covered bike racks at the north gate'; Accessibility — 'Step-free entrance, hearing loop in every room'.
   Layout: Columns 1–5 text, columns 6–12 map. The map is an inline SVG viewBox 0 0 700 520 inside a 2px Ink frame: Shade land; a river as a 56px-wide Paper-coloured band with a 2px Ink edge on each side, curving from (0,430) through (350,380) to (700,450); five streets as Ink strokes — Ropewalk Lane horizontal at y=210 (6px), Tanner Street horizontal at y=110 (3px), Quay Road following the river 40px above it (6px), Mill Row vertical at x=240 (3px), Bell Street vertical at x=470 (3px); a railway as a 4px Ink line with 10px white dashes from (0,60) to (700,160) and a 24×12 Ink rect labelled 'HARBOUR STATION' at (90,70); blocks between streets filled with 45° Ink hatching at 8% opacity. Street labels in JetBrains Mono 400 11px uppercase Mute along the streets. Venue pin at (470,210): a Signal circle r=14 with a 3px Ink ring, a pulse ring behind it, and a Mono 700 12px label 'THE PRINT HALL' on an Ink tag to its right. A small north arrow and a 100 m scale bar sit bottom-left. Mobile: map goes full width above the text.
   Motion: When the map is 30% in view, every street and the railway draw in using stroke-dashoffset from full length to 0 over 1200ms, staggered 120ms; then the pin drops from 20px above with opacity 0→1 over 300ms; the pin's pulse ring runs the pinpulse keyframe continuously.
8. **04 Tickets** — SectionHead '04' / 'Tickets'. Three tier cards: 1) 'Early Bird' — '€190' — 'Both days, all talks, poster night' — state SOLD OUT. 2) 'Regular' — '€290' — label 'Most picked' — 'Both days, all talks, one workshop seat, poster night, lunch both days' — button 'Get Regular →'. 3) 'Studio Pack' — '€1,240' — 'Five Regular tickets for one team. Swap names any time before the event.' — button 'Get Studio Pack →'. Under the cards a Mono 13px line: 'Twenty free community tickets are held for students and people between jobs — see the FAQ.' Tier buttons open TicketDialog: a native <dialog> with title 'Tickets open through our ticketing partner', body 'This page is a static site and does not take payments. Link this button to your ticket provider.', and a 'Close' button.
   Layout: 3-column grid with 24px gaps, each card 2px Ink border, 32px padding: tier name in Mono 700 14px uppercase, price in Anybody 900 at font-stretch 110% 72px tabular, a 2px rule, feature text in Inter 16px, button pinned to the bottom (full width, 56px tall). The Regular card is inverted: Ink background, Paper text, Signal button, and a Signal 'Most picked' tag hanging over the top border on the right. The Early Bird card shows the sold-out state: price struck through by a 4px Signal line, text in Mute, a 'SOLD OUT' stamp in Anybody 900 32px Signal with a 3px Signal border rotated −12° over the card centre, and a disabled button 'Sold out' (aria-disabled, Shade background, not clickable). Mobile: cards stack, Regular first.
   Motion: Cards fade up 24px staggered 100ms on reveal; the stamp lands with a scale from 1.4 to 1 and opacity 0→1 over 260ms after the cards. Dialog fades and scales from 0.96 to 1 over 180ms.
9. **05 FAQ** — SectionHead '05' / 'FAQ'. Six questions and answers: 'Is there a code of conduct?' — 'Yes. It applies to talks, workshops, poster night and every chat channel. Three named volunteers handle reports on site.'; 'Are the talks recorded?' — 'Main stage talks are recorded and published a month later. Workshops and crits are not recorded.'; 'Is the venue accessible?' — 'Step-free from the street, a hearing loop in every room, quiet room on the first floor, and reserved seats at the front.'; 'Can I get a refund?' — 'Full refund up to 30 days before the event. After that you can transfer your ticket to someone else for free.'; 'How do the community tickets work?' — 'Twenty free places for students and people between jobs. Write two sentences about what you build; we pick by lottery.'; 'Is food included?' — 'Lunch and coffee both days on Regular and Studio Pack tickets. Vegetarian by default, vegan and gluten-free on request.'
   Layout: Columns 1–4: a Mono 13px note 'Still stuck? [email protected]' as a mailto link. Columns 5–12: accordion list, each item a button row with 2px Ink top rule (and bottom rule on the last), question in Anybody 600 at font-stretch 95% 28px (22px mobile), a lucide Plus icon 28px on the right; the answer is Inter 17px Mute, max 60ch, 24px bottom padding. Only one item is open at a time; the first is open by default. Buttons have aria-expanded and aria-controls.
   Motion: Answer height animates 0 → auto over 240ms (Motion AnimatePresence with height), the Plus rotates 45° to form an X, and the open question's text turns Signal.
10. **CTA band** — Big line: 'Two days. One room full of people who care about type.' Button 'Get tickets →' (./index.html#tickets) and a text link 'Read the schedule' (./schedule.html).
   Layout: Full-bleed Signal background, 120px vertical padding, line in Anybody 900 at font-stretch 80% uppercase, clamp(44px, 7vw, 120px), line-height 0.9, Ink text, max 14ch; the button is Ink with Paper text and sits below with the link next to it. A large Ink circle 30vw is half-cropped off the right edge with mix-blend-mode multiply.
   Motion: The line reveals word by word, each word rising 30px with opacity 0→1, 60ms apart.
11. **Footer** — Wordmark, then 'June 11–12 · The Print Hall · Port Ellery'. Link columns: 'Event' (Schedule, Speakers, Venue, Tickets, FAQ — file-name links), 'Contact' ([email protected], Code of conduct → ./index.html#faq). Bottom row: '© Kernfolk. All names and content are fictional.' and, on the right, the credit link if kept.
   Layout: Ink background, Paper text, 80px top padding. The wordmark is giant: 'KERNFOLK' in Anybody 900 at font-stretch 140%, width filling the container (fit with the same fit function as the hero), Paper, sitting at the very bottom of the footer and cropped by 12% at the baseline. Link columns above it in a 12-column grid (3 cols each), Mono 13px uppercase headings, Inter 15px links with Signal hover. Bottom row Mono 12px Mute with a 1px Paper/20% top rule.

### Schedule (`schedule.html`)
1. **Header** — The same Header component as the home page, with the Schedule link marked active.
   Layout: Identical to the home page header.
2. **Schedule poster title** — Meta row in Mono 13px uppercase: 'Kernfolk', 'June 11–12', 'All times local'. Headline 'SCHEDULE' using the same PosterHeadline component. A one-line Inter 500 20px intro: 'Ten talks, four workshops, two crits and one poster night across three tracks.'
   Layout: Height 60vh (min 420px), headline fit to width with the same fit rule as the hero but capped at 220px, no disc; instead a Signal 80px square sits at the top-right corner of the headline box with mix-blend-mode multiply. 2px Ink rule at the bottom.
   Motion: Same pointer-reactive letters and auto-sweep as the home hero, same reduced-motion fallback.
3. **Controls bar** — Day tabs: 'Day 1 — Thu 11 June' and 'Day 2 — Fri 12 June'. Track chips: 'All tracks', '● Main Stage', '■ Workshop Room', '▲ Studio Talks' (the symbol is drawn as a 10px SVG shape in Ink before the label). Count on the right: 'Showing 11 of 11 sessions' (updates live; break rows are not counted).
   Layout: Sticky under the header (top 64px), Paper background, 2px Ink bottom border, 16px vertical padding. Left: tabs as a segmented control (role=tablist, two role=tab buttons, 48px tall, Anybody 800 at font-stretch 90% 18px; active tab Ink background Paper text, inactive transparent with 2px Ink border). Middle: chips 36px tall, 2px Ink border, Mono 400 13px uppercase; active chips Ink background Paper text. 'All tracks' is active when no track is selected; clicking a track toggles it (multi-select), clicking 'All tracks' clears the selection. Right: count in Mono 13px Mute. Mobile: tabs full width on the first row, chips scroll horizontally on the second row, count hidden. The active day is stored in the URL hash (#day-1 / #day-2) and restored on load; arrow keys move between tabs.
   Motion: Active tab and chip fills cross-fade in 150ms.
4. **Session list** — Each session: time range, track, title, speaker(s). Break rows (track 'All') are always shown regardless of filters. Day 1: 08:30–09:30 Doors and coffee (All); 09:30–10:15 Opening: Why the web still needs posters — Sølvi Brandt (Main Stage); 10:30–11:15 Variable fonts as interface — Mara Okonkwo-Felt (Main Stage); 10:30–12:30 Workshop: A type scale in CSS clamp() — Clio Marchetti-Sun (Workshop Room); 11:30–12:15 Contrast is a layout decision — Ravi Castellanos (Studio Talks); 12:30–14:00 Lunch in the courtyard (All); 14:00–14:45 CSS that survives five redesigns — Jun Arakawa-Penn (Main Stage); 14:00–16:00 Workshop: SVG maps by hand — Edda Quist (Workshop Room); 15:30–16:30 Open crits: bring a homepage — Kernfolk crew (Studio Talks); 17:00–17:45 Lightning talks, six × five minutes — Community (Main Stage); 19:00–22:00 Poster night at the Print Hall (All). Day 2: 09:00–09:30 Coffee (All); 09:30–10:15 The 14 KB homepage — Nnamdi Hale (Main Stage); 10:30–11:15 Tokens for small teams — Clio Marchetti-Sun (Studio Talks); 10:30–12:30 Workshop: Motion, reduced-motion first — Tove Lindqvist-Reyes (Workshop Room); 11:30–12:15 Generative art without the gimmick — Edda Quist (Main Stage); 12:30–14:00 Lunch in the courtyard (All); 14:00–14:45 Motion that respects the reader — Tove Lindqvist-Reyes (Main Stage); 14:00–16:00 Workshop: Variable font playground — Mara Okonkwo-Felt (Workshop Room); 15:30–16:30 Portfolio reviews — Sølvi Brandt and Ravi Castellanos (Studio Talks); 16:45–17:30 Closing panel: Small studios, long careers — Jun Arakawa-Penn and Nnamdi Hale (Main Stage); 17:30–19:00 Farewell drinks (All). Empty state when filters hide every session on that day: 'Nothing on this track today.' with an outlined button 'Show all tracks' that clears the filter.
   Layout: A list of rows, each with a 2px Ink top border, 24px vertical padding, on a 12-column grid: columns 1–2 start time in Anybody 800 at font-stretch 80% 40px tabular with the end time below in Mono 13px Mute; columns 3–4 track symbol and name in Mono 13px uppercase; columns 5–10 title in Anybody 600 at font-stretch 95% 26px and speaker in Inter 15px Mute; columns 11–12 duration ('45 min', '2 h') right-aligned in Mono 13px. Workshop titles get a Mono 11px 'WORKSHOP · 20 SEATS' tag above. Break rows have Shade background, a single line: time in Mono 15px and label in Inter 500 16px, 14px vertical padding. Row hover: a 6px Signal bar appears on the left edge. Mobile: time and track on the first line (time in Mono 700 15px), title and speaker below, duration hidden.
   Motion: When the day or filters change, rows animate with Motion AnimatePresence and layout: leaving rows fade out and move 8px up over 160ms, entering rows fade in from 8px below over 200ms staggered 25ms, remaining rows slide into place via layout animation. Switching days fades the whole list out and in (180ms). Instant under reduced motion.
5. **CTA band and footer** — The same CTA band and Footer as the home page.
   Layout: Identical components to the home page.

## Assets
- font: Anybody Variable (wdth + wght axes) via @fontsource-variable/anybody/wdth.css, Inter Variable via @fontsource-variable/inter, JetBrains Mono 400 and 700 via @fontsource/jetbrains-mono. All installed from npm and bundled by Vite; nothing loaded from a font CDN.
- icon: lucide-react only: Menu, X, Asterisk, ArrowRight, Plus, TrainFront, Bike, Accessibility. Track symbols (circle, square, triangle) are tiny inline SVG shapes, not icons.
- image: No bitmap images. The hero disc is CSS, speaker portraits are generated SVG (Portrait.tsx), the venue map is a hand-written inline SVG (VenueMap.tsx), and public/favicon.svg is drawn by hand. Create ASSETS.md at the project root listing the three font packages and lucide-react with their npm URLs, authors and licenses (OFL-1.1 / ISC), and noting that all artwork is drawn in code.

## Don'ts
- No backend: no server code, API routes, databases, auth, analytics or third-party APIs. Ticket buttons open a local dialog; no form submits anywhere.
- No checkout, payment widget or embedded ticketing script.
- No CDN <script> or <link> tags. Fonts are self-hosted through Fontsource packages; never load fonts.googleapis.com, fonts.gstatic.com or any other font CDN.
- No source maps in the production build and no src/ files copied into dist/. Keep dist/ under 20 MB.
- Every internal link points to a file name (./index.html, ./index.html#tickets, ./schedule.html), never to a bare directory or /. Use relative asset paths (Vite base './').
- No photos of people and no real likenesses: speaker portraits are only the generated abstract shapes.
- No real conference names, logos, wordmarks or slogans; no real speaker names, venues, addresses or sponsors. All names in the content are invented.
- No map tiles or embeds from any map provider; the venue map is inline SVG only.
- No commercial or custom fonts; only the three OFL families listed.
- No sponsor logo strip and no brand logos of any kind.
- No rounded corners, gradients, drop shadows or glassmorphism; flat paper, ink and one accent only. Do not add a second accent colour.
- Do not let the poster headline wrap or overflow at any pointer position or viewport width.
- Must work at 1440×900 and 390×844 with zero console errors, full keyboard access (tabs, chips, accordion, speaker cards, dialog, mobile menu) and visible focus rings.
- Respect prefers-reduced-motion as described in Design → Motion.
- No SEO extras: no meta descriptions, Open Graph tags, JSON-LD or sitemap. A plain <title> and the SVG favicon only.

---
— Prompt by VibeFather · https://vibefather.ai/t/overprint · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.