Evergrove

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

Plus Jakarta Sans gives steady geometric headings, and Merriweather Sans is a humanist sans with an organic, grounded feel that suits the sage and botanical palette.

• Plus Jakarta SansHeadings: display 48px / 34px 700, H2 42px / 30px, -0.02em
• Merriweather SansBody: body 16px/1.5 400, card titles 18px 500, KPI numbers 22px 600 tabular, chips 15px

Patterns

• split hero with photo mosaic and stat tile
• rating line with star
• pill CTA with circular arrow icon
• tag chips over image
• email capture + demo button row
• framed dashboard mock
• icon feature cards on sage
• eyebrow pills with icons
• pricing cards
• blog cards
• FAQ

States it is designed for

• email capture: invalid, submitting, success ('We'll be in touch'), duplicate, error
• dashboard mock skeleton before hydration
• reduced motion: no stagger
• long names in recent sales truncate with full value in title
• pricing monthly/annual toggle optional

Who it is for

• small sales teams
• founders running their own pipeline
• account managers
• customer-success teams

Layout

1. top bar on sage: leaf logo + wordmark, centred links (About, Pricing, Blog, Contact), forest pill 'Buy now' with a circular arrow
2. hero on sage: left rating line, H1, lede with a bold phrase, forest pill CTA; right a 2-column mosaic: forest stat tile with avatar stack, plant photo with tag chips, portrait photo
3. white section: eyebrow pill, H2, lede, email input + forest 'Book a demo' button
4. framed dashboard mock: sidebar, three KPI cards with 'See details', revenue line chart, customers-by-region bars, recent sales list
5. loyalty section: H2 + lede, 2-column icon cards on sage (cloud integration, AI tools, enterprise security)
6. latest innovation split (feature list + photo), pricing, blog, FAQ, footer

Palette

Calm, organic, grounded: sage and forest tones with soft botanical photography make sales feel steady.

• page background#ffffff
• sage surface#d1dcdb
• off-white#fafafa
• ink#111111
• muted text#575757
• forest primary#043f2d
• label on forest#ffffff
• positive delta#12883e
• pale grey panel#ecedef
• input border#8f9193

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

Plus Jakarta Sans 700, 48px desktop / 34px mobile, line-height 1.2, tracking -0.02em

Body

Merriweather Sans 400, 16px, line-height 1.5

H2 42/30px Plus Jakarta Sans 700; card titles 18px Merriweather Sans 500; KPI numbers 22px/600 tabular; chips 15px.

Spacing and imagery

Density: comfortable; 100px sections Grid: 12-column; hero 6/6 with a 2-column mosaic; feature cards 2-up Container: 1140px max, 48px padding (16px mobile) Radius: tiles and cards 12px, dashboard frame 16px, buttons and chips 9999px, form buttons 8px Shadows: minimal; dashboard frame 0 10px 30px rgba(4,63,45,.08)

Soft-focus botanical and portrait photography in rounded tiles, forest-green stat tile with overlapping avatars, bold black line-art icons on sage cards, clean line charts in teal-green.

Components

• top bar
• forest pill with arrow circle
• rating line
• photo mosaic tile
• stat tile with avatar stack
• tag chip
• eyebrow pill
• email input + button
• dashboard mock
• KPI card
• line chart
• region bars
• recent sales row
• icon feature card
• pricing card
• blog card

Interactions

• arrow circle slides right inside the pill on hover
• mosaic tiles fade in with 80ms stagger
• chart points show tooltips on hover/focus
• tag chips are static labels (not buttons)
• cards darken sage by 4% on hover

Data

• DemoLead{email, createdAt, source}
• KPI{label, value, delta}
• RegionStat{region, customers, share}
• Sale{name, email, amount}
• Plan{name, price, features[]}
• Post{slug, title, cover, date}
• Faq{q, a}

Guardrails

Experience

• Hero shows a single primary CTA; demo capture lives in the next section.
• Region rows show numbers and percentages as text beside bars.
• Mock people use invented names and example.com-style emails.
• Tag chips over photos need their own solid background, never raw text on image.
• Keep forest green for actions; sage for surfaces only.

Accessibility

• Muted #575757 passes on both white and sage.
• Email input has a visible label (can be visually hidden with placeholder not used as label).
• Charts include hidden tables and captions.
• Focus ring: 2px #043f2d with 2px offset on sage and white.
• Decorative photos use empty alt; meaningful ones get brief descriptions.

Security

• Demo lead endpoint: zod email validation, rate limit, honeypot, dedupe.
• Supabase `demo_leads` with RLS: anon insert, sales role select.
• Store only email and source; no enrichment on the marketing site.
• CSP and HSTS headers; analytics only after 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 **Evergrove**, a calm, organic marketing site for an AI-powered sales CRM that tracks pipelines, scores leads and automates follow-ups. Sage surfaces and forest-green actions should make the product feel trustworthy; a clean dashboard mock shows the value, and an email capture books demos.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix Accordion, Sheet, Tooltip), lucide-react, Recharts for the revenue line and region bars, Motion for staggered reveals, react-hook-form + zod for the demo capture, Supabase for leads.

### Pages & layout
1. **Home**: top bar → sage hero (rating line, H1, lede, 'Get started'; photo mosaic with stat tile and chips) → demo capture (eyebrow, H2, lede, email + 'Book a demo') → dashboard mock → loyalty icon cards → innovation split → pricing → blog → FAQ → footer.
2. **Pricing**, **Blog**, **About**, **Contact**.
3. Breakpoints: hero mosaic moves below copy and becomes 1 column of tiles under 768px; dashboard mock hides the sidebar under 1024px; feature cards 2→1 columns.

### Design system
- Colors: `--bg: #ffffff`, `--sage: #d1dcdb`, `--off: #fafafa`, `--ink: #111111`, `--muted: #575757`, `--forest: #043f2d`, `--on-forest: #ffffff`, `--positive: #12883e`, `--pale: #ecedef`, `--border: #8f9193`.
- Fonts: Plus Jakarta Sans 700 display 48/34px and H2 42/30px (tracking -0.02em); Merriweather Sans 400 body 16px/1.5; KPI numbers Merriweather Sans 600 tabular.
- Spacing: 4px base; 100px sections; 24px card padding.
- Radius: 12px tiles/cards, 16px mock frame, pill buttons; form button 8px.
- Shadow: `0 10px 30px rgba(4,63,45,.08)` on the mock frame.
- Motion: 250ms ease; 80ms mosaic stagger.

### Components & interactions
TopBar, PillButton with ArrowCircle, RatingLine (star icon + text, no review brand), PhotoTile, StatTile (number, AvatarStack, caption), TagChip, EyebrowPill, EmailCapture, DashboardMock (Sidebar, KpiCard with 'See details', RevenueLineChart, RegionBars, RecentSales), IconFeatureCard, InnovationSplit, PricingCard, BlogCard, FaqAccordion, Footer.

### Data & state
Typed data for KPIs, series, regions, sales, plans, posts, FAQs (all invented). Email capture → route handler → zod → Supabase `demo_leads` (unique email).

### Accessibility
One H1. Charts in `figure` with captions and hidden tables. Region bars include text values. Avatar stack has a text alternative ('Team of 40+'). Email field labelled. Reduced motion supported.
Verified contrast: body text: #111111 on #d1dcdb = 13.46:1; muted text on sage: #575757 on #d1dcdb = 5.15:1; muted text on white: #575757 on #ffffff = 7.23:1; forest button label: #ffffff on #043f2d = 11.97:1; forest link on sage: #043f2d on #d1dcdb = 8.54:1; positive delta: #12883e on #ffffff = 4.55:1; input border: #8f9193 on #ffffff = 3.16:1; chip on sage: #043f2d on #ecedef = 10.22:1.

### Security
RLS on `demo_leads` (anon insert only; `sales` role select). zod validation, rate limit, honeypot. No secrets client-side.

### Performance & SEO
Optimised AVIF photos with fixed aspect ratios; lazy-load Recharts. Title, description, OG image, SoftwareApplication JSON-LD. CLS < 0.05.

### Guardrails
- No third-party review-site branding in the rating line.
- All people and figures in the mock are invented.
- Write original headlines and descriptions.
- Photos licensed; no identifiable public figures.

**Acceptance criteria**
- [ ] Hero mosaic reflows cleanly at 390px
- [ ] Email capture validates, dedupes and stores under RLS
- [ ] Charts readable by screen readers
- [ ] Chips over photos have solid backgrounds
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own