Kavindo

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

Schibsted Grotesk holds very tight display tracking without clogging, and Public Sans is a plain, system-like neutral that lets the blueprint widgets speak.

• Schibsted GroteskHeadings: H1 64px 500 at -0.055em, H2 44px, tool titles 22px
• Public SansBody: body 16px/1.6 400-500, captions 14px, widget labels 12px with tabular numerals

Patterns

• thin gradient bar at the very top of the page
• vertical frame rails with corner node markers
• faint axis ticks and trend line in the hero margin
• social-proof pill above centred headline
• single dark pill CTA with coloured glow
• large dashboard mock in soft double frame
• logo row between hairline dividers
• three feature cards with mini widgets (task list, horizontal bars, stat grid)
• sticky left section title with tool list driving scroll-linked right panels
• deals table widget with stage pills
• kanban pipeline widget
• stat cards with one solid blue highlight card
• testimonial card
• two-plan pricing
• floating bottom pill navigation

States it is designed for

• Trial sign-up: validation, sending, verify email, error
• Login: invalid credentials, locked, loading
• Chart: loading skeleton, empty range
• Deals table: long company names truncate with tooltip
• Pricing: monthly/yearly toggle
• Reduced motion: no morph, no tilt

Who it is for

• sales team leads
• founders running sales
• revenue operations
• small B2B sales teams

Layout

1. 4px gradient bar (blue to violet to pink) at the top edge
2. Page framed by two vertical 1px rails with small square nodes at section joins; horizontal hairlines between sections
3. Hero: social-proof pill, two-line centred H1, subline, dark pill trial button with blue-violet glow, 'no card required' note; right margin shows faint y-axis ticks and a trend line
4. Dashboard mock in soft double frame: sidebar (inbox with count, project, activity, tasks, teams, messages, help, settings), header with avatar, balance card with sparkline, three KPI cards with deltas and sparklines, sales pipeline two-series chart with range tabs, filter and tooltip
5. Logo row with caption between hairlines
6. Why us: icon pill eyebrow, centred H2 and subline, three cards with widgets and captions
7. Key tools: sticky left column (eyebrow, H2, list of tools with active blue bar) and right column of stacked tool panels (automation dashboard, deals table, kanban pipeline) separated by hairlines
8. Analytics & reporting section, stats grid (one solid blue card), testimonial, pricing (two plans + enterprise note), FAQ, final CTA, footer
9. Floating bottom pill nav on mobile with section links
10. Mobile: rails hidden, sticky column becomes a horizontal tab strip, widgets scale

Palette

Crisp, engineered, calm. A blueprint feel that lets data widgets speak.

• background#ffffff
• panel#fafafa
• ink / dark button#181818
• body text#46484d
• brand blue (fixed)#446af3
• negative / spend series (fixed)#e42155
• cyan series (fixed)#16a1bf
• rail / hairline#e6e6ea
• input border / ticks (fixed)#919197
• gradient end violet#8a3ffc

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.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

Schibsted Grotesk 500: H1 64px/1.1 at -0.055em; H2 44px/1.2 at -0.057em; tool titles 22px

Body

Public Sans 400-500, 16px/1.6; captions 14px; widget labels 12px min with tabular figures

Very tight display tracking with relaxed body; no bold beyond 600.

Spacing and imagery

Precise: 800px inner content between rails on a 1100px frame, 24px card gaps, 140px sections. Radius 999px buttons and pills, 16px cards, 24px outer double frames (8px inner padding on #fafafa). Shadows minimal: 0 1px 2px rgba(0,0,0,0.04); CTA glow 0 8px 30px rgba(68,106,243,0.35).

Realistic light dashboard widgets (sparklines in blue and pink, bar lists, kanban cards, deals table with stage dots); small avatar stacks; faint chart axes as decoration; placeholder partner wordmarks.

Components

• Top gradient bar
• Frame rails with nodes
• Social-proof pill
• Dark pill CTA with glow
• Dashboard mock
• KPI card with sparkline and delta
• Pipeline chart with range tabs and tooltip
• Logo row
• Icon eyebrow pill
• Task list widget
• Horizontal bar widget
• Stat grid widget
• Sticky tool list
• Deals table with stage pills and probability bars
• Kanban pipeline widget
• Stats grid with highlight card
• Testimonial card
• Pricing card
• FAQ accordion
• Floating bottom nav
• Login form

Interactions

• Tool list highlights the item whose panel is in view (scroll spy); clicking scrolls to the panel
• Pipeline chart range tabs (1w/1M/6M/1Y) swap data with a morph
• Chart tooltips on hover and keyboard focus
• Dark CTA glow intensifies on hover; focus ring 2px blue
• Kanban cards tilt slightly on hover (decorative)
• Floating bottom nav appears after the hero on mobile

Data

• Kpi{label, value, delta_pct, series[]}
• PipelinePoint{date, revenue, spend}
• Deal{company_alias, amount, stage (discovery|proposal|negotiation|closed_won|closed_lost), probability}
• KanbanCard{company_alias, monthly_value, next_step, owner_avatar, due_in}
• Tool{order, title, description, widget}
• Plan{id, name, price_monthly, price_yearly, features[]}
• Testimonial{quote, name, role, company_alias}

Guardrails

Experience

• Mock companies, people and amounts are invented; stage pills use consistent stage names
• Frame rails and ticks stay decorative and very light; they never compete with content
• Single primary action (trial) throughout; secondary links are text
• Tool list and panels always stay in sync
• Numbers formatted consistently (currency with separators, no stray spaces)
• Highlight only one stat card in solid blue

Accessibility

• Brand blue #446af3 passes 4.5:1 with white and on white
• Negative deltas use #e42155 plus a minus sign
• Tool list is a nav with aria-current on the active item
• Charts have sr-only summaries and legends with text
• Decorative rails, nodes and axis ticks aria-hidden
• Floating bottom nav is keyboard reachable and does not cover focused content

Security

• Trial sign-up and login via hosted auth with rate limiting and generic errors
• RLS on profiles (owner only) and any lead tables (server insert only)
• Forms validated with zod on client and server
• No real customer data in mocks; example.com emails only

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 **Kavindo**, the marketing site for an AI-assisted sales platform focused on ROI: pipeline, deals, tasks and reporting. The design is minimal and precise, with a thin gradient top bar, vertical frame rails with small nodes, and faint chart axes in the margins, so the realistic dashboard and widget mocks carry the story. Every path leads to a 14-day free trial.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui on Radix (tabs, accordion, tooltip), Recharts for sparklines and the pipeline chart, Motion for the scroll spy and data morphs, lucide-react, react-hook-form + zod, date-fns. Supabase Auth for sign-up and login.

### Pages & layout
1. **Home**: 4px gradient bar; frame rails with square nodes where hairlines meet. Hero: social-proof pill, a centred two-line H1, subline, a dark pill trial button with a blue-violet glow, a "no card required" note, and faint axis ticks plus a trend line in the right margin. Dashboard mock in a soft double frame (sidebar with counts, header with avatar, balance card, three KPI cards with deltas and sparklines, a revenue-vs-spend pipeline chart with range tabs, filter and tooltip). Logo row between hairlines. Why-us: icon eyebrow pill, H2, subline, three widget cards (task list, traffic bars, stat grid). Key tools: a sticky left column (eyebrow, H2, tool list with active blue bar) and right-hand panels (automation dashboard, deals table with stage pills and probability bars, kanban pipeline). Analytics, a stats grid with one solid blue card, a testimonial, pricing (two plans plus an enterprise note), FAQ, final CTA, footer.
2. **Product**, **Pricing**, **About**, **Blog**, **Changelog**, **Contact**, **Login**, **Sign up**.
Mobile: rails hidden, the tool list becomes a horizontal tab strip, and a floating bottom pill nav appears after the hero.

### Design system
- Colors: `--bg: #ffffff`, `--panel: #fafafa`, `--ink: #181818`, `--text: #46484d`, `--blue: #446af3`, `--pink: #e42155`, `--cyan: #16a1bf`, `--rail: #e6e6ea`, `--tick: #919197`, `--violet: #8a3ffc`. Top bar: linear-gradient from `--blue` to `--violet` to `#ec4899`.
- Fonts: Schibsted Grotesk 500 for display (H1 64px/1.1 at -0.055em, H2 44px/1.2); Public Sans for body (16px/1.6), widget labels at least 12px with tabular numerals.
- Spacing: 8px base, 24px gaps, 140px sections, 1100px frame.
- Radius: pill buttons, 16px cards, 24px double frames with 8px inner padding on `--panel`.
- Shadows: `0 1px 2px rgb(0 0 0 / .04)`; CTA glow `0 8px 30px rgb(68 106 243 / .35)`.
- Motion: 400ms data morph, 200ms hovers, scroll-spy transitions at 150ms.

### Components & interactions
GradientBar, EdgeRails (aria-hidden), AxisDecor (aria-hidden), ProofPill, GlowCta, DashboardMock (Sidebar, BalanceCard, KpiCard, PipelineChart with range tabs and tooltip on hover and focus), LogoRow, EyebrowPill, TaskListWidget, BarsWidget, StatGridWidget, ToolList (nav with aria-current, scroll spy), DealsTable (stage pills with text, probability bars with percentages, truncation tooltip), KanbanWidget, StatsGrid (one highlight card), TestimonialCard, PricingCards with toggle, FaqAccordion, BottomNav (mobile), LoginForm, SignUpForm.

### Data & state
Typed JSON for KPIs, pipeline points, deals (invented company aliases), kanban cards, tools, plans and testimonial. `profiles(id, user_id, full_name, company)`. The range tab and pricing toggle are URL params; the scroll-spy index is local state. Mock emails use example.com.

### Accessibility
Blue meets 4.5:1 with white both ways. Negative deltas pair pink with a minus sign. The tool list uses aria-current. Charts carry sr-only summaries and text legends. Decorative rails and ticks are aria-hidden. The bottom nav never hides the focused element (add scroll padding). Focus ring: 2px `--blue` with offset.
Verified contrast: headline ink: #181818 on #ffffff = 17.76:1; body text on panel: #46484d on #fafafa = 8.77:1; CTA label on dark: #ffffff on #181818 = 17.76:1; blue link / highlight card label: #ffffff on #446af3 = 4.56:1; negative delta text: #e42155 on #ffffff = 4.52:1; cyan chart series: #16a1bf on #ffffff = 3.05:1; input border / ticks: #919197 on #ffffff = 3.13:1; focus ring blue: #446af3 on #ffffff = 4.56:1.

### Security
Supabase Auth handles sign-up and login, with email verification, rate-limited attempts and generic error messages. `profiles` has RLS with owner-only access (`user_id = auth.uid()`). Validate forms with zod on client and server. Mocks contain no real customer data.

### Performance & SEO
Server-render the hero chart and lazy-load Recharts for lower widgets. Draw rails and ticks with CSS borders and pseudo-elements. Load Schibsted Grotesk 500 and Public Sans 400/500. Give pages unique metadata and add SoftwareApplication JSON-LD. Target LCP under 1.8s and CLS 0.

### Guardrails
- Use original copy; invented companies, people and figures; placeholder logos only.
- Keep decorative lines ultra-light.
- Acceptance criteria: (1) the scroll spy tracks panels accurately on desktop and the tab strip works on mobile; (2) range tabs change chart data with an announced summary; (3) auth flows handle every state; (4) numbers are consistently formatted; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own