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

# University Admissions Website

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

## Brief
Build a confident one-page admissions site for the invented [BRAND] in [LOCATION], aimed at [AUDIENCE]. The university's identity is a strong crest-free wordmark set in an editorial serif — no seals, crests, shields, mascots, or logo-like marks anywhere. The page anchors on a golden-hour campus quad photograph, then delivers a program finder with level, area, and format filters over eleven invented programs, a campus-life photo strip, an apply-review-decide timeline with round deadline labels, a two-slider cost-and-aid estimator with clearly invented sample figures, and a visit-day sign-up saved locally.

- Audience: [AUDIENCE] — prospective students and the people who help them decide — plus the admissions and marketing teams adapting this structure for a college, conservatory, or training institute.
- Goal: Take a visitor from the quad photograph to a shortlisted program and a held visit-day slot: filter programs to their interests in one interaction, make cost legible with a transparent sample estimator, and leave a visit request saved in the browser with no dead ends.
- Tone: Warm, assured, and specific — the voice of a place that knows its worth without boasting. Editorial headlines, plain supporting sentences, believable invented numbers. Never pompous, never a sales pitch, never a real institution.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), typescript (Apache-2.0), tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/fraunces (OFL-1.1), @fontsource/source-sans-3 (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite 6 + React 18 + TypeScript project with base './', build.outDir 'dist', and build.sourcemap: false. No router, no backend, no server code.
  - Install Tailwind CSS 3.4 with PostCSS and Autrefixer. Extend the theme with the exact palette below and fontFamily.display 'Fraunces' and fontFamily.body 'Source Sans 3'.
  - Self-host Fraunces weights 600 and 700 and Source Sans 3 weights 400, 600, and 700 through @fontsource/fraunces and @fontsource/source-sans-3, imported in src/main.tsx. Never load fonts from a CDN.
  - Use Motion from 'motion/react' (motion, AnimatePresence, useReducedMotion) for filter transitions, reveals, and the estimator tween; gate every animation on useReducedMotion().
  - Keep all copy and data in src/content.ts: brand strings, the wordmark split, hero copy, the eleven program records (level, area, format, one-liner), filter vocabularies, timeline copy, estimator constants and formula, visit-day chips, address, and footer note. When variable values change, rewrite the dependent copy there and derive the wordmark, storage keys, and slugs from [BRAND] so no default-brand remnants remain.
  - Build the crest-free wordmark in code: [BRAND] split so the final word sits on a second line in letterspaced caps (default: 'STONEWATER' large above 'UNIVERSITY' at 0.35em tracking, brass color); never add a crest, seal, shield, or emblem.
  - Persist the shortlist and the visit-day request to localStorage with keys namespaced as [BRAND_SLUG] + '-shortlist' and [BRAND_SLUG] + '-visit-request'; validate restored JSON and recover silently from malformed data.
  - Use only these lucide-react icons: GraduationCap, Bookmark, RotateCcw, MapPin, ArrowRight, ChevronDown, Users, Clock, CalendarCheck, Check.
  - Download the six generated photos to the exact public paths listed in Assets before building. Create ASSETS.md at the project root listing every file's path, source URL, author or generator, and license.
  - A plain <title> of [BRAND] and a favicon (a navy square with the first letter of [BRAND] in Fraunces) are enough; no meta descriptions, Open Graph tags, JSON-LD, or sitemaps.

## Variables
- [BRAND] — University name (default: "Stonewater University"). Invented institution name; the crest-free wordmark and storage keys derive from it.
- [LOCATION] — Location (default: "Millhaven, Vermont"). Town and state the campus sits in; used in copy, address, and alt text.
- [AUDIENCE] — Audience (default: "first-year, transfer, and graduate applicants"). Who the admissions page speaks to.
- [SIGNATURE_STRENGTH] — Signature strength (default: "freshwater science and sustainability studies"). What the university is known for; shapes hero copy, program lines, and campus captions.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/university-admissions-website 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
- Collegiate blue `#1E3A5C` — Primary: buttons, hero scrim, footer band
- Ink navy `#14273E` — Headings and body text
- Warm stone `#F5F0E5` — Page ground and section bands
- Deep stone `#E7DECC` — Rails, chips, and hairline borders
- Parchment `#FDFBF5` — Cards and panels on stone
- Brass `#B08A4F` — Accent: rules, active filters, timeline nodes, slider thumbs
- Slate blue `#4A5871` — Secondary text and meta rows

### Typography
- Display: headlines, wordmark, program names, net-cost figure: Fraunces (OFL), weights 600/700
- Body: paragraphs, filters, meta, forms: Source Sans 3 (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base grid. Content shell max-width 1200px with 32px desktop and 20px mobile side padding. Header 84px. Desktop sections 104px vertical padding, mobile 64px. Program grid gap 20px. Prose max 64 characters per line.
- Radius: Editorial and nearly square: 2px on cards, inputs, and photos; 999px full pills only for filter chips and level tags. Photos sit on a 1px deep-stone border with an 8px brass top rule on hover or featured cards.
- Motion: Hero: the quad photograph settles from scale 1.06 to 1 over 900ms under a navy scrim that fades from 55% to its resting gradient; headline lines rise 18px with a 90ms stagger.
- Motion: Program finder: filtered cards exit and enter with 200ms fade-and-slide via AnimatePresence; the results count crossfades 160ms; the Bookmark toggle pops to 1.12 and fills brass over 180ms.
- Motion: Estimator: the net-cost number tweens over 320ms while the stacked cost bar re-partitions with 320ms width transitions; slider thumbs carry a 2px brass focus ring.
- Motion: Sections reveal once on scroll: 16px rise with a 480ms ease-out fade, sibling cards staggered 60ms.
- Motion: With prefers-reduced-motion: reduce, every transition above becomes a 100ms opacity change. No parallax, no scroll-jacking, no custom cursor, no autoplay media.
- Imagery: One photographic set, one golden-hour shoot: campus stone architecture, a riverwalk, studios, and green quads in a single warm grade — honeyed highlights, long shadows, soft haze, deep blue shadows, 35mm lens. Students appear only distant and from behind; no identifiable faces, no readable signage, no real landmarks. The wordmark, filter UI, timeline, and estimator are code-drawn; no crest, seal, or emblem is ever drawn.

## Pages & Sections
### [BRAND] — Admissions (`index.html`)
1. **Header and hero** — Header (84px, parchment at 92% with backdrop blur, 1px deep-stone bottom rule): the crest-free wordmark — [BRAND] set in Fraunces 700 caps with the final word on a second line in 0.35em brass letterspacing (default 'STONEWATER' over 'UNIVERSITY'); nav anchors Programs, Campus life, Admissions, Cost & aid; right-aligned collegiate-blue pill 'Sign up for a visit'. Hero: full-bleed 16:9 golden-hour quad photograph under a navy scrim deepening to 65% at the left; eyebrow 'ADMISSIONS · [LOCATION]'; H1 'Study where the river bends.'; paragraph '[BRAND] is a university of 11,400 students built on small seminars, [SIGNATURE_STRENGTH], and quads that actually get used. Filter our programs, sketch a sample net cost, and come walk the riverwalk yourself.'; buttons 'Explore programs' (brass fill, ink-navy text) and 'Sign up for a visit day' (white outline, white text). Stat strip under the buttons: '11,400 students · 140+ programs · 15 : 1 student–faculty ratio · 86% receive aid'.
   Layout: Full-height hero (minimum 640px): the photo is absolutely positioned with object-cover; content sits in the shell, bottom-left aligned, max-width 640px. H1 in Fraunces at clamp(44px, 5.2vw, 72px), line-height 1.04, white. The stat strip is a glass band (white at 12%) with brass hairline dividers between four stats. Mobile: the photo becomes a fixed 16:9 block with a heavier scrim, the H1 drops to clamp(34px, 9vw, 44px), and stats wrap into a 2-by-2 grid; all tap targets at least 44px.
   Motion: Photo settles from 1.06 over 900ms; the eyebrow, H1, paragraph, buttons, and stats rise 18px with a 90ms stagger; the scrim fades in first over 400ms.
2. **Program finder** — Warm-stone section. Eyebrow 'FIND YOUR FIT'; title 'Programs, filtered your way.'; intro line 'Eleven of our most-asked-about programs below — the full catalog lists 140+. Shortlist the ones you like.' Filters, each single-select: Level [All, Undergraduate, Graduate]; Area [All, Arts & Humanities, Business, Computing, Science & Engineering, Health & Education]; Format [All, On campus, Hybrid, Online]. A 'Reset filters' text button with a RotateCcw icon appears whenever any filter is active. Results header 'Showing 11 of 11 programs' updates live. The eleven program records (level · area · format · one-liner): 'B.A. Environmental Humanities' (Undergraduate · Arts & Humanities · On campus) 'Literature, ethics, and the living world, taught beside the river.'; 'B.S. Computer Science' (Undergraduate · Computing · On campus) 'Systems and software craft, capped by a build for a regional partner.'; 'B.B.A. Sustainable Business' (Undergraduate · Business · Hybrid) 'Markets and supply chains with the long view built in.'; 'B.S. Freshwater Science' (Undergraduate · Science & Engineering · On campus) 'Rivers, lakes, and fieldwork from week one — our signature program.'; 'B.S. Nursing' (Undergraduate · Health & Education · On campus) 'Simulation labs first, community clinics from the start.'; 'B.A. Digital Media Design' (Undergraduate · Arts & Humanities · Hybrid) 'Interfaces, motion, and storytelling in studio cohorts.'; 'M.S. Data Engineering' (Graduate · Computing · Online) 'Pipelines and platforms on a part-time calendar.'; 'M.F.A. Creative Writing' (Graduate · Arts & Humanities · Hybrid) 'Short campus residencies between online workshop terms.'; 'M.B.A. for Working Professionals' (Graduate · Business · Hybrid) 'Evening seminars that respect your day job.'; 'M.S. Environmental Policy' (Graduate · Science & Engineering · Online) 'Policy craft for water, land, and climate work.'; 'M.Ed. Learning Design' (Graduate · Health & Education · Online) 'Curriculum and technology for working educators.' Each card: level pill, program name, one-liner, meta row 'area · format', and a Bookmark toggle 'Shortlist'. Empty state: 'No programs match those filters — try clearing one.' with the Reset button. The shortlist persists in localStorage.
   Layout: Desktop: a 280px sticky filter rail on the left with three labeled pill groups; results on the right as a 2-column grid of parchment cards (2px radius, 1px deep-stone border) with uniform heights; the count line sits above the grid in slate blue with a live 'Shortlist (N)' bookmark count beside it. Mobile: the rail becomes three horizontally scrollable chip rows above the grid. Cards get an 8px brass top rule on hover; the Bookmark icon fills brass when active with aria-pressed. The empty state replaces the grid entirely and never dead-ends.
   Motion: Filter changes animate cards with a 200ms fade-and-slide via AnimatePresence; the count crossfades 160ms; the bookmark pop is 180ms; the whole grid reveals once on scroll with a 60ms stagger.
3. **Campus life strip** — Parchment section. Eyebrow 'CAMPUS LIFE'; title 'Stone halls, green quads, a working river.' Four photos with caption cards: 'The main quad at golden hour — where seminars spill outside.'; 'The riverwalk between the library and the boathouse.'; 'Fabrication studios, open late for cohort projects.'; 'Pick-up games on the lower green, most Thursdays.' Supporting line under the strip: 'Eleven hundred acres of it, ten minutes from downtown [LOCATION] by the foot ferry.'
   Layout: Four columns of 4:3 photos with square corners and 1px deep-stone borders; each caption sits in a small parchment card overlapping its photo's bottom edge by 12px (translateY). Tablet 2-by-2; mobile one column with captions still overlapping. Photos use object-cover at a uniform 280px height on desktop.
   Motion: One-time reveal: the four frames rise 16px staggered 70ms; no hover zoom on this strip.
4. **Admissions timeline** — Warm-stone band. Eyebrow 'HOW TO APPLY'; title 'Three steps, two rounds, zero application-fee games.' Vertical timeline: '01 Apply — One essay, one recommendation, your transcripts. Choose the Early round (decisions sooner, no binding promise) or the Regular round.'; '02 Review — Admissions readers reply in four to six weeks. Every application is read twice, by humans.'; '03 Decide — Celebrate, compare, and claim your spot by the national reply window in spring.' Side column: the lecture-hall photograph (4:3) above a 'Which round fits you?' card: 'Early — decisions arrive first, typically within four weeks. Best when [BRAND] is your clear first choice.' and 'Regular — one cycle, six weeks at most. Best when you want to compare offers.' Round labels only; no calendar dates anywhere.
   Layout: Two columns: the timeline occupies 60% as three brass nodes on a 2px deep-stone vertical line, each step a 64px numeral in Fraunces, a title, and two lines of copy; the right 40% holds the photo and the round-compare card (parchment, 2px radius). Mobile: the timeline stacks with the line along the left edge, then the photo, then the compare card.
   Motion: Nodes draw in with a 300ms brass fill as the section reveals, staggered 120ms; the rest is a one-time 16px rise.
5. **Cost and aid estimator** — Deep-stone band. Eyebrow 'COST & AID'; title 'A sample net price, in two sliders.' Slider 1 'Family contribution per year': $0–$60,000, step $2,500, default $15,000. Slider 2 'Living arrangement', three stops: 'On campus', 'Off campus in [LOCATION]', 'With family'. The math, fixed for the sample undergraduate year: tuition & fees $34,800; housing & meals — on campus $12,400, off campus $10,900, with family $4,200; books & supplies $1,100; [BRAND] Grant = max(0, min(28000, round((50000 − contribution) × 0.6 / 100) × 100)). Output card: line items for tuition, housing, and books; a stacked horizontal bar (collegiate blue tuition, slate-blue housing, brass books) with the grant shown as a hatched overlay spanning its share of the total; the big figure 'Sample net cost: $27,300 / year' (default values); and the note 'Invented sample figures for this demo — not a financial aid offer or a promise of aid.' A ghost button 'Ask about aid on a visit' anchors to the visit section.
   Layout: Two columns: sliders left (each with its label, a live value in Fraunces 600, a 44px track, and a brass thumb), output right as a parchment card with the line items, the 18px stacked bar at full card width, and the net figure at Fraunces 600 40px in ink navy. Both controls are native range inputs restyled and fully keyboard-operable, with aria-valuetext like '$15,000 per year' and 'Living on campus'. All currency formatted with thousands separators. Mobile: sliders stack above the output card.
   Motion: The net figure tweens 320ms between values; the stacked bar segments transition width over 320ms; the hatched grant overlay fades in 200ms after the bar settles.
6. **Visit-day sign-up** — Collegiate-blue band with parchment text. Eyebrow 'VISIT'; title 'Come see the golden hour yourself.'; copy 'Pick a weekday and a morning or afternoon slot. Tours leave from Founders Gate, deep-dives start in the program halls, and aid walkthroughs happen in the welcome center — every visit ends on the quad.' Day chips Monday–Saturday; slot chips 9:30, 11:00, 14:00; a three-option segmented control for visit type: 'Campus tour', 'Program deep-dive', 'Aid & cost walkthrough'; name and email inputs (local only); submit pill 'Save my visit-day request'. Confirmation panel: 'Request saved — {day} at {time} · {type}. This demo stores your request in this browser; a live site would send it to the visit office.' with a 'Change my request' link that restores the form filled in. Under the form: 'Prefer a virtual session? Choose any weekday slot and say so in the confirmation step.'
   Layout: A parchment card 760px wide (2px radius) centered on the blue band. Chips are 44px pills; selected day chips fill collegiate blue with parchment text, selected slot chips fill brass with ink-navy text; the segmented control slides a brass thumb. Validate locally: name required, email must match a simple pattern; errors are inline red text. Persist the request to localStorage keyed from [BRAND_SLUG] and restore it on reload. The confirmation is aria-live='polite'. Mobile: the card keeps 20px padding and chips wrap.
   Motion: Chips pop to 1.06 on selection (180ms); the segmented thumb slides 200ms; the confirmation crossfades in 240ms. Reduced motion makes each change instant.
7. **Footer** — Ink-navy footer. Left: the wordmark repeated small; address line '12 Riverwalk Terrace, [LOCATION]'. Middle: anchor nav Programs, Campus life, Admissions, Cost & aid, Sign up for a visit. Right: the note 'This is a fictional university created for a website template — programs, rates, and figures are invented samples.' plus the optional [CREDIT] link. A 2px brass rule sits above the footer content.
   Layout: Three-part flex row on desktop (wordmark block, nav, note), stacked on mobile with 24px gaps. Parchment text on ink navy; the note in slate blue at 13px. No social icons, no newsletter form, no social-proof numbers.
   Motion: Static; no footer animation.

## Assets
- image: Hero quad photograph. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/quad-golden-hour.webp to public/images/quad-golden-hour.webp. Alt: 'A campus quad with stone halls in golden-hour light.' Used as the full-bleed hero anchor under the navy scrim. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Library arcade. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/library-arches.webp to public/images/library-arches.webp. Alt: 'A stone library arcade in warm evening light.' Used in the campus-life strip. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Riverwalk. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/riverwalk.webp to public/images/riverwalk.webp. Alt: 'A riverside path on campus with low sun on the water.' Used in the campus-life strip. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Fabrication studio. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/studio-lab.webp to public/images/studio-lab.webp. Alt: 'A bright fabrication studio with workbenches in late-afternoon light.' Used in the campus-life strip. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Lecture hall. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/lecture-hall.webp to public/images/lecture-hall.webp. Alt: 'A warm wooden lecture hall with tall windows and empty seats.' Used beside the admissions timeline. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Lower green. Download https://media.vibefather.ai/assets/73548a67-9db2-4f00-b518-6ccf6caddb7e/lower-green.webp to public/images/lower-green.webp. Alt: 'Distant students playing on a green lawn at golden hour, seen from behind.' Used in the campus-life strip. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- icon: Install lucide-react and use only GraduationCap, Bookmark, RotateCcw, MapPin, ArrowRight, ChevronDown, Users, Clock, CalendarCheck, and Check. ISC license. Draw no crests, seals, mascots, or brand logos; the identity is the typographic wordmark alone. Record the package and license in ASSETS.md.
- font: Self-host Fraunces weights 600 and 700 through @fontsource/fraunces (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.
- font: Self-host Source Sans 3 weights 400, 600, and 700 through @fontsource/source-sans-3 (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.

## Don'ts
- No real universities, colleges, mascots, seals, crests, coats of arms, shields, monograms, or logo-like marks anywhere. The identity is the typographic wordmark derived from [BRAND] only.
- Photos must show architecture, landscapes, and student life from behind or at a distance — no identifiable faces, no readable signage, no real campuses or landmarks presented as this university.
- Cost figures are invented samples: implement the estimator math exactly as specified, keep every output labeled 'sample', and keep the 'not a financial aid offer' note visible next to the net figure.
- Deadlines use round labels (Early / Regular) and relative copy only — never real calendar dates, countdowns, or anything computed from the visitor's clock.
- All programs, stats, buildings, staff, and aid numbers are invented; never reference accreditation bodies, rankings, athletic conferences, or real institutions.
- Forms are local-only: no submissions, APIs, email, or calendar services anywhere; persist the shortlist and visit request to localStorage only and validate restored data.
- No backend, server code, databases, auth, or analytics. Static output in dist/ from the single build command.
- Self-host fonts through the listed Fontsource packages only; never load Google Fonts, Adobe Fonts, or any CDN stylesheet or script.
- No source maps in production, no src/ copied into dist/, keep dist/ under 20 MB, and keep Vite's base relative.
- No Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, or hotlinked files; use only the six generated photos and original code-drawn UI.
- No SEO work: no meta descriptions, Open Graph tags, JSON-LD, sitemaps, or keyword-stuffed headings. A plain title with [BRAND] and a favicon are enough.
- A filtered program view must never dead-end: always show the empty state with a working Reset, and every internal link is a file name or in-page anchor, never a bare directory.
- Respect prefers-reduced-motion everywhere; no scroll-jacking, parallax, custom cursor, or autoplay media.
- Keep all copy in US English and build brand-derived strings (wordmark, storage keys, slugs, alt text) from [BRAND] and [BRAND_SLUG] so alternate variable values never leave default-brand remnants.
- The site must render at 1440×900 and 390×844 with zero console errors.

---
— Prompt by VibeFather · https://vibefather.ai/t/university-admissions-website · 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.