Polyglot Commons

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

Two neutral sibling sans families with coverage for almost every script, apt for a language-learning brand that must show many languages.

• Noto Sans DisplayHeadings: hero 60px 800, section titles 36px bold
• Noto SansBody: descriptions 16px, slate

Who it is for

• Private language schools
• Adult learners and professionals
• Parents enrolling teens
• Corporate training coordinators

Layout

1. White sticky header: graduation-cap logo + name left, links (Programs, Instructors, Schedule, Success Stories, Contact) center, an outlined indigo placement-test button and an amber enroll button right
2. Full-width hero: classroom photo under an indigo overlay, bold white headline, subcopy, an amber placement-test button and an outlined programs button
3. Stats strip (years, students, instructors)
4. Program cards in 3 columns for eight languages with level badges and a link to all programs
5. Why-us section: three columns with green check icons
6. Student success stories
7. CTA band
8. Inner pages: programs, schedule with filters and capacity bars, instructor profiles, success stories, placement test, enrollment wizard, contact with FAQ

Palette

optimistic, clear, trustworthy, energetic, educational. The indigo and amber pairing reads as a modern learning brand.

• background#f9fafb
• primary indigo#4f46e5
• accent amber#f59f0a
• text#1a212d
• success green#059669
• card#ffffff
• border#e5e7eb
• indigo overlay/decoration#6467f2
• secondary text#4b5563
• seats bar amber#b45309

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour 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

Noto Sans Display ExtraBold 800, 60px hero, 36px Bold section titles

Body

Noto Sans 16px, weight 400, line-height 1.6; slate #4b5563 descriptions

Two neutral sans families for a clear, institutional-yet-friendly tone.

Spacing and imagery

1248px container, 3-column grids, 96px sections alternating white and gray-50, 12px radius cards and buttons.

Diverse classroom photography tinted with an indigo overlay; flag or language icons on program cards; check-mark icons; instructor headshots.

Components

• Sticky header with dual CTAs
• Overlay photo hero
• Stats counters
• Program cards with level and format badges and price
• Feature columns with check icons
• Schedule table with language filter
• Capacity bars with auto-disabled Reserve buttons
• Instructor profile cards and pages (ratings, certifications)
• Success story cards with before/after levels
• Placement quiz with progress
• Five-step enrollment wizard
• FAQ accordion
• Contact form

Interactions

• Language dropdown filters the schedule in real time
• Capacity bars change color as classes fill; Reserve disables when full
• Quiz progresses question by question and recommends a level
• Wizard validates each step and shows a summary
• Accordion expand/collapse
• Mobile hamburger drawer
• Submission toasts

Data

• Program{id, language, level, format, weeks, price, description}
• ClassSection{id, programId, instructorId, days, time, capacity, enrolled, startDate, mode}
• Instructor{id, name, languages[], certifications[], rating, bio, photo}
• Story{student, language, fromLevel, toLevel, months, quote}
• QuizQuestion{id, prompt, options[], correctIndex, weight}
• Enrollment{personal{name, email, phone}, programId, sectionId, level, payment plan, consent}

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
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Polyglot Commons", a website for a language school that teaches eight languages. Prospective students should compare programs, find a class time that still has seats, check their level with a quick placement quiz, and enroll through a guided wizard. Seat availability is the key trust signal.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Select, Table, Progress, RadioGroup, Accordion, Card, Badge, Drawer via Vaul, Toast via Sonner), lucide-react. react-hook-form + zod with one schema per wizard step. TanStack Query ready for a backend. v1 uses typed mock data and a serverless function for submissions. For production, move sections and enrollments to Supabase with a transactional seat decrement.

### Pages & layout
1. **Header**: sticky white bar with logo, five links (the active route is highlighted), an outlined indigo "Placement test" and an amber "Enroll now".
2. **Home**: a hero photo under an indigo overlay with a bold white headline, subcopy, an amber primary and an outlined secondary button. Then a stats row, program cards (language, level range, format badge, from-price) with a "View all programs" link, a "Why us" section with three check-icon columns, success stories and a CTA band.
3. **Programs**: filter by language and format.
4. **Schedule**: a language Select and a table or cards with days, time, instructor, a seats bar and a Reserve button.
5. **Instructors**: grid and profile pages.
6. **Success stories**: before and after level chips, months taken and a quote.
7. **Placement test**: five questions, one at a time, with a progress bar, then a result with a recommended level and matching sections.
8. **Enroll**: five steps (Personal, Program, Schedule, Level, Review and consent).
9. **Contact**: form plus FAQ.

### Design system
Tokens: `--background: #f9fafb`, `--foreground: #1a212d`, `--primary: #4f46e5` (use this AA-safe indigo for text and buttons, with `#6467f2` reserved for overlays and decoration), `--accent: #f59f0a`, `--success: #059669` (check icons and bar fills only), `--warning-bar: #b45309`, `--danger: #dc2626`, `--muted-foreground: #4b5563`, `--card: #ffffff`, `--border: #e5e7eb`, `--radius: 0.75rem`. Fonts: Noto Sans Display 700/800 for headings and Noto Sans 400/500 for body. Scale: 60/36/24/18/16/14px. Spacing: 8px base, 96px sections with alternating white and gray bands. Shadow: `0 1px 3px rgb(0 0 0/.08)`, raised on hover. Motion: 200ms transitions; quiz question slide 250ms.

### Components & interactions
- Seats bar: `--success` under 70%, `--warning-bar` at 70 to 90%, `--danger` when full, always with a text label ("3 seats left"). A full class shows "Full" on a disabled button with an optional "Join waitlist" link.
- Schedule filter: the Select updates the URL; an empty state appears when no classes match.
- Quiz: options are a RadioGroup; Next is disabled until answered; the result can be retaken.
- Wizard: step indicator; the Schedule step only lists sections with seats; Review lets you edit any step; the final submit has loading, success and error states.
- FAQ accordion, amber buttons with dark text, and indigo buttons with white text.

### Data & state
Types: `Program`, `ClassSection{id, programId, instructorId, days, time, capacity, enrolled, mode}`, `Instructor`, `Story`, `QuizQuestion{prompt, options, answer, level}`. Wizard state lives in one form context (in memory and sessionStorage). The quiz score maps to CEFR-style levels A1 to C1. Seed fictional instructors and students and 20 sections with varied fill.

### Accessibility
Amber `#f59f0a` fails with white text, so use dark text `#1a212d` on amber buttons. The hero overlay is `rgb(49 46 129 / .8)`, which keeps white text above 6:1 even over white. The schedule table needs a caption and scoped headers, and seats bars use `role="progressbar"` with value text. Quiz feedback should not rely on color. The wizard announces step changes. Use focus-visible rings and reduced-motion support. Verified contrast: secondary #4b5563 on #f9fafb = 7.23:1; indigo button #ffffff on #4f46e5 = 6.29:1; amber button #1a212d on #f59f0a = 7.58:1; hero #ffffff on #5a589a = 6.37:1.

### Security
Validate enrollment and contact on the client and server with zod, and add a honeypot and rate limit. Check seat availability again on the server before confirming. Collect no payment data (use hosted checkout later), keep API keys only in function env, and minimize minors' data by requiring guardian consent where age is under 18.

### Performance & SEO
Code-split the quiz and wizard routes and lazy-load instructor photos. Add EducationalOrganization and Course JSON-LD and per-program meta. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder imagery only, with no real school names or certification logos.
- Label sample student stories as examples.
- Store only the enrollment fields needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the schedule filter works; full classes cannot be reserved; the quiz recommends a level and links to sections; the wizard validates and shows a summary; amber buttons pass contrast.

Open the builderAll templatesThis palette on its own