Lilaboard

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 Display has a round, confident 800 that makes the candy-coloured numbers feel approachable, and its 500 is comfortable for body copy.

• Wix Madefor DisplayHeadings: display 62px 800 at -0.04em, H2 48px 800, stats 56px 800
• Wix Madefor DisplayBody: body 16-18px/1.6 500, labels 13px 700 uppercase +0.06em

Patterns

• floating white nav bar card with pill CTA
• heavy display headline beside a scattered collage of dashboard widgets
• inline email capture pill (input + dark button) in hero
• big soft arc shape and blurred colour blobs behind hero
• logo row with vertical separators
• pink feature panel with widget cluster (donut KPI tiles + bar chart)
• three colour-blocked benefit cards (butter, plum, pink)
• dark plum stats section with bento of coloured tiles and a photo
• icon + bold-lead text row with separators
• integrations section
• testimonial carousel
• blog teasers with explore button

States it is designed for

• Email capture: invalid email, submitting, success message inline, already registered, error
• Carousel: paused on hover/focus; reduced motion shows a static list
• Widgets: static final values under reduced motion
• Blog: loading skeleton and empty state
• Contact form: validation, success, error
• Pricing page: monthly/yearly toggle

Who it is for

• Small business owners
• Startup operations leads
• Sales and marketing managers wanting simple reporting
• Agencies pitching an analytics add-on

Layout

1. Floating nav card (white, rounded, inset from edges): logo left, links (Home, About, Features dropdown, Pricing, Blog), butter-yellow 'Contact us' pill right; hamburger on mobile
2. Hero split on lavender with a large lilac arc and blurred pink/blue blobs: left heavy four-line headline, paragraph, email pill (input + plum 'Get started' button); right a scattered collage of widgets (donut KPI tiles in lilac and butter, active-users card with split bar, meeting card with avatars, plum yearly-revenue bar chart with value tags, growth chip)
3. Logo row with vertical separators and a divider line
4. Centered heavy heading, then a pink rounded panel: 'boost productivity' copy + dark pill left, donut tiles + white bar-chart card right
5. Three benefit cards: butter (security), plum (integrations), pink (support), each with icon, title, text
6. Dark plum section with a huge faint arc: heavy centered heading, subline, 2x2 bento of tiles (butter statement tile, lilac stat tile with photo, lilac stat tile, pink statement tile)
7. Icon + bold-lead sentence row with separators
8. Integrations section, testimonial carousel, blog teasers, footer
9. Mobile: nav card with hamburger, headline centered 32px, email input and button stacked full width, widget collage scaled below

Palette

expressive, playful, bold, optimistic, confident. A candy-coloured control panel that makes numbers feel approachable.

• page background (lavender)#f8f1fd
• card / nav surface#ffffff
• deep plum (text, dark section, dark button)#3a1855
• pink panel#f7d8f7
• butter yellow (CTA pill, tiles)#f3f199
• lilac tiles#b97ee9
• lilac chart bars (accessible fix)#b16fe6
• muted text (accessible fix)#676d8e
• input border#8a7a99

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 Display 800, 62px with -0.04em tracking, 1.0 line-height; set in title case (the observed all-caps display converted for readability)

Body

Wix Madefor Display 500, 16-18px / 1.6

Uppercase only for short stat labels and eyebrows with 0.06em tracking. Stats 56px 800.

Spacing and imagery

Chunky and rounded: 1120px container, 96-120px sections, 20px gaps; cards and panels 20-24px radius; all buttons and inputs fully rounded pills (100px); widgets have soft shadows and slight overlaps.

Floating dashboard widgets (donut KPIs, bar charts with value tags, meeting card, split bars), soft blurred colour blobs, huge arc shapes, a small interior photo tile, line icons, placeholder partner marks.

Components

• Floating nav card
• Email capture pill
• Widget collage (donut KPI, split bar card, meeting card, revenue bar chart, growth chip)
• Logo row with separators
• Colour-blocked benefit card
• Feature panel with widget cluster
• Bento stat tiles on dark
• Icon + bold-lead text row
• Integration grid
• Testimonial carousel
• Blog card
• Pill buttons (butter, plum)

Interactions

• Widgets float in with staggered spring and bob gently
• Donut rings animate to their value on view
• Bar charts grow from baseline; tags pop in
• Features dropdown opens on click/Enter
• Carousel with arrows, dots and swipe
• Pills darken on hover; 2px plum focus ring (butter ring on dark sections)

Data

• Widget{type (donut|bar|split|meeting|chip), title, values[], period}
• Benefit{icon, title, body, tone (butter|plum|pink)}
• Stat{value, label}
• Integration{name, icon, category}
• Testimonial{quote, name, role, avatar}
• Post{slug, title, excerpt, cover, published_at}
• Lead{email, created_at, source}

Guardrails

Experience

• Hero email capture is the primary conversion; keep it above the fold on desktop and mobile
• Use only plum text on butter, pink and lilac surfaces
• Widget numbers are invented and consistent across the page
• Keep display headings short (under eight words)
• Stats tiles must have a clear label, not just a number

Accessibility

• Display headings in title case; uppercase only for short labels with tracking
• Muted copy uses #676d8e to pass on lavender and white
• Yellow chart bars get a 1px plum outline so they meet 3:1 against white
• Email input has a visible label (visually hidden label plus placeholder is not enough alone)
• Animations respect prefers-reduced-motion

Security

• Lead capture via Edge Function with zod validation, honeypot and per-IP rate limit
• RLS on leads: no anon read
• Double opt-in via a transactional email service
• Contact form strips markup and limits message length

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 **Lilaboard**, an all-in-one operations and reporting tool for small businesses. The site should be loud in a friendly way: lilac, butter and pink colour blocks, heavy headlines and floating dashboard widgets that make analytics look approachable. The main conversion is the hero email capture.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Carousel), lucide-react, Recharts for bars and donuts, Motion for widget springs and count-ups, react-hook-form + zod for email capture and contact. Supabase Edge Function stores leads.

### Pages & layout
1. **Home**: floating nav card; hero split (heavy headline, paragraph, email pill; widget collage over lilac arc and blurred blobs); logo row; "increase efficiency" heading + pink feature panel; three colour-blocked benefit cards; dark plum stats section with bento tiles; icon + bold-lead row; integrations; testimonials carousel; blog teasers; footer.
2. **About**, **Features**, **Integrations**, **Pricing** (monthly/yearly), **Blog** + post, **Contact**.
Mobile: nav card with hamburger Sheet, centered 32px headline, stacked email input and button, collage scaled under the hero, bento 1 column.

### Design system
- Colors: `--bg: #f8f1fd`, `--card: #ffffff`, `--plum: #3a1855`, `--pink: #f7d8f7`, `--butter: #f3f199`, `--lilac: #b97ee9`, `--lilac-chart: #b16fe6`, `--muted: #676d8e`, `--input-border: #8a7a99`, `--ring: #3a1855` (butter `#f3f199` on plum).
- Fonts: Wix Madefor Display; display 62px/1.0 800 -0.04em title case; section H2 48px 800; body 16-18px/1.6 500; labels 13px 700 uppercase 0.06em.
- Spacing: 8px base; sections 112px / 72px; container 1120px; gap 20px.
- Radius: panels 24px, cards 20px, pills 100px.
- Shadows: widgets `0 16px 40px rgba(58,24,83,.12)`.
- Motion: widget spring (stiffness 120), bob 4s 4px; donut 900ms; bars 600ms stagger 40ms.

### Components & interactions
FloatingNav (Features dropdown), EmailCapture (labelled input + button, inline status), WidgetCollage (DonutKpi, SplitBarCard, MeetingCard, RevenueBars with value tags, GrowthChip), LogoRow, FeaturePanel, BenefitCard (tone prop), BentoStats (tiles with plum text), IconLeadRow, IntegrationGrid, TestimonialCarousel, PostCard, PillButton (butter | plum).

### Data & state
Static JSON for widgets (invented values), benefits, stats (sample), integrations (generic icons), testimonials (invented people), posts. EmailCapture states: idle, invalid, submitting, success, duplicate, error. Carousel index local.

### Accessibility
Title-case display headings; uppercase limited to short labels. Plum text on all light tints. Yellow bars outlined in plum. Email input has a proper label. Widgets are aria-hidden with a one-line summary for screen readers. Reduced motion freezes springs, bobs, donuts and carousel. Focus ring 2px `--ring`, butter on plum sections.
Verified contrast: body text on lavender: #3a1855 on #f8f1fd = 13.17:1; white text on plum button/section: #ffffff on #3a1855 = 14.57:1; plum label on butter pill: #3a1855 on #f3f199 = 12.38:1; plum text on pink panel: #3a1855 on #f7d8f7 = 11.18:1; plum text on lilac tile: #3a1855 on #b97ee9 = 5.01:1; muted text on lavender: #676d8e on #f8f1fd = 4.57:1; lilac chart bars on white card: #b16fe6 on #ffffff = 3.34:1; plum outline on yellow bars against white: #3a1855 on #ffffff = 14.57:1; input border on white: #8a7a99 on #ffffff = 3.94:1; butter focus ring on plum section: #f3f199 on #3a1855 = 12.38:1.

### Security
Lead capture Edge Function: zod email validation, honeypot, per-IP rate limit, service-role insert, double opt-in via a transactional email service. `leads` RLS allows no anon select/update/delete. Contact messages trimmed and length-limited.

### Performance & SEO
Widgets as lightweight JSX; Recharts lazy-loaded below the fold. Blobs as CSS radial gradients. Per-page meta and OG image; blog RSS. Target LCP under 2s (headline).

### Guardrails
- Placeholder partner marks only; invented testimonial names.
- Keep numbers consistent between hero widgets and the stats section.
- Acceptance criteria:
  - [ ] Hero email capture works with all states at 390px and 1440px
  - [ ] Colour-blocked cards and bento keep plum text on every tint
  - [ ] Carousel and dropdown are keyboard operable
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own