Levelbook

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

Geist and Chivo Mono are kept as named; a light Geist display with a small mono label is exactly the grown-up, understated finance voice described, in a pairing no other template uses.

• GeistHeadings: hero 64px 300, H2 46px 400, -0.05em; big stats 56px 300
• GeistBody: body 17px/1.6 400
• Chivo MonoFigures and code: eyebrows and quote attributions 12px uppercase +0.08em

Patterns

• inset rounded video/photo hero with dark scrim and centered light headline
• white pill + frosted glass pill CTA pair
• mega-menu dropdowns with item descriptions
• founder quote block with mono eyebrow and attribution
• problem stat cards (small caption top, big number bottom)
• logo wall in a 3x4 grid of soft tiles
• dark full-bleed feature section with fading-in paragraph
• feature tabs mapped to product modules
• three management tool cards
• 2x2 'why it works' icon cards (black cards on mobile)
• testimonial blocks with paired metric callouts
• pricing, case studies, blog with category filter
• closing CTA on dark

States it is designed for

• Video: loading poster, playing, paused, failed (poster stays), reduced motion (poster only)
• Demo form: validation (work email, company size), submitting, success, error
• Blog filter: active category, empty result
• Tabs: active/inactive with keyboard focus
• Pricing: monthly/annual, seats input with min/max validation
• Logo tiles without a mark fall back to an initial

Who it is for

• CFOs and finance managers at growing companies
• Operations leads who approve spend
• Founders replacing spreadsheet budgeting
• Accounting teams closing books monthly

Layout

1. Top bar on white: square-glyph wordmark left, Product (mega menu with six modules + one-line descriptions), Pricing, Case studies, Company (mega menu) links; black pill 'Request a demo' right
2. Hero: rounded inset media panel (looping muted video of a person working in a cafe, poster image fallback) with a dark gradient scrim; centered 64px light-weight white headline, one-line subline, white pill 'Request a demo' + frosted 'Contact us'
3. Quote block on a cream rounded panel: mono uppercase eyebrow, large founder quote, mono name/title, wordmark; then three white stat cards (caption top-left, big number bottom-left)
4. Social proof: centered heading and subline, divider, 3x4 grid of soft logo tiles
5. Dark section: black background, paragraph fading from dim to white as it scrolls, product module tabs (expenses, budgeting, reporting, approvals, vendors, roles) with screenshots
6. Management tools: three cards (approvals, vendor management, roles)
7. Why it works: four icon cards (onboarding, adoption, integrations, growth)
8. Testimonials: quote cards paired with metric figures (e.g. percentage saved, hours cut)
9. Pricing preview, case studies, blog teasers, closing dark CTA, footer
10. Mobile: hero text 36px over the media with stronger scrim, mega menus become accordion sheet, cards stack full width

Palette

trustworthy, human, clear, grown-up, understated. Finance software that looks like a well-run office on a calm morning.

• page background#ffffff
• cream panel#fbfaf9
• warm tile#f2ece8
• body text#222222
• muted text#52525b
• black (CTA, dark sections)#000000
• input border#90909a
• chart green (accessible fix)#0ea472
• positive chip text#065f46
• chart blue#2563eb
• chart orange (accessible fix)#ef6606
• chart violet#8b5cf6

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

Geist 300 for the 64px hero with -0.05em tracking; section headings Geist 400 46px with -0.05em

Body

Geist 400, 17px / 1.6

Chivo Mono 12px uppercase with 0.08em tracking for eyebrows and quote attributions. Big stat numbers Geist 300 56px.

Spacing and imagery

Clean and roomy: 1200px container, 120px sections, 16px card gaps; hero panel 20px radius inset 16px from the viewport; cards 16px radius; pills fully rounded (64px). No heavy shadows; tiles separate by tint.

Warm lifestyle video/photography of people working (with scrims), neutral product screenshots with small colour-coded charts, simple monochrome logo marks, outline icons in small bordered squares.

Components

• Mega-menu nav with descriptions
• Video hero with scrim and poster fallback
• White pill and frosted glass pill buttons
• Founder quote block
• Stat card
• Logo tile grid
• Scroll-revealed paragraph (dim to bright)
• Module tabs with screenshots
• Tool card
• Icon card
• Testimonial with metric callouts
• Pricing card
• Case study card
• Blog card with category filter
• Demo-request form

Interactions

• Mega menus open on click/hover with 150ms fade; arrow keys move within
• Hero video autoplays muted and loops; pause button bottom-right
• Dark-section paragraph words brighten progressively on scroll
• Module tabs switch screenshots with a slide-fade
• Stat numbers count up once on view
• Pills: white pill darkens to light gray; glass pill increases opacity; 2px focus ring

Data

• Module{slug, name, description, screenshot, bullets[]}
• Stat{caption, value}
• Testimonial{quote, name, role, company, metrics[{value, label}]}
• Plan{id, name, price_per_seat, min_seats, features[]}
• CaseStudy{slug, company, industry, summary, metrics[]}
• Post{slug, title, category, excerpt, published_at}
• DemoRequest{name, work_email, company, company_size, message}

Guardrails

Experience

• Hero copy stays under 20 words; the media sets the tone
• Every stat has its caption; no naked numbers
• Use one black pill primary per view; glass pill only over media
• Mega-menu items each carry a one-line description
• Logo wall uses invented marks only

Accessibility

• Hero text sits on a scrim at least 55% black at the text zone (worst case checked against a white frame)
• Autoplaying video is muted, has a visible pause control and is replaced by the poster under reduced motion
• Light 300 weight used only at 36px and above
• Chart colours use the adjusted green and orange to reach 3:1 on white
• Scroll-brightening paragraph is fully readable (final colour) for screen readers and reduced motion

Security

• Demo form: zod validation, honeypot and per-IP rate limit in an Edge Function
• RLS on demo_requests: insert via service role only, sales role reads
• No real financial data in screenshots; all figures invented
• Collect only business contact details; link privacy policy next to submit

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 **Levelbook**, a spend-management platform for finance teams: expense tracking, budgets, approvals, vendor oversight, roles and reporting in one place. The site should feel calm and credible: a human video hero, a founder's point of view, hard numbers and neat product modules, all driving to "Request a demo".

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Tabs, Accordion, Switch), lucide-react, Recharts for small charts inside module screenshots, Motion for count-ups, tab transitions and scroll-brightening text, react-hook-form + zod for the demo form. Supabase Edge Function for demo requests.

### Pages & layout
1. **Home**: nav with Product and Company mega menus and black "Request a demo" pill; inset video hero (scrim, 64px light headline, subline, white pill + glass pill); cream quote block + three stat cards; logo wall (3x4 tiles); dark section with scroll-brightening paragraph and six module tabs; three management tool cards; four "why it works" icon cards; testimonials with metrics; pricing preview; case studies; blog teasers; dark closing CTA; footer.
2. **Product module pages** (six), **Pricing** (seat-based with calculator), **Case studies** index + detail, **About**, **Blog** with category filter, **Careers**, **Contact / demo**.
Mobile: 36px hero headline, heavier scrim, mega menus in a Sheet with accordions, cards full width (icon cards on black).

### Design system
- Colors: `--bg: #ffffff`, `--cream: #fbfaf9`, `--warm: #f2ece8`, `--fg: #222222`, `--muted: #52525b`, `--black: #000000`, `--input-border: #90909a`, `--chart-green: #0ea472`, `--positive-text: #065f46`, `--positive-bg: #d1fae5`, `--chart-blue: #2563eb`, `--chart-orange: #ef6606`, `--chart-violet: #8b5cf6`, `--ring: #000000` (white on dark sections).
- Fonts: Geist 300 hero 64px (-0.05em), Geist 400 H2 46px (-0.05em), Geist 400 body 17px/1.6, Chivo Mono 12px uppercase 0.08em for eyebrows; big stats Geist 300 56px.
- Spacing: 8px base; sections 120px / 72px; container 1200px; hero inset 16px.
- Radius: hero 20px, cards 16px, tiles 12px, pills 64px.
- Shadows: none; glass pill `background: rgba(255,255,255,.15); backdrop-filter: blur(12px)`.
- Scrim: `linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.25))`.
- Motion: 200ms UI transitions; count-up 1s; word brightening mapped to scroll progress.

### Components & interactions
MegaNav, VideoHero (poster, pause button, reduced-motion poster only), PillButton (black | white | glass), QuoteBlock, StatCard, LogoTileGrid, ScrollBrightParagraph, ModuleTabs (ARIA tabs, lazy screenshots), ToolCard, IconCard, TestimonialWithMetrics, PlanCard + SeatCalculator, CaseStudyCard, BlogFilter + PostCard, DemoForm.

### Data & state
Static JSON for modules, stats (clearly sample), testimonials (invented people and companies), plans, case studies and posts. DemoForm states: idle, invalid, submitting, success, error. Seat calculator clamps to plan min/max. Blog filter in URL query.

### Accessibility
Body 17px; mono labels 12px minimum with tracking. Hero text over a scrim measured against a white worst case. Video muted, pausable, poster under reduced motion. Tabs with roving tabindex. Charts have text summaries; colours meet 3:1. Focus ring 2px black on light, white on dark.
Verified contrast: body text on white: #222222 on #ffffff = 15.91:1; muted text on cream panel: #52525b on #fbfaf9 = 7.41:1; white label on black pill: #ffffff on #000000 = 21.00:1; hero white text on scrim (worst case): #ffffff on #737373 = 4.74:1; positive chip text: #065f46 on #d1fae5 = 6.78:1; chart green on white: #0ea472 on #ffffff = 3.20:1; chart orange on white: #ef6606 on #ffffff = 3.19:1; chart blue on white: #2563eb on #ffffff = 5.17:1; chart violet on white: #8b5cf6 on #ffffff = 4.23:1; input border on white: #90909a on #ffffff = 3.16:1; focus ring (black) on white: #000000 on #ffffff = 21.00:1.

### Security
Demo Edge Function: zod validation (work email, company size enum), honeypot, per-IP rate limit, service-role insert; `demo_requests` RLS allows no anon read; sales role select only. No real financial data. Privacy link next to submit; collect business details only.

### Performance & SEO
Hero video under 2.5MB, H.264 + WebM, `preload="metadata"`, poster as AVIF and LCP candidate. Screenshots lazy-loaded. Static generation with per-page meta and OG images; Organization and FAQ structured data. Target LCP under 2.5s on 4G.

### Guardrails
- Invent all logos, names, quotes and metrics; label sample numbers.
- No claims of banking licences or certifications not held.
- Acceptance criteria:
  - [ ] Hero readable over video at every breakpoint; pause works
  - [ ] Mega menus and tabs fully keyboard operable
  - [ ] Demo form handles all states and stores rows safely
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own