Loudbeam

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

Wix Madefor Text is a bright, legible grotesk with open counters, which keeps the sunny marketing cockpit clean and results-driven in a single family.

• Wix Madefor TextHeadings: hero 56px 600, H2 36px 500, big stats 72px 500
• Wix Madefor TextBody: lead 18px, body 16px/1.6 400, tag pills 14px 500

Patterns

• centered hero over a faint sky-tinted grid
• peach sparkle tag pill above headings
• headline with the product word in vivid orange
• solid orange + outlined black pill CTA pair
• full dashboard mock under hero (sidebar, KPI cards with mini bars, area chart with tooltip, traffic donut, campaigns table)
• trust caption + wordmark marquee
• big orange stat trio in a gray rounded panel
• stacked feature cards with overlapping tinted icon tiles
• how-it-works section
• social amplification feature grid
• four benefit tiles
• integrations grid
• pricing toggle monthly/yearly with three tiers incl. custom
• testimonial marquee
• FAQ

States it is designed for

• Pricing: monthly vs yearly, custom tier shows 'Talk to sales'
• Contact/demo form: validation, submitting, success, error
• Articles list: loading skeleton, empty category
• Campaign table mock: status chips active, paused, ended (text + colour)
• Reduced motion: static chart, bars and marquees
• Narrow screens: dashboard frame scrolls with a visible scroll hint

Who it is for

• Performance and growth marketers
• Small marketing agencies
• Social media managers
• Founders running their own ads

Layout

1. Nav: flame-glyph wordmark left, pill links (Features, Pricing, Articles, Contact), outlined 'Get started' right; hamburger on mobile
2. Hero: peach tag pill with sparkle, 56px two-line headline (product word in orange), gray two-line subline, orange 'Get started' + outlined black 'Try demo' pills; faint sky-blue grid background
3. Dashboard mock in a rounded white frame: sidebar (menu and account groups, active item in peach), header with date, search, icons and user chip; three KPI cards with mini bar charts (one highlighted bar each in pink, green, cyan); budget area chart with month axis and a tooltip; traffic donut with legend (paid, organic, direct); campaigns table with status chip
4. Trust row: caption left, invented wordmark marquee
5. Stats panel: gray rounded panel with three large orange percentages and captions, short prompt and outlined 'View more'
6. Features: tag pill, heading, subline, stacked full-width cards each with an overlapping tinted icon tile (cyan, pink, green), title and text
7. How it works, social amplification (cross-posting, scheduler, analytics, trend monitoring), benefit tiles, integrations, pricing (Starter, Pro, Custom) with monthly/yearly switch, testimonial marquee, FAQ, footer
8. Mobile: headline 36px, dashboard mock scrolls horizontally in its frame, pricing cards stack, toggle centered

Palette

bright, energetic, clean, confident, results-driven. A sunny marketing cockpit where orange marks every win.

• page background#ffffff
• soft panel#fafafa
• headings / outlined button#000000
• muted text (accessible fix)#737373
• brand orange (display words, big stats)#ff4d00
• orange for buttons and small text (accessible fix)#c93d00
• peach tint (tag pills, active nav)#fff0eb
• active chip mint / text#33ffb4
• chart pink (accessible fix)#ff578a
• chart cyan (accessible fix)#00a2c7
• chart green (accessible fix)#00a86a
• input border#949494

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

Wix Madefor Text 600, 56px hero, normal tracking, 1.1 line-height; section headings Wix Madefor Text 500 36px

Body

Wix Madefor Text 400, 18px lead / 16px body, 1.6 line-height

Big stats Wix Madefor Text 500 72px in brand orange. Tag pills 14px 500. Table and dashboard labels 13-14px inside the mock only.

Spacing and imagery

Clean SaaS rhythm: 1180px container, 120px sections, 24px gaps; dashboard frame 24px radius, cards 16px; buttons and nav links fully rounded (36px); icon tiles 12px radius overlapping the card top edge; soft card shadows.

Detailed light dashboard mock (KPI mini-bars, area chart with tooltip, donut, table), tinted icon tiles with line icons, invented wordmarks, small avatars; no photography beyond a user chip.

Components

• Pill nav
• Tag pill with sparkle
• Orange and outlined pill buttons
• Dashboard mock (Sidebar, Header, KpiCard with mini bars, AreaChart with tooltip, Donut with legend, CampaignTable with status chip)
• Wordmark marquee
• Stat panel
• Feature card with overlapping icon tile
• Social feature grid
• Benefit tile
• Integration grid
• Billing switch and plan cards
• Testimonial marquee
• FAQ accordion

Interactions

• Dashboard mock area chart draws in and the tooltip follows pointer or arrow keys
• KPI mini bars grow on view; highlighted bar pulses once
• Marquees scroll and pause on hover/focus
• Billing switch recalculates prices (yearly shows 20% lower per-month figure)
• Feature cards lift slightly on hover
• Pills darken on hover; 2px orange-dark focus ring

Data

• Kpi{label, value, period, bars[], highlight_color}
• BudgetPoint{month, amount}
• TrafficSource{name (paid|organic|direct), share}
• Campaign{name, status (active|paused|ended), objective, budget, impressions, ctr_goal}
• Feature{icon, tone (cyan|pink|green), title, body}
• Plan{id, name, monthly, yearly, per_user (bool), features[], custom (bool)}
• Testimonial{quote, name, role}
• Article{slug, title, excerpt, category, published_at}

Guardrails

Experience

• Vivid orange only for display words and big stats; buttons use the deeper orange
• Dashboard mock uses invented campaign names and plausible numbers
• Stats must have captions and be labelled as sample until real
• Write plain, specific copy; avoid inflated slogans
• Pricing shows per-user basis and yearly discount explicitly

Accessibility

• Muted text uses #737373 (the observed #808080 fails on white)
• Chart colours use the deepened pink, cyan and green so marks reach 3:1
• Donut legend includes percentages in text
• Area chart has a hidden data table and keyboard-navigable points
• Marquees pausable and static under reduced motion

Security

• Contact/demo form posts to an Edge Function with zod validation, honeypot and rate limit
• RLS on contact_messages: no anon read; sales role only
• Newsletter or demo emails sent via a transactional email service from the server
• No real customer data or ad-account data in mocks

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 **Loudbeam**, a campaign management platform for marketers: run ad campaigns, target audiences, A/B test creative, schedule social posts and read results in one dashboard. The site should feel bright and energetic, show a detailed dashboard immediately and make pricing easy to compare.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Switch, Accordion, Table), lucide-react, Recharts (area chart, bar sparkles, donut), Motion for draw-ins and marquees, react-hook-form + zod for contact. Supabase Edge Function for contact/demo requests.

### Pages & layout
1. **Home**: pill nav; hero (tag pill, 56px headline with orange product word, subline, orange + outlined pills) over a faint sky grid; dashboard mock; trust marquee; stats panel; features (stacked cards with overlapping icon tiles); how it works; social amplification grid; benefit tiles; integrations; pricing with switch; testimonial marquee; FAQ; footer.
2. **Pricing**, **Articles** + article, **Contact / demo**.
Mobile: 36px headline; dashboard frame scrolls horizontally with a fade hint; single-column cards; pricing stacked.

### Design system
- Colors: `--bg: #ffffff`, `--panel: #fafafa`, `--fg: #000000`, `--muted: #737373`, `--brand: #ff4d00` (display ≥24px and stats only), `--brand-strong: #c93d00` (buttons, small text), `--peach: #fff0eb`, `--mint: #33ffb4`, `--mint-text: #006641`, `--chart-pink: #ff578a`, `--chart-cyan: #00a2c7`, `--chart-green: #00a86a`, `--input-border: #949494`, `--ring: #c93d00`.
- Fonts: Wix Madefor Text; hero 56px/1.1 600; H2 36px 500; lead 18px; body 16px/1.6; stats 72px 500.
- Spacing: 8px base; sections 120px / 72px; container 1180px.
- Radius: dashboard frame 24px, cards 16px, icon tiles 12px, pills 36px.
- Shadows: cards `0 4px 20px rgba(0,0,0,.06)`.
- Motion: chart draw 800ms; bars 500ms stagger 60ms; marquee 30s.

### Components & interactions
PillNav, TagPill, PillButton (brand | outline), DashboardMock (Sidebar, Header, KpiCard, BudgetAreaChart with keyboard tooltip, TrafficDonut with text legend, CampaignTable with StatusChip), WordmarkMarquee, StatPanel, FeatureCard (overlapping IconTile tone), SocialGrid, BenefitTile, IntegrationGrid, BillingSwitch + PlanCard, TestimonialMarquee, FaqAccordion, ContactForm.

### Data & state
Static JSON: KPIs, budget series, traffic shares, campaigns (invented names like "Spring Launch Push"), features, plans (Starter, Pro, Custom; yearly = 20% off), testimonials, articles. Billing period in URL. Contact states: idle, invalid, submitting, success, error.

### Accessibility
Body 16px+. Muted `#737373`. Orange `#ff4d00` only for large display text and stats; small orange text uses `#c93d00`. Charts have hidden tables, legends with percentages and keyboard focusable points. Status chips carry text. Marquees pausable; reduced motion disables animation. Focus ring 2px `--ring` with 2px offset.
Verified contrast: heading text on white: #000000 on #ffffff = 21.00:1; muted text on white: #737373 on #ffffff = 4.74:1; muted text on soft panel: #737373 on #fafafa = 4.54:1; white label on orange button: #ffffff on #c93d00 = 5.06:1; orange tag text on peach pill: #c93d00 on #fff0eb = 4.56:1; large orange display word / stats on white (large text): #ff4d00 on #ffffff = 3.33:1; active chip text on mint: #006641 on #33ffb4 = 5.41:1; chart pink on white: #ff578a on #ffffff = 3.01:1; chart cyan on white: #00a2c7 on #ffffff = 3.00:1; chart green on white: #00a86a on #ffffff = 3.08:1; input border on white: #949494 on #ffffff = 3.03:1; focus ring on white: #c93d00 on #ffffff = 5.06:1.

### Security
Contact Edge Function: zod validation, honeypot, per-IP rate limit, service-role insert; `contact_messages` RLS with no anon select/update/delete; emails sent server-side via a transactional email service. Mocks contain no real ad-account or customer data.

### Performance & SEO
Recharts lazy-loaded once the dashboard enters the viewport; mock rendered as static SVG first. Static generation, per-page meta, OG image of the dashboard, Product and FAQ structured data (replace placeholders before launch). Target LCP under 2s.

### Guardrails
- Invented wordmarks, names and figures only; no real brands or people.
- Avoid hyperbolic copy; say what the feature does.
- Acceptance criteria:
  - [ ] Dashboard mock readable at 1440px and scrollable at 390px
  - [ ] Billing switch updates all tiers correctly
  - [ ] Charts keyboard accessible with text alternatives
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own