Edgemere

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

Red Hat Text has a businesslike clarity that suits a content platform with a lead form, and it stays firm at 600 for the headings.

• Red Hat TextHeadings: H1 44px / 34px 600, H2 40px / 28px, -0.02em; stats 56px 600
• Red Hat TextBody: lede 17px, body 16px/1.5 500, form inputs 16px

Patterns

• split hero with inline lead-capture form
• browser-framed app mock bleeding off-edge
• underlined keyword in headline
• logo marquee
• icon-tab feature cards (icon badge overlapping card top)
• cut-out portrait with UI chips
• two-tone headline (white + blue)
• chart showcase cards
• big-number stats row
• FAQ
• case-study cards
• closing CTA

States it is designed for

• hero form: required fields, invalid email, unchecked terms, submitting, success message replacing the form, server error
• reduced motion: no counters or marquee
• long names in the form are accepted up to 80 chars
• help sheet: open/closed, offline notice if the form can't reach the server

Who it is for

• marketing and content teams
• agency project leads
• small-business owners
• operations managers evaluating content tools

Layout

1. top bar: geometric logo mark, links (Home, About, Pricing, Pages ▾, Contact), blue 'Contact us' pill with arrow
2. hero split: left H1 with underlined keyword, bold lede, inline form (first name, email, terms checkbox, blue 'Get in touch'); right browser-framed app mock (icon sidebar, chart panels, user chip) bleeding off the right edge; mock moves above the copy on mobile
3. logo marquee of placeholder marks
4. features: two-column heading/lede; 3x2 cards with blue icon badges overlapping the top edge
5. split: cut-out portrait on a blue arc with floating UI chips; two-tone H2, lede, grey 'Contact us' + blue 'Get started'
6. complete solutions: chart showcase cards (area chart, line chart)
7. stats row (4 big figures), FAQ, case studies, closing CTA, footer

Palette

Businesslike, confident and electric: slate surfaces with a single vivid blue that signals action.

• canvas#1f2631
• card#353f50
• text#ffffff
• muted text#a6a9ae
• electric blue#0022ff
• blue text on dark#96a4ff
• input border#7c89a2
• success (chat bubble)#16a34a

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

Red Hat Text 600, 44px desktop / 34px mobile, line-height 1.35, tracking -0.02em

Body

Red Hat Text 500, 17px lede / 16px body, line-height 1.5

H2 40/28px/600; card titles 20px/600; stats 56px/600; form inputs 16px; the underline under keywords is a 2px blue bar.

Spacing and imagery

Density: moderate; 110px sections Grid: 12-column; hero 5/7; features 3x2 Container: 1200px max, 30px padding (16px mobile) Radius: cards 16px, icon badges 12px, inputs and buttons 9999px, browser mock 12px Shadows: blue glow on primary button (0 8px 24px rgba(0,34,255,.35)); cards flat

Browser-framed app mocks with simple charts; a cut-out smiling professional on a blue arc with floating chips; blue square icon badges with white line icons; placeholder logo marks.

Components

• top bar with Pages dropdown
• blue pill button with arrow
• grey pill button
• hero lead form (inputs, checkbox)
• browser-framed mock
• logo marquee
• feature card with overlapping icon badge
• cut-out portrait composition
• chart showcase card
• stat figure
• FAQ accordion
• case-study card
• floating help button

Interactions

• inputs show blue border and ring on focus
• feature cards lift 4px and their icon badge glows on hover
• marquee scrolls, pauses on hover
• stats count up once
• Pages dropdown opens with keyboard and closes on Escape
• floating help button opens a contact sheet

Data

• Lead{firstName, email, acceptedTerms (bool), createdAt, source}
• Feature{icon, title, body}
• Stat{value, label}
• CaseStudy{slug, title, summary, cover}
• Faq{q, a}
• Plan{name, price, features[]}

Guardrails

Experience

• Hero form asks for only first name and email; everything else comes later.
• The terms checkbox links to the terms page and is required, with its error shown next to it.
• Blue text on dark uses the lighter #96a4ff; the saturated blue is for fills only.
• Stats need a context line (what, when) or 'illustrative' label.
• On mobile, place the mock above the form but keep the form within the first two screens.

Accessibility

• Muted text #a6a9ae passes 4.5:1 on the card colour.
• Form fields have persistent visible labels, not placeholder-only.
• Checkbox is a native input with a clickable label.
• Focus ring: 2px #96a4ff with 2px offset.
• Portrait and chart visuals have alt text; decorative chips aria-hidden.

Security

• Lead endpoint: zod validation, CSRF-safe POST (same-origin check), rate-limit, honeypot.
• Supabase `leads` with RLS: anon insert with acceptedTerms = true required; staff select.
• Record consent timestamp; honour deletion requests.
• No third-party trackers before 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 **Edgemere**, a slate-dark marketing site for a platform that helps teams create, manage and publish content on fast, scalable infrastructure. The hero captures leads directly with a two-field form, while feature cards, a portrait split, chart showcases and stats build confidence for business buyers.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix DropdownMenu, Checkbox, Accordion, Sheet), lucide-react, Recharts for showcase charts, Motion for counters/marquee, react-hook-form + zod for the lead form, Supabase for leads.

### Pages & layout
1. **Home**: top bar → hero (H1 with underlined keyword, lede, lead form; browser mock right) → logo marquee → features (heading pair + 3x2 cards) → portrait split with two-tone H2 and dual buttons → complete-solutions chart cards → stats row → FAQ → case studies → CTA → footer; floating help button bottom-right.
2. **About**, **Pricing**, **Contact**, **Case study** detail, **Terms**, **Privacy**.
3. Breakpoints: hero stacks (mock first) under 1024px; features 3→2→1 columns; portrait split stacks with image first.

### Design system
- Colors: `--canvas: #1f2631`, `--card: #353f50`, `--text: #ffffff`, `--muted: #a6a9ae`, `--blue: #0022ff`, `--blue-text: #96a4ff`, `--border: #7c89a2`, `--success: #16a34a`.
- Fonts: Red Hat Text 600 for H1 44/34px and H2 40/28px (tracking -0.02em); Red Hat Text 500 lede 17px and body 16px/1.5.
- Spacing: 4px base; 110px sections; 30px card padding.
- Radius: 16px cards, 12px icon badges, pill inputs/buttons.
- Shadows: blue glow `0 8px 24px rgba(0,34,255,.35)` on primary buttons.
- Keyword underline: 2px `--blue` bar under the word, offset 6px.
- Motion: 200ms eases; counters 1s; marquee 30s.

### Components & interactions
TopBar (DropdownMenu for Pages), PillButton (blue, grey), HeroLeadForm (TextField ×2, Checkbox with terms link, submit), BrowserMock, LogoMarquee, FeatureCard with IconBadge, PortraitSplit with FloatingChips, ChartShowcaseCard, StatFigure, FaqAccordion, CaseStudyCard, CtaBlock, HelpButton + ContactSheet, Footer.

### Data & state
Typed content for features, stats, case studies, FAQs, plans. Lead form in react-hook-form with zod schema (firstName 1-80, email, acceptedTerms literal true) → route handler → Supabase `leads` with consent timestamp.

### Accessibility
One H1. Form fields labelled with errors linked by aria-describedby; success moves focus to the confirmation. Dropdown via Radix. Charts captioned with hidden tables. Reduced motion supported.
Verified contrast: body text: #ffffff on #1f2631 = 15.22:1; text on card: #ffffff on #353f50 = 10.62:1; muted text on card: #a6a9ae on #353f50 = 4.5:1; blue button label: #ffffff on #0022ff = 7.86:1; blue text on card: #96a4ff on #353f50 = 4.58:1; blue text on canvas: #96a4ff on #1f2631 = 6.56:1; input border: #7c89a2 on #353f50 = 3.01:1; success bubble: #16a34a on #1f2631 = 4.62:1.

### Security
RLS on `leads`: anon insert with check (accepted_terms = true), staff select; no update/delete for anon. Same-origin check, rate-limit, honeypot. Secrets server-side; CSP.

### Performance & SEO
Browser mock is HTML/CSS; portrait AVIF with transparent background as WebP; lazy-load charts. Title, description, OG, Organization JSON-LD. CLS < 0.05.

### Guardrails
- Invent all logos, names and domains in mocks (use example.com).
- Stats are placeholders with context labels.
- Write original copy; avoid template-like filler.
- Keep saturated blue for fills and focus accents, not body text.

**Acceptance criteria**
- [ ] Hero form validates, requires terms and stores leads under RLS
- [ ] Mock and form order correct on mobile
- [ ] Dropdown and help sheet keyboard accessible
- [ ] Blue text passes 4.5:1 wherever used
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own