Kelvora

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

Sora's wide, slightly futuristic geometry suits the midnight-blue glow, Ubuntu Sans keeps the body friendly and legible, and Kalam stays as the one handwritten diagram note the design allows.

• SoraHeadings: H1 54px 500, H2 46px 400, -0.05em, line-height 1.1
• Ubuntu SansBody: body 16px/1.55, card copy 15px, pills 13px
• KalamHandwriting: optional handwritten note on one diagram

Patterns

• midnight canvas with radial blue glow arc under the hero
• review pill with avatars, count and star score
• centred two-line headline with single blue CTA
• logo row inside the glow
• pill eyebrow labels above centred section titles
• 2x3 benefit cards with glowing icon tiles and scanline texture
• numbered accordion list beside an illustrated node diagram
• hub-and-spoke workflow diagram with issue-count cards
• vertical step timeline with step pills
• comparison table versus alternatives
• case-study cards with metrics
• three service packages pricing
• newsletter subscribe block

States it is designed for

• Audit request form: validation, sending, success with call-booking link, error with retry
• Newsletter: invalid email, already subscribed, success
• Accordion list: paused auto-advance on hover/focus, resumes on blur
• Blog: loading skeleton, empty state
• Case studies: filter by industry with empty result
• 404 page with glow and back-home link
• Reduced motion: no pulse, no travelling dots, no auto-advance

Who it is for

• operations leaders at small and mid-size companies
• founders exploring AI automation
• agency buyers comparing automation partners

Layout

1. Header: wordmark left, links, dark 'book a call' button and blue 'free audit' button right
2. Hero: review pill, two-line H1, subline with ROI claim placeholders, blue CTA with arrow, logo row; wide elliptical blue glow arc below
3. Benefits: eyebrow pill, H2, subline, 2x3 dark cards with glowing icon tile, title and copy
4. Why us: numbered accordion list (01-05) with active item in blue and description, beside a large blue-framed panel with a hub-and-spoke diagram
5. Services: eyebrow, H2 and service cards
6. Process: six steps as a vertical timeline with step pills and hairline dividers
7. Comparison table, case studies, testimonials, pricing packages, FAQ, newsletter, footer
8. Section dividers are 1px blue-tinted hairlines with a faint glow
9. Mobile: header collapses; benefit cards single column; diagram panel moves below the list; step timeline centred

Palette

Futuristic, confident, night-mode tech. Glow suggests energy without neon clutter.

• canvas#010513
• card#02081d
• text primary#ebf3fe
• text secondary (80%)#bcc3cd
• text muted (50%)#767c88
• brand blue (button fill)#0070f7
• blue text / active index#4d97ff
• glow blue#1a4bff
• hairline / input border (fixed)#415a9f

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

Sora 500: H1 54px/1.1 at -0.05em; H2 46px/1.1 at 400 weight and -0.05em

Body

Ubuntu Sans 400, 16px/1.55 in 80% tint; card copy 15px/1.5 in muted only for secondary lines; pills 13px

Handwritten accent font (e.g., Kalam) may annotate one diagram; never for body. Numbers in benefit titles stay the same weight as text.

Spacing and imagery

1200px container, 20px card gaps, 120px sections. Radius 12px cards, 8px buttons, 999px pills, 24px diagram panel. Cards have 1px #415a9f40 borders plus an inner top highlight; icon tiles have a blue outer glow 0 0 24px rgba(0,112,247,0.45).

Glossy blue 3D icon tiles; hub-and-spoke diagrams with rounded nodes and connector lines; subtle scanline/grid texture in cards; client avatars; greyscale logos.

Components

• Review pill
• Blue CTA with arrow
• Glow arc backdrop
• Logo row
• Eyebrow pill
• Benefit card with icon tile
• Numbered accordion list
• Workflow hub diagram
• Service card
• Step timeline item
• Comparison table
• Case-study card with metrics
• Testimonial card
• Pricing package card
• FAQ accordion
• Newsletter form
• Contact / audit request form

Interactions

• Numbered list auto-advances and swaps the diagram; click/keyboard selects; progress bar under active item
• Diagram connectors animate a travelling dot from hub to nodes
• Benefit cards brighten border and icon glow on hover
• Glow arc gently pulses (opacity 0.8-1) every 6s
• Buttons: blue lightens on hover, arrow translates diagonally 2px; focus ring 2px #4d97ff
• Pricing cards: highlighted middle package with 'most chosen' badge

Data

• Benefit{icon, title, description}
• Capability{order, title, description, diagram_nodes[{label, count}]}
• ProcessStep{order, title, description}
• CaseStudy{slug, client_alias, industry, challenge, solution, metrics[{label, value}]}
• Package{id, name, price, billing (one_time|monthly), deliverables[], highlighted}
• AuditRequest{name, email, company, team_size, processes_to_automate, created_at}
• Subscriber{email, confirmed, created_at}

Guardrails

Experience

• ROI and hours-saved figures are clearly marked as example figures until backed by real case studies
• One primary action (free audit) repeated; book-a-call is the secondary dark button
• Diagram node labels are short nouns with a count; avoid dense text inside diagrams
• Process steps read in order on every breakpoint
• Comparison table uses checkmarks plus text, not only icons
• Case-study cards lead with the outcome metric

Accessibility

• Blue button uses #0070f7 so white labels reach 4.5:1
• Muted text never below the 50% tint (#767c88) and only for secondary lines
• Glow and scanline textures are decorative and never behind body text at high intensity
• Accordion list is a tablist with aria-controls to the diagram panel
• Diagram has a text list equivalent
• Review stars announced as 'rated 5.0 out of 5 from N reviews'

Security

• Audit and newsletter forms validated server-side with zod; honeypot and rate limits
• Double opt-in for newsletter; store confirmation timestamp
• RLS on audit_requests and subscribers: insert via server only, no anon select
• Do not ask for credentials or system access in the audit form

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 **Kelvora**, the marketing site for an AI automation studio that audits a company's operations and builds agents and workflows for it. The look is midnight blue with a soft electric glow. The page should make automation feel concrete (benefits, diagrams, process, case studies) and push visitors to request a free audit.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui (accordion, tabs, dialog), Motion (auto-advance list, travelling dots, glow), lucide-react, react-hook-form + zod. Supabase stores audit requests and newsletter subscribers. MDX for blog and case studies.

### Pages & layout
1. **Home**: header with wordmark, links, a dark "Book a call" button and a blue "Free audit" button. Hero: review pill (avatars, count, stars), a two-line H1, a subline, a blue CTA with arrow and a logo row, all above a wide elliptical glow arc. Benefits: eyebrow pill, H2, subline, 2x3 cards with glowing icon tiles. Why us: numbered list 01-05 on the left (active item blue with description and progress) driving a blue-framed diagram panel on the right (hub node connected to four item cards with counts). Then services, a six-step process timeline, a comparison table, case studies, testimonials, three pricing packages, FAQ, newsletter and footer.
2. **About**, **Pricing**, **Blog** + post, **Case study** detail, **Contact / Free audit**, **404**.
Mobile: benefit cards stack, the diagram sits under the list, and the timeline centres with step pills.

### Design system
- Colors: `--canvas: #010513`, `--card: #02081d`, `--text: #ebf3fe`, `--text-2: #bcc3cd`, `--muted: #767c88`, `--blue: #0070f7` (fills), `--blue-text: #4d97ff`, `--glow: #1a4bff`, `--border: #415a9f`.
- Fonts: Sora for display (H1 54px 500, H2 46px 400, both 1.1 line-height and -0.05em tracking). Ubuntu Sans for body (16px/1.55); pills 13px.
- Spacing: 8px base, 120px sections, 20px gaps, 1200px container.
- Radius: 12px cards, 8px buttons, 24px diagram panel, pill labels.
- Effects: card border `#415a9f` at 25% alpha plus a 1px inner top highlight; icon glow `0 0 24px rgb(0 112 247 / .45)`; glow arc is a blurred radial gradient.
- Motion: 6s auto-advance, 2s travelling dots, 6s glow pulse, 200ms hovers.
- Typeface: Kalam (Google Fonts) for optional handwritten note on one diagram.

### Components & interactions
ReviewPill, CTAButton (arrow nudge), GlowArc (aria-hidden), LogoRow, EyebrowPill, BenefitCard (hover brightens border and glow), CapabilityList (tablist, auto-advance with progress, pause on hover/focus) and WorkflowDiagram (SVG hub and nodes, travelling dots, plus a text list equivalent), ServiceCard, StepTimeline, ComparisonTable (checkmarks with text), CaseStudyCard (metric first), PackageCard (highlight badge), FaqAccordion, NewsletterForm (double opt-in), AuditForm.

### Data & state
Typed data for benefits, capabilities (with diagram nodes), steps and packages; MDX for posts and case studies. Tables: `audit_requests(id, name, email, company, team_size, processes_to_automate, created_at)` and `subscribers(id, email, confirmed_at, created_at)`. The active capability index is local state. All metrics and client names are invented.

### Accessibility
White on blue uses `--blue` (#0070f7). Glow layers sit behind headings only, never behind small text at full strength. The capability list uses the tabs pattern with aria-controls. Diagrams include an sr-only list. Stars are announced as text. Focus ring: 2px `--blue-text`. Reduced motion stops pulse, dots and auto-advance.
Verified contrast: primary text: #ebf3fe on #010513 = 18.19:1; secondary text: #bcc3cd on #02081d = 11.21:1; muted text on card: #767c88 on #02081d = 4.75:1; button label on blue: #ffffff on #0070f7 = 4.51:1; blue active index text: #4d97ff on #010513 = 6.96:1; card border / input border: #415a9f on #02081d = 3.02:1; focus ring: #4d97ff on #02081d = 6.81:1.

### Security
Forms post to server routes with zod, a honeypot and rate limits. Newsletter uses double opt-in through a transactional email service with a signed confirmation token. RLS is enabled on `audit_requests` and `subscribers`, with no anon select and inserts through the server only. The audit form never asks for passwords or system access.

### Performance & SEO
Draw glows with CSS gradients, not images. Diagrams are inline SVG. Hydrate the list and diagram only when visible. Load Sora 400/500 and Ubuntu Sans 400. Give pages unique metadata; add Service and FAQPage JSON-LD; generate OG images per case study. Target CLS 0 and LCP under 2s.

### Guardrails
- Write original copy; label all ROI and time-saved numbers as illustrative; use placeholder logos.
- Keep glows subtle behind text.
- Acceptance criteria: (1) the capability list and diagram stay in sync and work by keyboard; (2) diagrams have text equivalents; (3) the audit form and newsletter show every state; (4) reduced motion removes all looping animation; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own