Kinnaro

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

Afacad Flux is a soft, open sans with a wide weight range, which keeps the pastel, floating-shape pages friendly and futuristic without looking cold.

• Afacad FluxHeadings: H1 80px 500 at -0.05em, H2 56px at -0.04em, stat numbers 40px 500
• Afacad FluxBody: body 16px/1.5 400, eyebrows 13px uppercase +0.3em

Patterns

• floating pill navbar with logo, grid-menu icon and calendar button
• count badge pill above hero headline
• mixed-colour headline with an outlined capsule around a gradient keyword
• slash-stripe glyph lead-in on headline
• soft 3D blob shapes and adjustable-hue video background
• dashboard showcase card (sidebar, stat tiles, diverging bar chart, donut with callout)
• bento feature tiles with dotted halftone backdrops
• radial rings stat tile
• circular text badge with orbiting integration icons
• four-step process cards with isometric line icons
• spaced uppercase eyebrow with short underline
• counter stat grid
• founders and timeline sections
• inline CTA row with divider

States it is designed for

• Trial form: validation, sending, success, error
• Demo booking via calendar button: opens dialog with time slots, loading, no slots available, confirmed
• Counters: before-visible show final values for no-JS
• Pricing toggle monthly/yearly
• Blog empty and loading states
• Reduced motion: shapes static, no orbit, counters static

Who it is for

• startup founders
• growth and campaign marketers
• small agencies
• solo operators

Layout

1. Floating pill navbar centred at the top: logo, 3x3 dot menu that opens a full-screen section index, round calendar/book button
2. Hero: count badge pill, two-line headline mixing slate and periwinkle words with a gradient keyword inside an outlined capsule, subline, solid periwinkle trial button and white pill secondary, fine print, uppercase partner caption with logo row; background of blurred pastel video/gradient and floating 3D X shapes
3. Dashboard showcase card: logo, search, create button, bell; sidebar nav; 'performance overview' stat tiles; diverging bar chart (two series); donut with a raised callout slice
4. Feature bento: 3 columns of white tiles over halftone dots (search bar, mini overview, rings stat, custom reports folder, integration orbit, strategy grid, process sliders)
5. How it works: eyebrow, two-tone H2, subline, four step cards with 'Step N' pill and isometric icon
6. Inline CTA row: text and pill button separated by a hairline
7. Integrations: eyebrow left, big two-tone H2, bento of capability tiles, icon grid of platforms
8. Performance counters, founders, story timeline, testimonials, pricing, FAQ, 'let's talk' CTA, footer
9. Mobile: navbar stays floating; counters 2 columns; bento single column; headline capsule wraps onto its own line

Palette

Soft, optimistic, futuristic-friendly. Pastel light and floating shapes make AI analytics feel approachable.

• background#f9fafb
• surface#ffffff
• slate headline#465478
• periwinkle text#545c9e
• periwinkle accent (fixed)#596bce
• button fill (fixed)#646fc6
• lavender tint#dfe1f5
• cyan gradient stop (fixed)#119cc8
• coral chart series (fixed)#ff6027
• pink chart series#f77fc6
• hairline / input border (fixed)#838dc4

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

Afacad Flux 500: H1 80px/1.0 at -0.05em; H2 56px/1.05 at -0.04em; two-tone words (slate + periwinkle, gradient keyword cyan to periwinkle)

Body

Afacad Flux 400, 16px/1.5 in periwinkle-slate; eyebrow labels 13px uppercase with 0.3em tracking; stat numbers 40px 500

Keep gradient text only for the one hero keyword and H2 lead words at 48px+.

Spacing and imagery

Airy: 1200px container, 16px gutters, 20px bento gaps, 140px sections. Radius 999px nav and buttons, 16px tiles, 24px dashboard card. Soft shadows 0 20px 40px rgba(84,92,158,0.12); nav glass with 16px backdrop blur and 70% white.

Glossy pastel 3D X-shaped blobs; soft gradient/video background with adjustable hue; halftone dot fields; isometric line icons in cyan/periwinkle; clean dashboard charts in periwinkle, coral, pink and cyan; circular text badge.

Components

• Floating glass navbar
• Full-screen section menu
• Count badge pill
• Two-tone headline with gradient capsule
• Primary pill button
• Secondary white pill
• Partner logo row
• 3D shape layer
• Dashboard showcase card
• Stat tile
• Diverging bar chart
• Donut with callout
• Bento tile with halftone
• Rings stat
• Integration orbit badge
• Step card with pill
• Inline CTA row
• Counter grid
• Founder card
• Timeline item
• Pricing card
• Contact form

Interactions

• 3D shapes drift slowly and parallax with pointer (max 16px)
• Section menu opens full screen with staggered links; Escape closes
• Counters count up once visible; rings draw
• Integration icons orbit the circular badge; pause on hover
• Bento tiles lift 2px on hover; focus ring 2px periwinkle
• Background hue configurable via a single CSS variable

Data

• Step{order, title, description, icon}
• BentoTile{kind (search|overview|rings|reports|orbit|grid|sliders), title, value?}
• Integration{name_generic, icon, category}
• Counter{label, value, suffix}
• Founder{name, role, portrait, bio}
• Milestone{year, title, description}
• Plan{id, name, price_monthly, price_yearly, features[]}
• DemoSlot{starts_at, duration_min, available}

Guardrails

Experience

• One gradient keyword per headline; the rest stays slate or periwinkle
• Dashboard showcase data is invented and internally consistent (totals match charts)
• Every section has an uppercase eyebrow for orientation; keep them to two words
• Calendar button always opens the same demo dialog
• Step cards read left to right with numbered pills
• 3D shapes never overlap text or buttons

Accessibility

• Gradient keyword uses stops #119cc8 to #596bce so every point is at least 3:1 at 80px
• Primary buttons use #646fc6 so white labels pass 4.5:1
• Chart series have legends with text and distinct shapes
• 3D shapes and halftones aria-hidden; video muted with pause control
• Section menu is a dialog with focus trap
• Counters announce final values

Security

• Trial and demo requests validated server-side with zod; rate limits
• Demo slots read from a table with RLS read-only for anon on future available slots; bookings insert via server
• No PII in URLs; confirmation emails via a transactional email service
• Video and images served from own storage

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 **Kinnaro**, the landing site for an AI growth and campaign-insights product for startups and small marketing teams. It feels soft and glowing: a periwinkle palette, a glassy floating navbar, pastel 3D shapes, and a detailed dashboard showcase. It explains a four-step process and integrations, then converts to a free trial or a booked demo.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui on Radix (dialog, accordion), Recharts for the showcase charts, Motion for drift, orbit and counters, lucide-react, react-hook-form + zod, date-fns for demo slots. Supabase stores trial sign-ups, demo slots and bookings.

### Pages & layout
1. **Home**: floating glass pill navbar (logo, 3x3 dot menu opening a full-screen section index, round calendar button opening the demo dialog). Hero: count badge pill, a two-line headline (slate and periwinkle words, a slash-stripe glyph, and a gradient keyword inside an outlined capsule), subline, a periwinkle trial pill and a white pill, fine print, a spaced uppercase partner caption and logo row. Background is a soft gradient/video with a hue variable and floating 3D X shapes. Then the dashboard showcase card, a feature bento over halftone dots, how-it-works (eyebrow, two-tone H2, four step cards), an inline CTA row, integrations (eyebrow, H2, capability bento, icon grid), counters, founders, timeline, testimonials, pricing, FAQ, "let's talk" CTA and footer.
2. **Features**, **Integrations**, **Pricing**, **About**, **Journal** + post, **Contact**.
Mobile: the navbar keeps floating, counters go two per row, the bento is a single column, and the capsule keyword wraps onto its own line.

### Design system
- Colors: `--bg: #f9fafb`, `--surface: #ffffff`, `--slate: #465478`, `--peri-text: #545c9e`, `--peri: #596bce`, `--btn: #646fc6`, `--lavender: #dfe1f5`, `--cyan: #119cc8`, `--coral: #ff6027`, `--pink: #f77fc6`, `--border: #838dc4`, `--hue: 235` (background filter).
- Fonts: Afacad Flux from Google Fonts. H1 80px/1.0 at 500 and -0.05em; H2 56px/1.05; body 16px/1.5; eyebrows 13px uppercase with 0.3em tracking.
- Spacing: 8px base, 20px bento gaps, 140px sections.
- Radius: pill nav and buttons, 16px tiles, 24px showcase.
- Shadows: `0 20px 40px rgb(84 92 158 / .12)`; nav glass `backdrop-filter: blur(16px)` on 70% white.
- Motion: shape drift over 12s, pointer parallax up to 16px, orbit 30s, count-up 1s.

### Components & interactions
GlassNav, SectionMenu (dialog, staggered links, Escape), CountBadge, HeroHeadline (GradientCapsule), PillButton, PartnerRow, ShapeLayer (aria-hidden), BackgroundVideo (muted, pause, hue variable), DashboardShowcase (Sidebar, StatTile, DivergingBars in two series with legend, DonutCallout), BentoTile variants (search, overview, rings, reports, orbit, grid, sliders), StepCard, InlineCta, IntegrationGrid, CounterGrid, FounderCard, Timeline, PricingCards, FaqAccordion, DemoDialog (slot list, loading, empty, confirmed).

### Data & state
Typed data for steps, bento tiles, integrations, counters, founders, milestones and plans. Tables: `demo_slots(id, starts_at, duration_min, available)`, `demo_bookings(id, slot_id, name, email, company, created_at)` and `trial_signups(id, email, created_at)`. The pricing period is a URL param; dialog state is local. Showcase data is invented and consistent.

### Accessibility
The gradient keyword's worst stop meets 3:1 at display size. White labels sit on `--btn`. Charts have legends and sr-only summaries. Shapes and halftones are aria-hidden, and the video has a pause control. The section menu and demo dialog trap focus. Eyebrows are short and tracked. Focus ring: 2px `--peri`.
Verified contrast: slate headline: #465478 on #f9fafb = 7.18:1; periwinkle body text: #545c9e on #f9fafb = 5.91:1; periwinkle accent text: #596bce on #ffffff = 4.75:1; button label: #ffffff on #646fc6 = 4.53:1; gradient keyword cyan stop (80px): #119cc8 on #f9fafb = 3.04:1; coral chart series: #ff6027 on #ffffff = 3.02:1; hairline / input border: #838dc4 on #ffffff = 3.2:1; focus ring: #596bce on #f9fafb = 4.55:1.

### Security
Bookings and sign-ups go through server routes with zod and rate limits. RLS: anon may select `demo_slots` only where `available and starts_at > now()`; `demo_bookings` and `trial_signups` accept server inserts only, with no anon select. A transaction marks the slot unavailable on booking. Confirmation goes out through a transactional email service. Keep PII out of URLs.

### Performance & SEO
Keep the background video under 1.5MB with a poster. Export 3D shapes as optimised WebP or AVIF with transparency. Lazy-load Recharts. Load Afacad Flux 400/500. Give pages unique metadata and add SoftwareApplication JSON-LD. Target LCP under 2.2s.

### Guardrails
- Use original copy; invented founders, partners and figures; generic integration icons.
- Keep shapes clear of text.
- Acceptance criteria: (1) the demo dialog handles loading, empty and confirmed states; (2) double booking is impossible; (3) reduced motion stops drift, orbit and counters; (4) hue changes via one variable; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own