Larkdesk

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

Faustina's light weight gives the calm, well-mannered serif headlines, and Onest now does both the body and the mock UI, so the support screens feel of a piece with the page.

• FaustinaHeadings: H1 56px, H2 48px, weight 300, -0.05em, line-height 1.05
• OnestBody: leads 18-20px, body 16px/1.6 500, text and figures in the UI mocks

Patterns

• split hero: serif headline left, inbox mock over painterly image right
• two-tone headline (second line muted)
• 'New' tag + announcement link above headline
• wordmark logo ticker
• three feature cards: UI fragment floating on painterly background
• alternating wide feature panels (image card + copy + CTA)
• use-case tabs swapping dashboard screens
• security grid of four items
• comparison table
• pricing toggle with custom enterprise tier
• big-number results row
• integrations ticker
• FAQ two-column
• floating dark final CTA

States it is designed for

• Tabs: active, hover, focus-visible; screen images show a skeleton while loading
• Pricing: monthly vs yearly; custom tier swaps price for 'Talk to us'
• Contact / demo form: validation, submitting, success, error with retry
• Blog and updates lists: empty filter state, pagination
• 404 page with search and home link
• Reduced motion: tickers become static rows, no rise-in
• Long FAQ answers expand without layout jump

Who it is for

• Heads of customer support
• Founders of e-commerce and SaaS startups
• Support operations managers
• CX teams evaluating AI deflection

Layout

1. Top bar: logo left, centered links (Company menu, Integrations, Customers, Pricing), 'Sign in' text link + dark 'Try free' button right; hamburger on mobile
2. Hero split: left 'NEW' tag + announcement link, two-line serif headline (second line in muted brown), one paragraph, dark CTA; right a rounded card with a painterly floral image behind a three-pane inbox mock (nav, conversation list, thread)
3. Logo ticker of invented wordmarks, full width
4. 'What it does': small dot eyebrow, two-tone serif heading, three cards each with a UI fragment floating on a painterly image, title and one sentence
5. 'Why': two-tone heading, then alternating wide panels on a warm gray surface: image card with metric or reply fragment on one side, serif subheading + paragraph + dark 'Get started' on the other
6. Use-case tabs: four tabs switching between dashboard screens (triage, auto-resolve, handoff, analytics)
7. Security: heading + four items (compliance, control, encryption, data ownership)
8. Comparison table vs generic chatbots, testimonials, pricing with monthly/yearly toggle (three tiers, one custom)
9. Results: three big figures, integrations ticker, FAQ, final CTA, rich footer with product/company/resources/legal columns
10. Mobile: headline 40px, image card moves under text, tabs become a horizontal scroll row

Palette

calm, warm, human, refined, reassuring. Support automation presented as a quiet, well-mannered colleague rather than a robot.

• page background (warm off-white)#fbfaf6
• panel surface (warm gray)#f4f2ec
• card surface#ffffff
• primary text / dark button#1c1a15
• muted text / second headline line#56524a
• input border#8c887e
• positive delta (accessible fix)#1c7e45
• positive chip background#e8f5ec
• hairline divider (decorative)#ece9e0

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

Faustina 300 (similar to the observed light text serif), 56px hero / 48px section, -0.05em tracking, 1.05 line-height; second line in muted colour

Body

Onest 500, 18-20px lead paragraphs, 16px / 1.6 body

Light serif weight only at 40px and above. UI mocks use Onest at 13-14px inside images (decorative screenshots) while live UI text stays 14px+.

Spacing and imagery

Relaxed editorial spacing: 140px between sections, 1180px container, 24px gaps. Cards and image panels 12-16px radius; buttons 10px radius; hairline dividers under the nav. Shadows only under floating UI fragments.

Soft painterly nature backdrops (wind-blown grass, daisies, sky in teal, cream and apricot) with clean white UI cards floating on top: inbox lists, reply bubbles, metric tiles, knowledge-source rows with 'learned' chips.

Components

• Announcement link with NEW tag
• Two-tone serif heading
• Dark primary button
• Painterly image card with floating UI fragment
• Inbox mock (nav, conversation list with initials avatars, thread)
• Wordmark ticker
• Wide feature panel
• Use-case tabs with dashboard screens
• Security item grid
• Comparison table
• Billing toggle and plan cards
• Results figures
• FAQ accordion
• Mega footer

Interactions

• Logo and integrations tickers scroll slowly; pause on hover/focus
• Use-case tabs switch screens with a 250ms cross-fade; arrow keys move between tabs
• Floating UI fragments rise 12px on scroll into view
• Company menu opens a dropdown panel on click and keyboard
• Buttons brighten slightly on hover; 2px dark focus ring with offset
• Billing toggle animates price change

Data

• UseCase{slug, label, screen_image, caption}
• Plan{id, name, monthly, yearly, is_custom, features[]}
• SecurityItem{icon, title, body}
• ComparisonRow{capability, ours (bool|text), generic (bool|text)}
• CaseStudy{slug, company, industry, metrics[], quote}
• Post{slug, title, excerpt, cover, published_at}
• Update{date, title, body, tag}
• Job{title, team, location}
• ContactMessage{name, email, company, message}

Guardrails

Experience

• Every feature claim is paired with a concrete UI fragment
• Headlines use the two-tone pattern consistently: statement line dark, softer line muted
• Painterly images stay behind UI cards and never behind body text
• Keep a single dark CTA style; secondary actions are text links
• Use-case tabs show exactly four screens with invented customer names and tickets

Accessibility

• Serif light 300 only at 40px+; body stays Onest 500 at 16px+
• Muted brown #56524a meets 4.5:1 on both off-white and panel
• Tabs follow the ARIA tabs pattern with roving tabindex
• UI mock images have concise alt text describing what the screen shows
• Tickers have pause controls and honour reduced motion

Security

• Contact/demo form posts to an Edge Function with zod validation, honeypot and rate limiting
• RLS on contact_messages: no anon select; staff role only
• Security section claims must link to a real policy page; no invented certifications
• Sign-in link goes to hosted auth with lockout on repeated failures

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 **Larkdesk**, an AI support copilot that resolves routine customer questions, learns from a company's help docs and past replies, and hands complex cases to a human with full context. The site should feel warm and editorial, not robotic: light serif headlines, soft painterly imagery and sharp product fragments that prove every claim.

### Stack
Astro with React islands, TypeScript, Tailwind CSS, shadcn/ui on Radix (Tabs, Accordion, NavigationMenu, Switch), lucide-react, Motion for tickers and reveals, react-hook-form + zod for the contact form. Content collections for use cases, plans, case studies, posts, updates, jobs and FAQ. Supabase Edge Function for contact submissions.

### Pages & layout
1. **Home**: top bar; split hero (NEW tag + announcement link, two-tone serif headline, paragraph, dark "Try free" button; right: painterly card with three-pane inbox mock); wordmark ticker; "what it does" three cards; "why" alternating wide panels (metric tile, brand-voice reply with tone chips, overnight queue); use-case tabs (triage, auto-resolve, handoff, analytics); security grid; comparison table; testimonials; pricing with monthly/yearly switch (Starter, Growth, Custom); results figures; integrations ticker; FAQ; final CTA; mega footer.
2. **Customers** (case studies), **Integrations**, **Pricing**, **Blog**, **Updates**, **About**, **Careers**, **Contact**, **Privacy / Terms / Cookies**, **404**.
Mobile: 40px headline, image cards below copy, tabs scroll horizontally, footer columns collapse into accordions.

### Design system
- Colors: `--bg: #fbfaf6`, `--panel: #f4f2ec`, `--card: #ffffff`, `--fg: #1c1a15`, `--muted: #56524a`, `--input-border: #8c887e`, `--positive: #1c7e45`, `--positive-bg: #e8f5ec`, `--hairline: #ece9e0` (decorative), `--ring: #1c1a15`.
- Fonts: Faustina 300 for H1/H2 (56/48px, -0.05em, 1.05), Onest 500 for body 16px/1.6 and leads 20px, Onest for figures in mocks.
- Spacing: 8px base; sections 140px desktop / 80px mobile; container 1180px; panel padding 32px.
- Radius: image cards 16px, UI fragments 12px, buttons 10px, chips 8px.
- Shadows: floating fragments `0 20px 40px rgba(28,26,21,.12)`; none elsewhere.
- Motion: 300ms ease-out rise-ins, 250ms tab cross-fade, ticker 40s loop.

### Components & interactions
TopNav (NavigationMenu with Company dropdown), AnnouncementLink, TwoToneHeading, PrimaryButton, PainterlyCard (background image + fragment slot), InboxMock (static JSX, initials avatars, unread dots), Ticker (pausable), FeaturePanel (reversible), UseCaseTabs (ARIA tabs, lazy images), SecurityGrid, ComparisonTable (sticky first column on mobile), BillingSwitch + PlanCard, ResultFigure, FaqAccordion, MegaFooter.

### Data & state
All ticket subjects, customers, names and figures are invented ("Order arrived damaged", "Refund still pending"). Plans and comparison rows from JSON. Tab index in URL hash. Contact form states: idle, invalid, submitting, success, error.

### Accessibility
Body 16px minimum; light serif only at 40px+. Tabs use roving tabindex and arrow keys. Tickers have a pause button and stop under reduced motion. Inbox mocks are images or aria-hidden JSX with a text caption. Focus ring 2px `--ring` with 2px offset on all interactive elements.
Verified contrast: body text on page: #1c1a15 on #fbfaf6 = 16.65:1; muted text on panel: #56524a on #f4f2ec = 6.94:1; button label on dark button: #fbfaf6 on #1c1a15 = 16.65:1; text on white UI card: #1c1a15 on #ffffff = 17.38:1; positive delta on chip: #1c7e45 on #e8f5ec = 4.54:1; focus ring on page: #1c1a15 on #fbfaf6 = 16.65:1; input border on page: #8c887e on #fbfaf6 = 3.39:1.

### Security
The contact Edge Function validates with zod, checks a honeypot, rate-limits per IP and inserts with the service role; `contact_messages` has RLS with no anon read. Security claims link to a real policy page and never name certifications not held. Sign-in uses hosted auth with lockout.

### Performance & SEO
Painterly images as responsive AVIF with blur placeholders; hero image preloaded. Islands only for nav, tabs, switch, tickers and form. Meta, OG images per case study and post, RSS for blog and updates, FAQ structured data.

### Guardrails
- Invented wordmarks only; no real customer or integration logos.
- Sample testimonials and results labelled as examples until replaced.
- Don't overstate automation rates; show ranges and context.
- Acceptance criteria:
  - [ ] Hero, tabs and panels match the spec at 390/768/1440px
  - [ ] Tabs, dropdown and accordions fully keyboard operable
  - [ ] Contact form handles all states and stores rows safely
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own