Leafprompt

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

Teachers is a friendly, open sans made for learning materials, and its bold has the cheerful workshop feel the cartoon mascots need without turning childish.

• TeachersHeadings: hero 64px 700, -0.015em; H2 48px 700; card titles 32px 700
• TeachersBody: body 16px/1.6 400, eyebrow pills 14px 600, 600 'Prompt:' labels

Patterns

• announcement bar above floating rounded nav
• split hero with mascot illustration
• tinted pill eyebrow with icon on every section
• rating row under hero CTA
• placeholder logo marquee
• three colour-blocked feature cards (teal, lime, black)
• dashed-border callout card beside a photo
• side-by-side comparison: crossed list vs checked list
• isometric puzzle-piece integrations illustration
• prompt example cards grouped by labelled dashed tabs
• three-tier pricing ($0 / low / mid)
• big-number stats row
• FAQ accordion
• closing CTA band

States it is designed for

• Copy-to-clipboard success and failure (clipboard blocked) messages
• Sample-request form: validation, submitting, success, error with retry
• Pricing: selected tier highlight; free tier CTA differs from paid
• Stats before count-up show final values for reduced motion and no-JS
• Checkout redirect loading state on paid tiers
• Long prompt text wraps inside the card without overflow

Who it is for

• Packaging and brand designers adopting AI tools
• Content and performance marketers
• Small creative agencies
• Founders selling AI-assisted design services

Layout

1. Announcement bar (dark teal, sparkle icon, one-line offer) above a floating nav: logo left, links (Product, Solutions, Learn, Pricing, Enterprise), dark 'Contact sales' and lime 'Get a sample' buttons right; collapses to a rounded pill with hamburger on mobile
2. Hero split: left pill eyebrow, bold two-line headline, short paragraph, lime CTA with rocket icon + 'one-time purchase' note, five-star row with trust caption; right a cluster of friendly geometric mascots around an 'AI' chip illustration
3. Placeholder logo marquee
4. Library section: centered pill + heading + sub, then three equal colour-blocked cards (teal / lime / near-black) each with a big title, sentence and icon list
5. Use-case section: left-aligned heading, then a photo on the left and a dashed lime-bordered callout on the right with a checklist
6. Comparison: two dashed cards side by side, 'typical approach' with red crosses vs 'our library' with teal checks, each with a small mascot
7. Integrations: heading left, isometric puzzle board of app tiles with a mascot
8. Prompt examples: labelled category chips each followed by a tinted prompt card
9. Pricing: three cards (free / starter / pro), dark highlighted middle card
10. Social proof: rating and download-count stats, testimonial cards, growth stats
11. FAQ accordion, final CTA band, footer
12. Mobile: hero illustration moves below copy, cards stack, nav becomes a floating pill

Palette

playful, bright, helpful, energetic, practical. A cheerful workshop where cartoon shapes hand you ready-made prompts.

• page background (warm white)#fefefc
• primary text / dark card#131313
• teal brand (accessible fix)#1f797e
• deep teal (announcement bar, eyebrow text)#165558
• soft teal tint surface#e9f3f4
• lime accent (button, card)#d1e910
• pale lime tint surface#fafde7
• olive text on lime tints (accessible fix)#6e7b09
• negative cross icon#e8352b
• input border#8a8a8a

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

Teachers 700, 64px hero with -0.015em tracking, 48px section headings, 1.15 line-height

Body

Teachers 400, 16px / 1.6; card list items 16px; eyebrow pills 14px 600

Bold, friendly, no italics. Prompt examples set in regular weight inside quotation marks, with a 600 'Prompt:' label.

Spacing and imagery

Comfortable: 120px between sections, 1200px container, 24px card gaps. Cards 16px radius; buttons 12px radius; eyebrow pills 10px radius. Dashed 1.5px borders on callouts and comparison cards. Very light shadows only on the floating nav.

Flat vector mascots (rounded squares and triangles with big eyes) in teal, lime, orange and red, a soft-sky 3D lettering photo, an isometric puzzle of generic app tiles, small rounded-square icons in lists.

Components

• Announcement bar
• Floating nav with two CTAs
• Eyebrow pill with icon
• Rating row
• Logo marquee
• Colour-blocked feature card with icon list
• Dashed callout card with checklist
• Comparison card pair (cross / check lists)
• Integration puzzle illustration
• Prompt category chip + prompt example card with copy button
• Pricing card (three tiers)
• Stat counter
• Testimonial card
• FAQ accordion
• Sample-request form

Interactions

• Logo marquee scrolls continuously; pauses on hover/focus
• Mascots bob gently on idle and tilt toward the cursor on hover
• Stat numbers count up once when scrolled into view
• Prompt cards have a copy button that shows a 'Copied' tooltip
• Buttons darken on hover and show a 2px teal focus ring
• Mobile nav pill expands into a full-height sheet

Data

• PromptCategory{slug, label, tone (teal|lime)}
• PromptExample{id, category_slug, text, tags[]}
• Tier{id, name, price, billing (one_time), features[], highlighted}
• Stat{label, value, suffix}
• Testimonial{quote, name, role, avatar}
• SampleRequest{email, role, use_case, created_at}
• FaqItem{question, answer}

Guardrails

Experience

• Keep the two nav CTAs distinct: dark for sales, lime for the free sample
• State 'one-time purchase' next to every paid CTA
• Comparison lists must be the same length and phrased in parallel
• Mascots are decorative; never place meaningful text inside illustrations
• Show real sample prompts, not lorem ipsum, so visitors can judge quality

Accessibility

• Lime #d1e910 is a fill only; text on lime is always #131313
• Eyebrow and teal text use the darker #1f797e or #165558 to reach 4.5:1
• Crosses and checks carry text or aria-labels, not colour alone
• Marquee and mascot motion stop under prefers-reduced-motion
• Copy buttons are labelled 'Copy prompt: <category>' and announce the result via a live region

Security

• Checkout happens on a hosted checkout provider; the site never touches card data
• Sample-request inserts go through an Edge Function with zod validation, honeypot and per-IP rate limit
• RLS on sample_requests: no anon select; only staff role reads
• Downloads of the purchased pack use short-lived signed URLs

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build the marketing site for **Leafprompt**, a one-time-purchase library of structured AI prompts for packaging designers and brand marketers. The site should feel friendly and useful: cartoon mascots and bright colour blocks up top, then concrete sample prompts, a fair comparison and simple pricing. Conversions are "Get a sample" (free) and "Get the pack" (paid).

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix, lucide-react icons, Motion for marquee, mascot idle motion and count-ups, react-hook-form + zod for the sample form. Supabase Edge Function for sample requests; a hosted checkout provider for payment and a webhook that records purchases.

### Pages & layout
1. **Home**: announcement bar; floating nav (logo, five links, dark "Contact sales", lime "Get a sample"); split hero (eyebrow pill, 64px headline, paragraph, lime CTA + "one-time purchase" note, star rating row) with a mascot illustration right; placeholder logo marquee; library section with three colour-blocked cards (teal, lime, near-black); use-case row (photo + dashed callout checklist); comparison pair; integrations puzzle; prompt examples by category; pricing (three tiers); stats + testimonials; FAQ; CTA band; footer.
2. **Pricing** detail, **Contact sales** form, **Get a sample** form, **Thank-you** page after checkout.
Mobile: announcement bar scrolls away, nav becomes a floating rounded pill with a sheet menu, hero illustration below text, all grids single column.

### Design system
- Colors: `--bg: #fefefc`, `--fg: #131313`, `--teal: #1f797e`, `--teal-deep: #165558`, `--teal-tint: #e9f3f4`, `--lime: #d1e910` (fill only), `--lime-tint: #fafde7`, `--olive: #6e7b09`, `--negative: #e8352b`, `--input-border: #8a8a8a`, `--ring: #1f797e`.
- Fonts: Teachers; hero 64px/1.15 700 with -0.015em tracking; H2 48px 700; card titles 32px 700; body 16px/1.6 400; eyebrow 14px 600.
- Spacing: 8px base; sections 120px (72px mobile); container 1200px; card padding 24px.
- Radius: cards 16px, buttons 12px, pills 10px. Dashed 1.5px borders for callouts.
- Shadows: floating nav only, `0 8px 24px rgba(19,19,19,.08)`.
- Motion: marquee 30s loop; mascot bob 3s ease-in-out 4px; count-up 1.2s.

### Components & interactions
AnnouncementBar, FloatingNav (sheet on mobile), EyebrowPill, RatingRow, LogoMarquee (pausable), ColorBlockCard (tone prop: teal | lime | dark), DashedCallout, ComparisonPair (CrossList / CheckList with icons and text), PuzzleIllustration (static SVG with generic tiles), PromptCategoryChip + PromptCard (copy button, "Copied" tooltip), TierCard (highlighted variant on dark), StatCounter, TestimonialCard, FaqAccordion, SampleForm.

### Data & state
Static JSON for categories, prompts (write 12 fresh examples such as "Draft three label taglines for a refillable hand-soap pouch aimed at eco-conscious parents"), tiers, stats and testimonials (all invented). SampleForm states: idle, invalid, submitting, success, error. Clipboard state per card. Purchases table filled by the checkout webhook.

### Accessibility
Text on lime is always `--fg`. Teal text uses `#1f797e` or `#165558`. Comparison icons have visually hidden "Not included" / "Included" text. Marquee has a pause button; mascots and count-ups respect `prefers-reduced-motion`. Focus ring 2px `--ring`, 2px offset. Body text 16px minimum, labels 14px minimum.
Verified contrast: body text on page: #131313 on #fefefc = 18.40:1; button label on lime: #131313 on #d1e910 = 13.60:1; white text on teal card: #ffffff on #1f797e = 5.13:1; white text on dark card: #ffffff on #131313 = 18.58:1; eyebrow text on teal tint: #165558 on #e9f3f4 = 7.51:1; teal link text on page: #1f797e on #fefefc = 5.08:1; olive label on pale lime: #6e7b09 on #fafde7 = 4.50:1; negative cross icon on page: #e8352b on #fefefc = 4.18:1; focus ring on page: #1f797e on #fefefc = 5.08:1; input border on page: #8a8a8a on #fefefc = 3.42:1.

### Security
Checkout on a hosted checkout provider; verify webhook signatures server-side before inserting into `purchases`. RLS: `purchases` readable only by the matching `user_id`; `sample_requests` insert only via Edge Function (service role), no anon select. Downloads use signed URLs valid 10 minutes. Rate-limit sample requests per IP and include a honeypot.

### Performance & SEO
Mascots as inline optimized SVG; photo served as responsive AVIF. Static generation for all marketing routes. Titles, meta descriptions, OG image with the hero illustration, FAQ structured data. Target Lighthouse 95+.

### Guardrails
- Placeholder logos only; no real integration brand marks. Use generic app tiles in the puzzle.
- All testimonials and stats are sample data until replaced.
- Do not claim model-specific results or name AI vendors.
- Acceptance criteria:
  - [ ] Colour-blocked cards and comparison render from data
  - [ ] Copy-to-clipboard works and announces success/failure
  - [ ] Paid CTA reaches hosted checkout; webhook records purchase; download link works once signed
  - [ ] All contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own