Kalvero

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

TikTok Sans has the optical-size axis the design relies on, so the extreme 100px headlines tighten properly while the 16px body stays open in the engineering-lab bento.

• TikTok SansHeadings: hero 100px 500 at -0.05em, titles 96px, statements 35px, tile titles 28px, display optical size
• TikTok SansBody: body 16px/1.5 400, index labels and notes 14px

Patterns

• oversized vertical wordmark running down the hero edge
• giant display headline with accent-coloured keywords
• particle-field video background
• em-dash lead-in on headline
• inline stat pair with superscript units
• numbered section index (001, 002…) with left rule
• huge muted section titles
• bento product grid mixing photo, solid-accent and plain tiles
• square arrow buttons in accent colour
• progress stat tile for a beta release
• expanding accordion columns for services
• dot-matrix decorative graphic
• segmented progress indicator for carousels
• modular sections that can be reordered

States it is designed for

• Video background: poster image while loading, static poster under reduced motion or save-data
• Beta tile: progress value with text label; completed state swaps to 'available now'
• Contact/demo form: validation, sending, success, error with retry, rate-limited notice
• Sign-up: email taken, weak password, verification email sent
• Pricing: monthly/annual toggle; custom tier shows 'contact sales' instead of price
• Modules missing content collapse cleanly without leaving empty index headers

Who it is for

• technical founders
• platform and infrastructure leads
• AI/ML product teams
• studios pitching technical products

Layout

1. Hero: near-black canvas with a slow particle-field video; a huge vertical wordmark in accent orange along the left edge; small tagline with orange second line; giant 3-4 line headline (em-dash lead-in, accent keywords); 'see it in action' mini block with orange demo button; stat pair; small release card top right
2. Statement: very large warm-grey sentence revealed line by line on scroll
3. Work: huge muted title, numbered index row (number + label with orange left rule), large statement, small side note; bento grid of product tiles (large photo tile, solid orange lineup tile with dot-matrix, small photo/plain tiles with arrow buttons, beta progress tile)
4. Services: numbered index, horizontal expanding columns (one open in orange with image and copy, others collapsed with number and label), side card with dot matrix; segmented progress bar and 'explore' link
5. Process, analytics, pricing, team, testimonials, labs/news, contact: each a module with the same index header
6. Closing band in solid orange with italic running statements, then giant 'let's talk' footer title
7. Mobile: vertical wordmark becomes a horizontal top wordmark; headline scales to 44px; bento tiles become one column; expanding columns become a vertical accordion

Palette

Dark, precise, industrial-editorial. It reads like an engineering lab with a single hot-orange signal colour.

• canvas#161719
• tile#212225
• tile raised#2c2c2f
• accent orange#fa6e43
• headline warm grey#e3dbd8
• body light#c0c0c0
• muted text#888891
• ink on orange#161719
• hairline / input border#6b6b72

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

TikTok Sans (display optical size) 500: hero 100px/0.9 at -0.05em, section titles 96px muted, statements 35px/1.2 at -0.04em, tile titles 28px

Body

TikTok Sans 400, 16px/1.5 in light grey; index labels 14px; small notes 14px muted

Extreme negative tracking only at 64px+. Stat numbers in orange with superscript unit at 50% size. No weights below 400 under 24px.

Spacing and imagery

Wide gutters: 18px outer margin, 4px bento gaps, 160px between modules. Radius 6px tiles and buttons (sharp, technical), 44px square icon buttons. No shadows; depth by tone steps from #161719 to #2c2c2f.

Monochrome close-up renders of machined hardware and chips; particle-field video; orange dot-matrix grids; simple outline icons; one warm glowing release thumbnail.

Components

• Vertical wordmark
• Particle video background
• Display headline with accent spans
• Demo CTA block
• Stat pair
• Release card
• Scroll-revealed statement
• Section index header (number, label, rule)
• Bento product tile (photo, solid, plain)
• Square arrow button
• Beta progress tile
• Expanding service columns
• Dot-matrix graphic
• Segmented progress indicator
• Pricing module
• Team grid
• Testimonial module
• Contact form
• Giant footer title

Interactions

• Statement text brightens word by word as it scrolls into view
• Bento tiles scale imagery 1.03 on hover; arrow button shifts 2px
• Service columns expand on hover/click/focus with width animation; only one open
• Carousel segmented indicator fills per slide; arrow keys move slides
• Nav menu opens as full-screen overlay listing all modules with anchor links
• Focus ring 2px orange offset 2px on all interactive elements

Data

• Product{slug, name_generic, tagline, image, tile_variant (photo|solid|plain), status (live|beta), progress?}
• Service{order, title, keyword, description, image}
• ProcessStep{order, title, description}
• Plan{id, name, price_monthly, price_annual, features[], is_custom}
• TeamMember{name, role, portrait}
• Testimonial{quote, name, role, company_alias}
• Module{key, order, enabled}

Guardrails

Experience

• Each module keeps the same index header so reordering never breaks rhythm
• Orange accent limited to keywords, stats, CTA and one solid tile per bento
• Text on orange uses the near-black ink, never white
• Product tiles always carry a visible arrow button, not only a hover affordance
• Keep the hero headline to under 10 words; statement text carries the detail
• Provide a module config (order and enabled flags) so sections can be rearranged without code edits

Accessibility

• Vertical wordmark is decorative (aria-hidden) with the real brand name in the header link
• Particle video is muted, has a pause toggle and is replaced by a still under reduced motion
• Scroll-revealed statement is fully readable text in the DOM from the start
• Expanding columns are buttons with aria-expanded and keyboard support
• Muted text stays #888891 or lighter on tiles to meet 4.5:1
• Beta progress announces percentage in text, not only the bar

Security

• Demo and contact submissions validated with zod on the server with honeypot and rate limits
• Sign-up uses hosted auth with email verification; RLS on profiles (owner-only)
• Leads table insert-only via server; no anon select
• Video and images served from own origin or a signed storage bucket; no hotlinking third-party media

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 **Kalvero**, a dark, modular marketing site for an AI infrastructure product line (compute cores, automation engine, security layer). The page is a stack of self-contained modules (hero, statement, work, services, process, analytics, pricing, team, testimonials, contact), each with the same numbered index header, so teams can reorder or remove them freely. One hot orange accent carries every call to action and key number.

### Stack
Next.js + TypeScript, Tailwind CSS, Motion (scroll-linked reveals, expanding columns), lucide-react for arrows and icons, react-hook-form + zod for forms. Supabase for sign-up auth and a leads table. A `modules.config.ts` array controls order and visibility.

### Pages & layout
1. **Home**: hero on `--canvas` with a muted, looping particle video (poster fallback). A huge vertical wordmark in orange runs down the left edge. A small two-line tagline, a giant em-dash headline with two orange keywords, a "see it in action" block with an orange demo button, a stat pair with superscript units, and a small release card top right. Then a scroll-revealed statement; a Work module (giant muted title, index row "001 / label", statement, side note, bento grid of product tiles); a Services module (expanding columns plus a dot-matrix card, segmented progress, explore link); Process, Analytics, Pricing, Team, Testimonials, News and Contact modules; an orange closing band; and a giant footer title.
2. **Product detail** pages, **Pricing**, **Team**, **Contact**, **Sign up**, **Terms / Privacy / Data protection**.
Mobile: the wordmark becomes horizontal at the top, the headline is 44px, bento tiles go to one column, and expanding columns become an accordion.

### Design system
- Colors: `--canvas: #161719`, `--tile: #212225`, `--tile-2: #2c2c2f`, `--accent: #fa6e43`, `--headline: #e3dbd8`, `--body: #c0c0c0`, `--muted: #888891`, `--on-accent: #161719`, `--border: #6b6b72`.
- Fonts: TikTok Sans (Google Fonts, opsz) at 500 for display: hero 100px/0.9 at -0.05em, titles 96px, statements 35px/1.2 at -0.04em. Body TikTok Sans 400 16px/1.5.
- Spacing: 4px bento gaps, 18px page margin, 160px between modules.
- Radius: 6px tiles and buttons. Arrow buttons are 44px squares.
- Shadows: none; step tones instead.
- Motion: 500ms cubic-bezier(.2,.8,.2,1) column expansion, word-by-word opacity reveal from 0.25 to 1, image hover scale 1.03.

### Components & interactions
VerticalWordmark (aria-hidden), ParticleVideo (pause toggle, poster), HeroHeadline (accent spans), DemoBlock, StatPair, ReleaseCard, RevealStatement, ModuleIndex (number, label, orange left rule, side note), BentoGrid with ProductTile variants (photo, solid-accent with dot matrix, plain) and ArrowButton, BetaProgressTile (text percentage), ServiceColumns (one open; buttons with aria-expanded), DotMatrix (decorative), SegmentedProgress, PricingModule (toggle, custom tier), TeamGrid, TestimonialSlider, ContactForm, FullscreenMenu (anchors to modules, focus trap).

### Data & state
Typed data files: products, services, process steps, plans, team, testimonials; `modules.config.ts` holds `{key, order, enabled}`. Tables: `leads(id, name, email, company, message, created_at)` and `profiles(id, user_id, display_name)`. Menu and column state are local. Use invented names and figures throughout.

### Accessibility
The real product name lives in the header link, and the vertical wordmark is decorative. The statement text is in the DOM and reveal changes only opacity, never below 0.25 for off-screen words (announced fully). The video has a pause control and a reduced-motion still. Text on orange uses `--on-accent`. Focus ring: 2px orange with 2px offset. Expanding columns and the menu are keyboard operable.
Verified contrast: headline on canvas: #e3dbd8 on #161719 = 13.15:1; body on tile: #c0c0c0 on #212225 = 8.74:1; muted text on canvas: #888891 on #161719 = 5.11:1; muted text on tile: #888891 on #212225 = 4.53:1; orange accent text on canvas: #fa6e43 on #161719 = 6.3:1; ink on orange button and tile: #161719 on #fa6e43 = 6.3:1; hairline / input border: #6b6b72 on #161719 = 3.39:1; focus ring orange on tile: #fa6e43 on #212225 = 5.59:1.

### Security
Leads go through a server route with zod, a honeypot and IP rate limiting. The `leads` table has RLS with no anon read, and the server inserts with the service role. `profiles` has owner-only RLS (`user_id = auth.uid()`). Sign-up uses email verification and generic error messages. Serve media from your own storage.

### Performance & SEO
The hero video is under 2MB (H.264 + WebM) with a poster, and is skipped when save-data is on. Photo tiles use responsive AVIF. Lazy-load modules below the fold. Preload TikTok Sans 500 only. Give each product page its own metadata and add Organization JSON-LD. Target LCP under 2.5s with the poster as the LCP element.

### Guardrails
- Write original copy; product names are generic placeholders and all stats are illustrative.
- Never put white text on orange.
- Every module works on its own when others are disabled.
- Acceptance criteria: (1) reordering `modules.config.ts` reorders the page without layout breaks; (2) service columns work by keyboard; (3) the video pauses and falls back to a still; (4) forms show error and success states; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own