Imbrosa

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

Be Vietnam Pro keeps the confident launch-ready type as named, and Martian Mono's wide, engineered letters make the eyebrow chips and beta badge look deliberate.

• Be Vietnam ProHeadings: H1 67px 500, H2 50px, -0.04em; big metrics 64px 600
• Be Vietnam ProBody: body 16px/1.5 400-500, subline 18px
• Martian MonoFigures and code: eyebrow chips and beta badge 12px uppercase +0.08em

Patterns

• near-black violet hero with radial indigo glow
• monospace uppercase beta badge above headline
• solid indigo plus outlined CTA pair
• ghosted dashboard backdrop with three crisp floating KPI cards (revenue sparkline, opportunities donut, new leads delta)
• logo row caption on dark
• light lavender feature section with selectable list and image panel
• active list item highlighted as a tinted card
• customer-story metric cards with big violet numbers and horizontal scroll arrow
• dark benefits section with large bordered showcase panels
• two-tone H3 (white then muted)
• pricing plans with trial CTAs
• FAQ and final CTA

States it is designed for

• Waitlist/beta form: validation, submitting, success with position, duplicate, error
• Demo booking: form states plus confirmation
• Feature list: default first item active
• Story carousel: arrows disabled at ends
• Pricing: monthly/annual toggle; trial CTA per plan
• Reduced motion: no bob/parallax, counters static

Who it is for

• B2B sales leaders
• startup founders running outbound
• revenue operations managers

Layout

1. Header on violet-black: logo tile and wordmark, centred links, outlined 'get started' button with arrow; hairline bottom border
2. Hero: mono beta badge, two-line centred H1, subline, indigo 'book demo' button with arrow and outlined 'get started free'
3. Product visual: faint ghosted dashboard frame with three sharp floating KPI cards overlapping it
4. Logo row with caption on dark, then transition to light
5. Features on lavender: mono eyebrow chip, centred H2 and subline, outlined button; left list of three items (active one in tinted card with learn-more link), right image panel with progress widget and leads card over abstract light render
6. Customer stories: mono eyebrow, left H2, horizontally scrolling cards with company wordmark placeholder, big violet metric, caption, avatar, name, role; arrow button
7. Benefits on dark: eyebrow, H2, subline, indigo button; stacked large bordered panels each with two-tone H3, learn-more outline button and a KPI widget
8. Feature grid, pricing plans, FAQ, final CTA, footer
9. Mobile: CTAs full width, KPI cards overlap and partially bleed, list-panel stacks, story cards swipe

Palette

Nocturnal, confident, launch-ready. Violet energy with crisp data points.

• dark canvas#070018
• light section#f4f3fb
• text on dark#f3f0f5
• muted on dark#978aa1
• heading on light#1d054f
• muted on light#6b5e75
• indigo primary#3e3af2
• violet accent on light#7c3aed
• violet accent on dark (fixed)#8d54ef
• border on dark (fixed)#5f5583
• card surface light#ffffff

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

Be Vietnam Pro 500: H1 67px/1.0 at -0.04em; H2 50px/1.0 at -0.04em; big metrics 64px 600 in violet

Body

Be Vietnam Pro 400-500, 16px/1.5 (subline 18px); eyebrows Martian Mono 12px uppercase with 0.08em tracking

Monospace only for eyebrow chips and the beta badge. Two-tone H3s: first sentence white, second muted.

Spacing and imagery

1100px container, 24px gaps, 120px sections. Radius 10px buttons, 16px KPI cards, 24px panels and story cards. KPI cards: 1px border rgba(62,58,242,0.5), inner glow; shadows 0 20px 50px rgba(62,58,242,0.25).

Ghosted dashboard backdrop; crisp KPI cards (sparkline, donut, delta); abstract glossy light-streak render behind widgets; placeholder partner marks; round avatars.

Components

• Header with outlined CTA
• Beta badge (mono)
• Indigo button with arrow
• Outlined button
• Ghost dashboard
• KPI card: revenue sparkline
• KPI card: opportunities donut with counts
• KPI card: new leads with delta
• Logo row
• Eyebrow chip (mono)
• Selectable feature list
• Image panel with progress widget
• Story metric card
• Scroll arrow button
• Benefit showcase panel
• Pricing plan card
• FAQ accordion
• Waitlist form

Interactions

• KPI cards float with slight vertical bob and parallax on scroll
• Feature list: selecting an item swaps the image panel; active item becomes tinted card
• Story cards scroll horizontally with snap; arrow buttons and keyboard
• Donut segments animate in; delta numbers count up
• Buttons: indigo brightens, arrow shifts up-right; focus ring 2px violet
• Header gains blur background after scrolling 40px

Data

• Kpi{kind (revenue|opportunities|leads), value, delta_pct, breakdown?{done, active, at_risk, inactive}}
• FeatureItem{order, title, description, image, widget}
• Story{company_alias, metric, metric_label, person_name, person_role, avatar}
• Benefit{title_primary, title_secondary, widget}
• Plan{id, name, price_monthly, price_annual, features[], cta}
• WaitlistEntry{email, company?, team_size?, created_at, position}

Guardrails

Experience

• Beta badge states status plainly and links to the changelog or waitlist
• Two CTAs only in hero: demo (solid) and free start (outlined)
• Story metrics are invented and labelled as sample until real
• Feature list items each map to one visual; no auto-rotation
• Keep ghost dashboard low-contrast so KPI cards read first
• No real company names or logos in story cards

Accessibility

• Violet text on dark uses #8d54ef (4.5:1)
• Mono eyebrows at 12px with 0.08em tracking and uppercase only for 1-2 words
• KPI cards contain real text values; donut has labelled counts
• Feature list is a tablist controlling the image panel
• Carousel has labelled prev/next and is scrollable with keyboard
• Glow and ghost dashboard aria-hidden

Security

• Waitlist and demo forms validated server-side with zod; honeypot and rate limit
• RLS: waitlist and demo tables insert via server only; no anon select
• Position computed server-side; neutral duplicate message
• Email confirmations via a transactional email service with signed links

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 **Imbrosa**, the launch site for an AI sales-automation product in beta that promises "sales on autopilot". A deep violet night canvas, crisp floating KPI cards and customer-story metrics make the claim concrete. Visitors book a demo, start free, or join the beta waitlist.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui (tabs, accordion, dialog), Recharts for the sparkline and donut, Motion for bob, parallax and counters, lucide-react, react-hook-form + zod. Supabase stores the waitlist and demo requests.

### Pages & layout
1. **Home**: header (logo tile, wordmark, centred links, outlined arrow CTA; blur background after scroll). Hero with an indigo radial glow: mono "beta now available" badge, a centred two-line H1, subline, an indigo "Book demo" button and an outlined "Start free" button. A ghosted dashboard frame with three crisp KPI cards (revenue with sparkline and delta; opportunities donut with done/active/at-risk/inactive counts; new leads with delta). Logo row. Lavender features section (mono eyebrow, H2, subline, outlined button; a three-item list with the active item as a tinted card, plus an image panel with a progress widget over an abstract render). Customer stories (horizontally scrolling metric cards). Dark benefits (H2, button, large bordered panels with two-tone H3s and KPI widgets). Feature grid, pricing, FAQ, final CTA, footer.
2. **Pricing**, **Customers**, **Waitlist**, **Contact / Demo**.
Mobile: full-width CTAs, KPI cards partly bleeding off-screen, stacked list and panel, swipeable stories.

### Design system
- Colors: `--night: #070018`, `--lavender: #f4f3fb`, `--text-dark-bg: #f3f0f5`, `--muted-dark-bg: #978aa1`, `--heading-light: #1d054f`, `--muted-light: #6b5e75`, `--indigo: #3e3af2`, `--violet: #7c3aed` (on light), `--violet-dark: #8d54ef` (on dark), `--border-dark: #5f5583`, `--surface: #ffffff`.
- Fonts: Be Vietnam Pro for display and body (H1 67px/1.0 at 500 and -0.04em; H2 50px; body 16px/1.5; subline 18px). Martian Mono for eyebrows (12px uppercase, 0.08em tracking).
- Spacing: 8px base, 24px gaps, 120px sections, 1100px container.
- Radius: 10px buttons, 16px KPI cards, 24px panels.
- Effects: KPI border `rgb(62 58 242 / .5)`, shadow `0 20px 50px rgb(62 58 242 / .25)`, radial glow behind the hero.
- Motion: 4s bob of ±6px, parallax up to 20px, 900ms donut draw.

### Components & interactions
Header (scroll blur), BetaBadge, IndigoButton (arrow shifts up-right), OutlineButton, GhostDashboard (aria-hidden), KpiRevenue, KpiOpportunities (donut with labelled counts), KpiLeads, LogoRow, MonoEyebrow, FeatureTabs (tablist; active item tinted; swaps ImagePanel), ProgressWidget, StoryCarousel (snap, labelled arrows, disabled at ends), BenefitPanel (two-tone H3), PricingCards with toggle, FaqAccordion, WaitlistForm, DemoForm.

### Data & state
Typed data for KPIs, feature items, stories (invented company aliases and people), benefits and plans. Tables: `waitlist(id, email, company, team_size, position, created_at)` and `demo_requests(id, name, email, company, message, created_at)`. The active feature tab is local state; the pricing period is a URL param.

### Accessibility
Violet text on dark uses `--violet-dark`. KPI cards expose their values as text. The donut lists its counts. Feature tabs follow the ARIA pattern. The carousel has labelled controls. Glow and ghost layers are aria-hidden. Mono uppercase is used only for one- or two-word labels. Focus ring: 2px `--violet-dark` on dark and `--violet` on light.
Verified contrast: text on dark: #f3f0f5 on #070018 = 18.19:1; muted on dark: #978aa1 on #070018 = 6.33:1; button label on indigo: #ffffff on #3e3af2 = 6.79:1; heading on light: #1d054f on #f4f3fb = 16.06:1; muted on light: #6b5e75 on #f4f3fb = 5.47:1; violet metric on light: #7c3aed on #f4f3fb = 5.17:1; violet text on dark: #8d54ef on #070018 = 4.55:1; border on dark: #5f5583 on #070018 = 3.05:1; indigo chart segment on dark: #3e3af2 on #070018 = 3.02:1.

### Security
Forms go through server routes with zod, a honeypot and IP rate limits. RLS: `waitlist` and `demo_requests` accept server inserts only, with no anon select. Waitlist position is computed server-side, and duplicate emails get a neutral message. Confirmation links are signed and sent through a transactional email service.

### Performance & SEO
Draw the glow in CSS. Render KPI cards as HTML with inline SVG charts; load Recharts only for below-the-fold widgets. Serve the abstract render as AVIF. Load Be Vietnam Pro 400/500/600 and Martian Mono 500. Give pages unique metadata and add SoftwareApplication JSON-LD. Target LCP under 2s.

### Guardrails
- Use original copy; invented stories, people and logos; no real company marks.
- The beta status must always be visible and truthful.
- Acceptance criteria: (1) KPI cards are legible at 390px; (2) feature tabs and carousel work by keyboard; (3) the waitlist handles duplicate, success and error states; (4) reduced motion stops bob and parallax; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own