Everquill

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

Imbue is a condensed, high-contrast display serif with an optical-size axis, so the cream headlines stay crafted at 44px, and Commissioner's warm, lightly flared grotesk suits the chat and task mocks better than a neutral UI face.

• ImbueHeadings: H1 44px / 34px mobile, H2 36px, card titles 22px, weight 400
• CommissionerBody: body 16px/1.6, chips 14px, eyebrows 13px uppercase +0.06em, diagram labels 12px

Patterns

• framed hero card with glossy gradient orb
• prompt bar with suggestion chips
• problem/solution dot diagram
• eyebrow pill labels
• bento feature grid with one inverted dark card
• orbiting integration icons
• testimonial wall
• deployment timeline
• pricing with toggle
• FAQ accordion
• blog teaser cards

States it is designed for

• prompt bar submit when empty: shake-free inline hint 'Describe a task to try'
• prompt submission routes to sign-up with the prompt prefilled (no live AI on the marketing site)
• demo form: validation, sending, success, error
• reduced-motion: no typewriter, orbit static
• orb image fallback: flat radial gradient

Who it is for

• support and customer-success leads
• sales development teams
• operations managers at SMBs
• agencies deploying agents for clients

Layout

1. pill top bar with logo, section links (Features, Use cases, About, Testimonials, Pricing, Blog), 'Contact', 'Get started' and 'Book a demo'
2. hero inside a large rounded cream card: centred serif H1, lede, black primary + white secondary pills, a glossy gradient orb rising from the card bottom with a prompt input and 8 suggestion chips over it
3. problem section: eyebrow pill, serif H2, lede, card with a dot diagram contrasting blended grey dots vs split red (AI handles) and black (team focuses) dots
4. features bento: 2+1 top row (photo card with typing prompt chip; dark card with chat mock), 2 cards second row (integration orbit; task generator), workflow-trigger list card
5. use-cases tabs, why-us section, integrations wall
6. testimonials grid, deployment timeline (weeks not months)
7. pricing (monthly/yearly, 3 plans with a highlighted one), FAQ, blog teaser, final CTA, footer

Palette

Warm, crafted, quietly confident: editorial serif on cream with a single radiant red-pink orb.

• page background#fcfcfc
• cream card#faf8f7
• ink#0f0f0f
• muted text#666666
• signal red (labels, accents)#e0182f
• coral glow (decorative)#ff5357
• dark card#060606
• text on dark#ffffff
• muted on dark#b3b3b3
• input border#909090

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

Imbue 400, 44px desktop / 34px mobile, line-height 1.15 (similar to the observed condensed display serif)

Body

Commissioner 400, 16px, line-height 1.6

H2 36px serif; card titles 22px serif; eyebrow pills 13px uppercase +0.06em; chips 14px Commissioner; tiny diagram labels 12px uppercase +0.08em.

Spacing and imagery

Density: generous; 112px section padding; bento gaps 12px Grid: 12-column; bento uses 5/7 and 6/6 splits Container: 1200px max inside a 12px outer page inset Radius: hero card 20px, bento cards 16px with 6px inner image radius, pills 9999px Shadows: hairline 1px #e9e9e9 borders; soft 0 10px 30px rgba(231,27,51,.12) under the prompt bar

One glossy 3D gradient orb (red→pink→magenta) as the hero anchor; lifestyle photo of a person at work in a card; live HTML chat and task mocks; small circular app icons orbiting a centre mark; red-dot diagrams.

Components

• pill top bar
• black pill button
• white pill button
• hero orb
• prompt bar with send button
• suggestion chips
• eyebrow pill
• dot diagram
• bento card (light / dark)
• chat mock
• integration orbit
• workflow trigger list
• testimonial card
• timeline
• pricing card
• FAQ accordion
• blog card

Interactions

• prompt bar placeholder types out example tasks; typing replaces it
• clicking a chip fills the prompt bar
• orbit icons rotate slowly (paused under reduced motion)
• dot diagram animates dots sorting into red and black rows on scroll
• bento cards lift and deepen border on hover
• accordion expand with height animation

Data

• UseCase{id, label, headline, body, prompt}
• Integration{id, name, iconUrl}
• Testimonial{quote, name, role, company, avatarUrl}
• Plan{id, name, monthly, yearly, features[], highlighted}
• Faq{q, a}
• Post{slug, title, cover, date}
• DemoRequest{name, email, teamSize, message}

Guardrails

Experience

• The prompt bar never pretends to run AI; submitting hands the text to sign-up.
• Keep the red for small signals (labels, icons, one gradient); body copy stays black/grey.
• Only one dark bento card per grid to keep emphasis.
• Suggestion chips wrap to multiple lines on mobile, never scroll hidden.
• State pricing currency consistently (symbol before number) across all plans.

Accessibility

• Serif display only at 22px and above; body in Inter 16px.
• Signal red for text uses #e0182f, which passes 4.5:1 on cream and white.
• Prompt input has a visible label (visually hidden text plus aria-label) and the send button an accessible name.
• Typewriter placeholder is not announced repeatedly; aria-live off.
• Focus ring: 2px #0f0f0f with 2px white offset; on the dark card use white.

Security

• Demo form: zod validation, per-IP rate limit, honeypot; stored in Supabase with RLS (anon insert, staff select).
• Prompt text passed to sign-up via a short-lived query param, length-limited and never stored on the marketing site.
• No third-party scripts beyond consented analytics.
• Keep testimonials verifiable internally; don't publish without written 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 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 **Everquill**, a warm, editorial marketing site for a platform where teams build, train and deploy AI agents that handle support chats, outreach and routine operations. The page must feel crafted (serif headlines, cream surfaces, one radiant orb), invite immediate interaction through a prompt bar, and convert to sign-up or a booked demo.

### Stack
Next.js (static export) + TypeScript, Tailwind CSS, shadcn/ui (Radix Tabs, Accordion, Switch, Sheet), lucide-react, Motion for the typewriter, orbit and dot-sorting animations, react-hook-form + zod for the demo form, Supabase for demo requests.

### Pages & layout
1. **Home**: pill top bar → hero card (serif H1, lede, 'Get started' + 'Book a demo', orb with prompt bar and chips) → problem section with dot diagram → features bento → use-case tabs → why-us → integrations orbit/wall → testimonials → deployment timeline → pricing → FAQ → blog teaser → CTA → footer.
2. **Pricing**, **Blog**, **About**, **Contact/Demo**.
3. Breakpoints: bento collapses from 2-3 columns to 1 under 768px; hero orb crops to a half-circle and chips wrap; top bar becomes logo + menu Sheet.

### Design system
- Colors: `--bg: #fcfcfc`, `--cream: #faf8f7`, `--ink: #0f0f0f`, `--muted: #666666`, `--signal: #e0182f`, `--coral: #ff5357`, `--dark: #060606`, `--on-dark: #ffffff`, `--muted-dark: #b3b3b3`, `--border: #909090`.
- Fonts: Imbue 400 for H1 44/34px, H2 36/28px, card titles 22px; Commissioner 400/500 for body 16px/1.6, chips 14px, eyebrow 13px uppercase +0.06em.
- Spacing: 4px base; 112px section padding; 12px bento gap; 24px card padding.
- Radius: 20px hero card, 16px cards, full pills.
- Shadows: 1px `#e9e9e9` borders; prompt bar `0 10px 30px rgba(231,27,51,.12)`.
- Orb: layered radial gradients from --signal to --coral to magenta with a glossy highlight; or an optimised WebP.
- Motion: 250ms ease-out; typewriter 45ms/char; orbit 40s per revolution.

### Components & interactions
TopBar, PillButton (black, white), HeroCard with Orb, PromptBar (input + round send button), SuggestionChip, EyebrowPill, DotDiagram (SVG dots sorting into two rows), BentoCard (light/dark variants), ChatMock, IntegrationOrbit, TaskGeneratorMock, TriggerList, UseCaseTabs, TestimonialCard, Timeline, PricingCard + BillingSwitch, FaqAccordion, BlogCard, CtaBand, Footer.

### Data & state
Typed data files for use cases, integrations, testimonials, plans, FAQs; MDX for posts. Prompt text is local state and passed to `/signup?task=` (encoded, max 280 chars). Demo form posts to a route handler → zod → Supabase `demo_requests`.

### Accessibility
One H1. Chips are buttons that announce 'Fill prompt with …'. Tabs and accordion use Radix semantics. Orbit and dot animations are decorative (aria-hidden) with text equivalents nearby. Honour reduced motion. Hit targets ≥44px.
Verified contrast: body text: #0f0f0f on #faf8f7 = 18.11:1; muted text: #666666 on #faf8f7 = 5.42:1; signal red label: #e0182f on #faf8f7 = 4.57:1; text on dark card: #ffffff on #060606 = 20.26:1; muted on dark card: #b3b3b3 on #060606 = 9.66:1; primary pill label: #ffffff on #0f0f0f = 19.17:1; input / chip border: #909090 on #faf8f7 = 3.02:1.

### Security
RLS on `demo_requests` (anon insert with column check, staff select). Rate-limit and honeypot. Prompt param sanitised and truncated. CSP restricts scripts to self.

### Performance & SEO
Orb as a single optimised WebP/AVIF (<120KB) or pure CSS; lazy-load bento photos. Title, meta, OG, SoftwareApplication and FAQPage JSON-LD. Target LCP < 2.5s.

### Guardrails
- All company names, people and quotes are invented placeholders.
- Integration icons are generic glyphs, not real app logos.
- Don't promise automation outcomes without evidence.
- Write original headlines and copy throughout.

**Acceptance criteria**
- [ ] Prompt bar and chips work by keyboard and hand the task to sign-up
- [ ] Bento grid reflows to one column without clipped mocks at 390px
- [ ] Red text passes 4.5:1 wherever used for labels
- [ ] Pricing toggle updates all plans
- [ ] Demo requests stored under RLS

Open the builderAll templatesThis palette on its own