Marcus Graduates

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Alfa Slab One is sturdy and collegiate like a varsity letter; Mukta is plain and even beside it, so the details read easily.

• Alfa Slab OneHeadings: the year, his name and headlines
• MuktaBody: details, forms and body

Who it is for

• Family, neighbors and teachers dropping by the open house
• Friends from school
• The parents planning food for the afternoon

Layout

1. Top bar: MARCUS 27 in Alfa Slab One and RSVP
2. Hero: a pennant shape with "2027", the headline and the open house time
3. Ceremony and open house cards with times, places and parking
4. RSVP form with a drop-in time window
5. What is next: the college, the major, and one line in his words
6. Then and now: kindergarten and senior photos side by side
7. Grad fund buttons and a footer with family contact

Palette

Proud and bold, like a team pennant on the garage: off-white, near-black, a forest green and a highlighter yellow.

• diploma white#f6f6f2
• gown black#121212
• forest green#146c43
• highlighter#f1d302

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card *
• muted *
• primary
• secondary *
• accent
• destructive *

Type scale

Display

Alfa Slab One, the year, his name and headlines

Body

Mukta, details, forms and body

Spacing and imagery

Bold and simple: 72px between sections, a big-number style for the year.

Marcus’s senior photos, one from kindergarten, and a pennant shape in the palette.

Components

• Pennant drawn in CSS clip-path with the year
• Then-and-now photo pair with a highlighter underline on the captions
• Time window radio group that shows how full each hour is

Interactions

• Time windows read the slots endpoint so the parents can spread arrivals across the afternoon
• Add to calendar for the open house

Data

• form rsvp: name, email, number of people, window (when you will drop by: 1-2, 2-3, 3-4, 4-5), note for Marcus

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Each niche site prompt describes a whole small site for one kind of owner: its pages, the records it keeps, the forms it collects and the tools it links to. The rules below apply to every one of them.

### Niche site principles
- The site does the one job its owner needs most (a sign-up, an RSVP, a request, a visit) on the first screen, and every page leads back to it.
- Records the owner adds often (sermons, events, listings, galleries, menus, tour dates) are content collections in `src/content/`, each record with a slug, so a new record gets its page with no code change.
- Tools the owner already pays for or uses (giving, tickets, booking, listing search, ordering) are linked, or framed in an `<iframe>` whose address is in `content.ts`, never rebuilt. With no address, a plain button links out instead, and nothing pretends to work.
- Copy is written for the owner's visitors, specific and plain. Dates, times and places are real fields, never baked into prose.
- The design is this site's own. Its layout, type and motion follow the brief, not a shared template.

### Forms
Every form is a plain HTML form, `<form method="post" action="/__vibld/forms/<name>">`, named as the brief names it (lowercase letters, digits and hyphens). Fields are ordinary named inputs; checkboxes repeat their name; no file uploads. Add a hidden `_next` input with the path to land on, and show a thank-you there when the address has `?submitted=<name>`. Add an empty hidden `_gotcha` input. A script may post it instead with `fetch(form.action, { method: 'POST', body: new FormData(form), headers: { accept: 'application/json' } })`, which answers `{ ok: true }` or `{ ok: false, error }`. A form with limited places lists them in `public/vibld.forms.json` (`{"forms":{"<name>":{"slots":{"field":"<field>","options":{"<value>":<places>}}}}}`), the field a select or radio whose values match those keys exactly; `GET /__vibld/forms/<name>/slots` returns `{ field, options: [{ value, capacity, taken, left }] }`, which the page reads to show what is left and disable full options. vibld adds bot protection when the page is served.

### Engineering baseline
- TypeScript strict mode, small typed components, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- All copy lives in typed content files, so the owner can edit words without touching layout.
- Every form validates on the client, says what went wrong in plain words beside the field, and never claims success it has not had.
- No secrets in the bundle and no third-party scripts beyond Google Fonts; an owner's tool comes in only as a link or a framed page.

### Goal
Build **Marcus Graduates**: a site for a high school graduation open house that gives the ceremony and party details, takes RSVPs with times guests plan to drop in, shows where Marcus is headed next, and offers a grad fund for college.

### Stack
React + TypeScript + Vite, Tailwind CSS and React Router, one route per page. Content collections in `src/content/`, forms posting to vibld (see Forms in the baseline). No backend of its own.

### Pages & layout
- `/` Open house: hero, ceremony, open house, RSVP, what is next, then and now, grad fund

Home, top to bottom:
1. Top bar: MARCUS 27 in Alfa Slab One and RSVP.
2. Hero: a pennant shape with "2027", the headline and the open house time.
3. Ceremony and open house cards with times, places and parking.
4. RSVP form with a drop-in time window.
5. What is next: the college, the major, and one line in his words.
6. Then and now: kindergarten and senior photos side by side.
7. Grad fund buttons and a footer with family contact.

Copy to start from, in `content.ts`: headline "Marcus, Class of 2027", subcopy "Come by the open house on Saturday, June 12, any time from 1 to 5. Food, yard games and congratulations.", primary action "Let us know you are coming".

### Design system
Mood: Proud and bold, like a team pennant on the garage: off-white, near-black, a forest green and a highlighter yellow.

Palette: diploma white `#f6f6f2`, gown black `#121212`, forest green `#146c43`, highlighter `#f1d302`. Tokens: background `#f6f6f2`, foreground `#121212`, primary `#146c43` with `#f6f6f2` labels, cards `#e8e8e5`, accent `#f1d302`.

Type: Alfa Slab One for the year, his name and headlines; Mukta for details, forms and body. Load both from https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Mukta:wght@400;600&display=swap.

Corners: 0px on controls, 4px on cards, 8px on large panels. Spacing: Bold and simple: 72px between sections, a big-number style for the year.

Imagery: Marcus’s senior photos, one from kindergarten, and a pennant shape in the palette. Use the owner's photos where the project has them. Without them, use the project's stock photos, or shapes and color from the palette; never a stock photo of people at desks.

### Components & interactions
- Pennant drawn in CSS clip-path with the year
- Then-and-now photo pair with a highlighter underline on the captions
- Time window radio group that shows how full each hour is

Motion:
- Time windows read the slots endpoint so the parents can spread arrivals across the afternoon
- Add to calendar for the open house

The signature motion is: the pennant flutters once on load, from the pole outward, and settles. Keep it to that one; everything else is a 150 to 300ms state change. With prefers-reduced-motion, it and every reveal are still.

### Data & state
Collections:
- None: every page reads `content.ts`.

Forms:
- `rsvp`: A guest says when they will stop by. Fields: name, email, number of people, window (when you will drop by: 1-2, 2-3, 3-4, 4-5), note for Marcus. Places are limited per window: 1-2 40, 2-3 40, 3-4 40, 4-5 40.

Linked tools:
- Ceremony livestream from the school, if there is one.

Gift funds: Gift funds are buttons to the owner's payment apps, from `content.ts`: Venmo (`https://venmo.com/u/<handle>`), PayPal (`https://paypal.me/<handle>`) and Zelle, which has no web link, so it shows the email or phone the owner gives with a copy button. Each fund has a name, a line on what it is for and an optional goal shown as words, not a progress bar the page cannot keep true. Leave out any app the owner has not filled in. The site never takes a card number itself.

### Accessibility
WCAG 2.2 AA. Every control has a visible focus ring and a 44px target, every form field a visible label, and errors are announced. Dates and times are written out ("Sunday, March 8, 10:30 AM"), not only shown in a grid. Images have alt text that says what is in them. Verified contrast: body text on the page #121212 on #f6f6f2 17.29:1; text on cards #121212 on #e8e8e5 15.25:1; secondary text on muted surfaces #4b4b4a on #e4e4e0 6.85:1; secondary text on the page #4b4b4a on #f6f6f2 8.06:1; label on the primary action #f6f6f2 on #146c43 5.95:1; label on secondary surfaces #121212 on #e8e8e5 15.25:1; label on the accent #121212 on #f1d302 12.54:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #146c43 on #f6f6f2 5.95:1.

### Security
No third-party scripts other than Google Fonts. Framed tools are `<iframe>`s from the owner's own address with a `title`, `loading="lazy"` and `referrerpolicy="strict-origin-when-cross-origin"`. Forms cap input length and carry the empty `_gotcha` field.

### Performance & SEO
Images as AVIF or WebP with width and height, the first one eager and the rest lazy. Preconnect to Google Fonts. Each page has its own title and description from content, and records' pages take theirs from the record. Structured data where it fits: Event.

### Guardrails
- Avoid: Mortarboard clip art, confetti everywhere, a real school’s name or colors unless the family adds them, and "the tassel was worth the hassle".
- One primary action per screen, one accent color, at most six top-level links.
- No carousel in the hero, no mega menu, no emoji or clip-art icons, no hard offset shadows, no purple-to-blue gradient.
- The names in it are invented. Use no real organization's or person's name, logo or trademark.

Open the builderAll templatesThis palette on its own