Queueline

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

Red Hat Display is a confident geometric-leaning sans with good tabular figures, which keeps the calm product-launch countdown.

• Red Hat DisplayHeadings: headline 72px 600 at -1.8px, countdown numerals 64px tabular
• Red Hat DisplayBody: body 16px grey, 13px uppercase countdown labels

Who it is for

• Founders validating demand
• Indie hackers running early access
• Teams admitting beta users in batches
• Marketers running launch countdowns

Layout

1. Full-viewport near-black background with soft blurred gray orbs
2. Outlined pill eyebrow 'Get early access'
3. Two-line bold headline and short subcopy
4. Large countdown: DAYS : HOURS : MIN : SEC with tracked labels
5. Bordered form card: full name, email, light 'Join the waitlist' button, 'Join N others' counter with icon
6. Post-signup confirmation with share prompts
7. Admin route: login, sortable signups table, CSV export

Palette

Minimal, mysterious, confident, sleek, anticipatory. A dark stage waiting for the curtain to lift.

• background#010101
• text#f8f8f8
• primary (button light)#eeeeee
• card#060606
• input surface#1b1b1b
• muted text#8a8a8a
• border#3a3a3a

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

Red Hat Display 600, 72px headline with -1.8px tracking; 64px countdown numerals

Body

Red Hat Display 16px gray; 13px tracked uppercase countdown labels (+0.2em)

One geometric sans, big and tight, for a calm, confident product-launch voice.

Spacing and imagery

Everything centered in a ~380px form column under a ~640px headline; 14px radius button and 20px radius card; generous vertical spacing within one viewport.

No imagery; soft blurred monochrome orbs create depth behind the content.

Components

• Pill eyebrow
• Headline block
• Countdown timer
• Signup form card
• Live signup counter
• Confirmation panel
• Share buttons (X, LinkedIn, copy link)
• Admin login
• Sortable admin table
• CSV export button
• Config file for copy and date

Interactions

• Countdown ticking every second
• Form validation and submit loading
• Counter increments after signup
• Confirmation swap with share prompts
• Copy link feedback
• Admin table sorting and search
• One-click CSV download

Data

• Signup{id, name, email, referrer, created_at}
• SiteConfig{headline, subcopy, launchAt, shareText}
• AdminRole{user_id, role}

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 **Queueline**, a minimal pre-launch waitlist page for a fictional product. Visitors see a bold promise, a countdown to launch and a two-field signup; after joining they get a confirmation and prompts to share. The founder signs in to a private admin view to see, sort and export signups. All copy and the launch date come from a single config file.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Input, Button, Table, Toast, DropdownMenu), lucide-react, react-hook-form + zod, date-fns for the countdown, React Router (public page, `/admin`, `/admin/login`). **Supabase**: `signups` table, Auth for the admin, a `user_roles` table with an `admin` role, an RPC or view that returns the public signup count, and an Edge Function for inserts. CSV generated client-side from the admin query.

### Pages & layout
1. **Waitlist (single viewport)** – near-black background with two or three large blurred gray orbs. Outlined pill eyebrow. Two-line headline, short gray subcopy. Countdown with four blocks (days, hours, minutes, seconds), colon separators and tracked labels. Form card with a subtle border: full name, email, a light full-width "Join the waitlist" button, and "Join N others" with a users icon.
2. **Confirmation** – replaces the form: check icon, "You're on the list", position number, share buttons (X, LinkedIn, copy link with `?ref=` code).
3. **Admin login** – email/password or magic link.
4. **Admin dashboard** – count cards (total, today, last 7 days), search, sortable table (name, email, referrer, date), pagination, "Export CSV".

### Design system
- Tokens: `--background: #010101`, `--foreground: #f8f8f8`, `--primary: #eeeeee`, `--primary-foreground: #030303`, `--card: #060606`, `--secondary: #1b1b1b`, `--border: #3a3a3a` (decorative), `--input-border: #696969`, `--muted-foreground: #8a8a8a`, `--radius: 0.625rem`; button radius 14px, card 20px.
- Font: Red Hat Display 400/500/600. Scale: 13 (labels, uppercase +0.2em) / 14 / 16 / 20 / 48 / 64 / 72, display tracking -0.025em, tabular numerals for the countdown.
- Spacing: 8px base; content max 640px; form 380px.
- Motion: orbs drift slowly (40s); countdown digits cross-fade 150ms; form → confirmation fade/scale 250ms.

### Components & interactions
Countdown (running; reached zero → "We're live" with a link), inputs (default, focus ring, invalid with message), submit button (idle, loading spinner, disabled), duplicate email (friendly "You're already on the list"), network error toast, confirmation panel, copy-link button (copied state), admin table (loading skeleton, empty state, sort indicators, search no results), CSV export (disabled when empty), sign-out.

### Data & state
`signups(id uuid, name text, email citext unique, referrer_code text, referred_by text, created_at)`, `user_roles(user_id, role)`. Public count via a security-definer function returning only a number. `siteConfig.ts` holds headline, subcopy, launchAt ISO, share text. Admin data via authenticated queries. Seed ~150 fictional signups for demo.

### Accessibility
Light text on near-black is 19.7:1; muted gray is at least `#8a8a8a` (6.1:1 on the page, 5.0:1 on the `#1b1b1b` input). Inputs need visible labels (visually hidden is fine) plus placeholders only as hints; inputs use `--input-border: #696969` (3:1+ on the input and page) at rest, not only on focus; the `#3a3a3a` card border is decorative. The countdown gets `role="timer"` with `aria-live="off"` and a readable summary. Confirmation moves focus to its heading. Admin table uses `aria-sort`. Orbs are decorative and still under reduced motion.
Verified contrast: body text on near-black #f8f8f8 on #010101 = 19.65:1; muted text on near-black #8a8a8a on #010101 = 6.05:1; muted text on card #8a8a8a on #060606 = 5.87:1; placeholder text on input surface #8a8a8a on #1b1b1b = 4.99:1; input text on input surface #f8f8f8 on #1b1b1b = 16.22:1.

### Security
RLS: `signups` has no public select; inserts only through the Edge Function (zod validation, email normalization, honeypot, per-IP rate limit, optional Turnstile). Admin reads require `has_role(auth.uid(), 'admin')` in policies, never a client-side flag. CSV export escapes cells to prevent formula injection (prefix `=`, `+`, `-`, `@` with a quote). Only the anon key in the client. Referrer codes are random, not emails.

### Performance & SEO
Tiny page: one font family, no images, JS under ~100KB for the public route (admin code-split). Meta title/description from config, OG image with the headline, `noindex` on admin routes. Lighthouse 100 target.

### Guardrails
- Placeholder product name and copy; no real brand logos.
- Don't fake the signup count; show the real number (or hide under a threshold).
- Store only name, email and referral data.
- Small typed components, no `any`, visible errors.
- Done when: signups save once per email; the counter updates; confirmation and share links work; only admins can see and export data; CSV is safe to open in spreadsheets; config edits change copy and date without code changes.

Open the builderAll templatesThis palette on its own