Brightmoor

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

The observed pairing is kept: Manrope's rounded-geometric headings over the friendly humanist Source Sans 3 feel optimistic and safe for money, and no other template pairs them.

• ManropeHeadings: headings 60px / 48px / 20px 700, line-height 1.25
• Source Sans 3Body: body 18px/1.55 400, bullets 16px, prices 44px 700 tabular, labels 14px 700 uppercase

Patterns

• centred hero on faint grid with radial glow
• app-store badge pair as primary CTAs
• phone mockup cropped at hero bottom
• customer logo row with highlighted count
• alternating phone-mockup / feature-copy rows with icon bullet lists
• three-tier pricing with yellow highlighted middle plan
• testimonial columns with avatar and accent name
• split FAQ: heading and contact email left, accordion right
• big-number stats row with icons
• dark rounded CTA block with grid texture
• yellow pill nav button

States it is designed for

• Accordion item open / closed
• Mobile menu open with focus trap
• Mockup images loading with fixed aspect ratio
• Contact email link copied (optional copy button)
• Enterprise plan shows 'Custom' instead of a price and a 'Talk to us' action

Who it is for

• fintech and consumer app founders
• marketers launching a mobile app
• developers needing a quick app landing page

Layout

1. Header: fingerprint-style icon + wordmark left; Features, Pricing, Testimonials links and a yellow pill 'Get the app' right; yellow circular menu button on mobile
2. Hero: faint square grid background with a white radial glow; 60px bold two-line headline; 18px intro; two black pill app-store badges; phone mockup cropped at the section's bottom edge over a pale lavender gradient
3. Logo row: 'Trusted by 2,000+ customers' caption with the number in blue, five grey partner wordmarks
4. Feature rows x3: phone mockup on one side, 48px heading + paragraph + three icon bullets (bold title, one-line description) on the other, alternating sides
5. Pricing: centred heading and subline; three bordered cards (plan name, big price with '/mo', pill button, divider, uppercase FEATURES label, check list); middle plan has blue price, yellow button and a shadow
6. Testimonials: three columns each with circular avatar, blue name, role, quote
7. FAQ: left column small label, big heading, 'Ask us anything' and a large blue email link; right column plus-icon accordion with hairline dividers
8. Stats: three items with dark icon, bold number and two-line caption
9. CTA: near-black rounded block with subtle grid, centred white headline, subline and two app badges
10. Footer: wordmark, short description, link columns, social icons
11. Mobile: everything stacks; phone mockups shrink to 80% width; badges stack

Palette

Optimistic and trustworthy. Blue and sunny yellow on white feel modern, approachable and safe for money.

• page background#ffffff
• primary text#171717
• secondary text#454545
• brand blue (accents, prices, links)#304fff
• brand yellow (primary buttons)#fed835
• soft button fill#f3f3f5
• hero gradient lavender#e3e6fb
• dark CTA block#050a02
• input / card border#8c95a2
• muted on dark#d1d5db

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

Manrope 700 (observed), 60px/1.25 hero, 48px section headings, 20px card titles

Body

Source Sans 3 400 18px/1.55 (observed), 16px for bullets; uppercase FEATURES label 14px 700 with 0.05em tracking

Rounded-geometric display with a friendly humanist body. Prices in Source Sans 3 700 at 44px with tabular numerals.

Spacing and imagery

Airy; container 1200px; section padding 96px; feature rows 120px apart; card padding 24px. Radius: 9999px buttons and badges, 8px pricing cards, 24px CTA block, 40px phone frames. Shadow only on the highlighted plan (`0 8px 24px rgb(23 23 23 / 0.08)`).

Phone mockups showing an invented finance app (balance cards, bar charts, transaction list) in blue and yellow; small outline icons for bullets; grey wordmarks for partners; circular headshots for testimonials.

Components

• SiteHeader with PillButton
• GridGlowHero
• AppStoreBadge
• PhoneMockup
• LogoRow
• FeatureRow with IconBullet
• PricingCard (default, highlighted)
• TestimonialColumn
• FaqSplit with Accordion
• StatItem
• DarkCTABlock
• SiteFooter

Interactions

• Header gains a white background and hairline once scrolled
• Mobile menu opens as a full-width sheet from the yellow button
• Accordion plus icon rotates to a cross; one open at a time
• Phone mockups fade up as they enter the viewport (disabled for reduced motion)
• Pill buttons darken 6% on hover; badge buttons lift 1px

Data

• Plan{name, price (number|null), period, features[], cta, highlighted}
• FeatureStory{title, body, image, bullets[{icon, title, body}]}
• Testimonial{name, role, avatar, quote}
• Faq{question, answer}
• Stat{icon, value, caption}
• PartnerLogo{name, svg}

Guardrails

Experience

• Primary conversion is app download; keep store badges in the hero and final CTA only
• Each feature row: one heading, one sentence, three bullets, never more
• Pricing highlights one plan and uses the same feature order across plans
• Partner logos must be real partners with permission or removed; use neutral placeholder marks in the template
• Numbers in stats need a source or a 'sample' label

Accessibility

• Yellow buttons always carry black labels (15.09:1); never white text on yellow
• Blue #304fff for prices and links passes 5.69:1 on white
• Accordion uses buttons with aria-expanded; the plus icon is decorative
• App-store badges have accessible names like 'Download on the app store'
• Phone mockups have concise alt text describing the screen shown
• The small FEATURES label is 14px bold with tracking, not smaller

Security

• No forms other than an optional newsletter; if added, validate with zod and rate-limit
• Financial claims (encryption, fraud detection) must be accurate; no unverifiable security badges
• Outbound store links use rel="noopener"
• Avoid third-party trackers on the landing; if analytics are needed use a privacy-friendly, cookie-less option

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 **Brightmoor**, a one-page landing site for an invented personal-finance app that helps people budget, invest small amounts and keep their money safe. The page sells through phone screenshots, three feature stories, simple pricing, testimonials, FAQs and stats, and converts through app-store download badges.

### Stack
Next.js (App Router) + React + TypeScript, Tailwind CSS, Motion for gentle scroll reveals, Radix Accordion for FAQs and lucide-react icons. Content comes from typed data files, with no backend.

### Pages & layout
1. **Home**, top to bottom:
   - Header: a line-art icon and wordmark; Features, Pricing and Testimonials anchor links; a yellow pill "Get the app"; a yellow round menu button on mobile.
   - Hero: a faint square grid with a white radial glow; bold two-line headline ("Money, sorted in minutes"); an 18px intro; two black pill store badges; and a phone mockup cropped by the section edge over a pale lavender gradient.
   - Logos: "Trusted by 2,000+ teams" with the number in blue, and five grey neutral placeholder marks.
   - Three feature rows (Budgeting, Investing, Security), alternating mockup and copy. Each has a heading, one sentence and three icon bullets.
   - Pricing: three bordered cards (Basic $9, Plus $19 highlighted, Business custom). Each shows plan name, big price with "/mo", pill button, divider, uppercase FEATURES label and check list. The middle card has a blue price, a yellow button and a soft shadow.
   - Testimonials: three columns with round avatar, blue name, role and quote (sample).
   - FAQ split: a small label, a big heading, "Questions? Write to us" and a large blue email link on the left; a plus-icon accordion on the right.
   - Stats: three items with icon, bold number and caption.
   - Dark CTA: a near-black 24px-radius block with a subtle grid, white headline, subline and store badges.
   - Footer: wordmark, blurb, link columns, social icons.
2. **Responsive**: under 768px, sections stack, mockups scale to 80% width, badges stack and the menu opens as a sheet.

### Design system
- Colors: `--bg: #ffffff`, `--fg: #171717`, `--fg-2: #454545`, `--blue: #304fff`, `--yellow: #fed835` (always with black labels), `--soft: #f3f3f5`, `--lavender: #e3e6fb`, `--ink: #050a02`, `--border: #8c95a2`, `--on-ink-muted: #d1d5db`.
- Fonts: Manrope 700 for headings (60/48/20px, line-height 1.25); Source Sans 3 400 for body at 18px/1.55 (bullets 16px); prices Source Sans 3 700 at 44px with tabular numerals; labels 14px 700 uppercase with 0.05em tracking.
- Spacing: 8px grid; 96px sections; container 1200px; card padding 24px.
- Radius: pills 9999px; cards 8px; CTA block 24px; phone frames 40px.
- Shadows: highlighted plan only, `0 8px 24px rgb(23 23 23 / 0.08)`.
- Motion: 400ms fade-up on mockups with a 60ms stagger on bullets; header background transition at 150ms; everything off under reduced motion.

### Components & interactions
SiteHeader (turns solid white with a hairline after 24px of scroll), PillButton, AppStoreBadge, GridGlowHero, PhoneMockup (next/image inside a CSS frame), LogoRow, FeatureRow, IconBullet, PricingCard, TestimonialColumn, FaqSplit, Accordion (single-open, plus rotates to a cross), StatItem, DarkCTABlock, MobileMenuSheet, SiteFooter.

### Data & state
Typed arrays: `plans`, `featureStories`, `testimonials`, `faqs`, `stats`, `partners`. Mockup screens are original designs of the invented app, using made-up merchants such as "Corner Grocer" and "Transit Pass". Client state covers only the menu, accordion and scroll flag.

### Accessibility
One h1, with h2 per section and h3 for plans and bullets. Store badges have accessible names. Accordion triggers are buttons. Mockup alt text describes the screen ("Spending screen with weekly bar chart"). Visible 2px `--blue` focus rings. Never place white text on yellow. Reduced motion is respected.
Verified contrast: body text on white: #171717 on #ffffff = 17.93:1; secondary text on white: #454545 on #ffffff = 9.59:1; blue accent text on white: #304fff on #ffffff = 5.69:1; yellow button label: #000000 on #fed835 = 15.09:1; soft button label: #171717 on #f3f3f5 = 16.18:1; text on lavender gradient: #171717 on #e3e6fb = 14.49:1; white headline on dark CTA: #ffffff on #050a02 = 19.99:1; muted subline on dark CTA: #d1d5db on #050a02 = 13.56:1; card / input border on white: #8c95a2 on #ffffff = 3.03:1.

### Security
The static page has no user data. If a newsletter form is added, validate it with zod on a server action, rate-limit it and add a honeypot. Keep financial and security claims factual; no fake certification badges. External links use `rel="noopener"`. Any analytics must be cookie-less and privacy-friendly.

### Performance & SEO
Static export. Mockups served as AVIF/WebP with sizes, with the hero mockup prioritised and the rest lazy-loaded. Self-host Manrope and Source Sans 3 subsets. Title, description, OG image, FAQ structured data and canonical URL. Lighthouse 95+.

### Guardrails
- Invent the product name, copy, merchants, testimonials and stats; mark samples.
- Use neutral placeholder marks instead of real company logos.
- Design original app screens; don't reproduce another app's UI.
- Acceptance criteria:
  - [ ] Every section renders at 360px, 768px and 1280px without overflow
  - [ ] Accordion and mobile menu are keyboard accessible
  - [ ] Yellow buttons always have black text
  - [ ] Hero LCP under 2.0s on a mid-tier phone
  - [ ] All recorded contrast pairs pass

Open the builderAll templatesThis palette on its own