Kovalen

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

Radio Canada has open, humane shapes that stay composed at regular weight, which gives the deep-teal pages their calm, editorial headlines.

• Radio CanadaHeadings: H1 72px 400 at -0.03em, H2 48px 400
• Radio CanadaBody: body 16px/1.55 400-500, captions 14px, chip labels 13px

Patterns

• deep-teal hero with vertical frame rules
• lime primary button with chevron
• rating and award strip under CTAs
• photo card plus quote card hero pair
• logo marquee with edge fade
• problem statistic cards with staggered offsets
• dotted-grid statement section with floating UI chips
• two-up feature cards with product widget on textured backdrop
• workflow step chain widget
• sticky tabbed feature detail with checklist
• pricing plan cards plus comparison table
• demo booking page with lead form

States it is designed for

• Demo form: field-level validation (work email required, team size select), submitting, success page with next steps, server error with retry
• Login: invalid credentials message, locked-out message, loading button
• Pricing: monthly/annual toggle; comparison table sticky header with horizontal scroll on mobile
• Blog: empty search result, loading skeleton
• Widget illustrations degrade to static images when JavaScript is off
• Reduced motion: no parallax, counters show final values

Who it is for

• operations and project leads at B2B companies
• team managers replacing several tools
• founders of mid-sized SaaS teams

Layout

1. Nav on deep teal: wordmark, left-aligned links, login text link and white 'Book a demo' button on the right; thin vertical rules frame the content column
2. Hero: small eyebrow, two-line H1 in regular weight, subline, lime primary and ghost secondary buttons, rating/award strip
3. Hero media pair: wide photo card with overlaid heading, narrow gradient quote card with lime quote mark and attribution
4. Logo marquee fading at both edges, then a gradient transition into a pale blue-grey section
5. Problem section: centred H2, three statistic cards at staggered heights, each with a chip label, a large figure and a sentence with bold key phrase
6. Statement: large centred paragraph with one tinted word over a dotted grid, with floating UI chips (chart card, automation progress, action pill)
7. How-it-helps: eyebrow chip, H2 left and paragraph right, then 2x2 feature cards each with a UI widget on a softly textured backdrop and a caption
8. Deep-teal detail section: tabs or sticky list of capabilities with checklists and a widget panel
9. Testimonials, process steps (plan, execute, optimise), outcomes metrics, pricing, FAQ, CTA and footer
10. Mobile: nav becomes login + menu icon; hero cards stack; stat cards align without offsets; feature widgets scale inside full-width cards

Palette

Composed, trustworthy, quietly modern. Deep teal and lime signal focus without tech-neon noise.

• deep teal background#01283c
• teal card#024364
• lime primary#c8f77c
• light background#ffffff
• pale section tint#e8eef2
• ink text#1a1a1a
• muted text on light (fixed)#6b6b6b
• muted text on teal#b3bfc5
• rose highlight word (fixed, large text only)#c48484
• status green#2e9e4f
• input border (fixed)#8696a0

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

Radio Canada 400: H1 72px/1.05 at -0.03em, H2 48px/1.15 at -0.03em

Body

Radio Canada 400-500, 16px/1.55; captions 14px; chip labels 13px

Regular weight headlines give a calm, editorial feel; bold is used only for inline emphasis inside stat sentences.

Spacing and imagery

Measured: 1140px content column bounded by 1px vertical rules on desktop, 120px section padding, 24px card gaps. Radius 10px buttons, 16px cards, 12px widgets, 999px chips. Widgets carry 0 6px 24px rgba(1,40,60,0.10); cards are otherwise flat.

Sunlit lifestyle portraits with blurred skies; realistic mini UI widgets (task list with status pills, automation chain, rich-text note with floating toolbar, bar chart card) on grainy pastel backdrops; dotted-grid texture behind statements.

Components

• Framed nav with vertical rules
• Lime primary button with chevron
• Ghost secondary button
• Rating + award strip
• Photo hero card with overlay heading
• Quote card
• Edge-fading logo marquee
• Statistic card with chip label
• Floating UI chip
• Feature card with widget
• Task list widget with status pills
• Automation chain widget
• Rich-text note widget with toolbar
• Checklist row
• Pricing card + comparison table
• Demo booking form
• Login page

Interactions

• Statistic numbers count up when in view
• Floating UI chips drift slightly on scroll (parallax <= 12px)
• Automation widget: progress bar fills and steps tick in sequence
• Feature tabs switch the widget panel with a 200ms crossfade; arrow keys move between tabs
• Marquee pauses on hover and focus
• Buttons lift 1px with a brighter lime on hover; focus ring 2px lime on teal, 2px teal on light

Data

• Plan{id, name, price_monthly, price_annual, seats_included, features[], cta (start|demo)}
• ComparisonFeature{group, label, availability{plan_id: bool|string}}
• Post{slug, title, excerpt, category, cover, published_at}
• Testimonial{quote, name, role, company_alias}
• DemoBooking{name, work_email, company, team_size (1-20|21-100|101-500|500+), use_case, preferred_time, created_at}

Guardrails

Experience

• Problem stats appear before any feature so the page earns the pitch
• Only one lime button per viewport; secondary actions are ghost or text
• Widget illustrations use short, realistic placeholder labels, never lorem ipsum
• Demo form asks for at most six fields and says what happens after submit
• Keep staggered stat card offsets decorative; reading order stays left to right
• Comparison table groups features and keeps plan names visible while scrolling

Accessibility

• Rose highlight word only at 48px+ where 3:1 applies; body copy never uses it
• Muted grey on white is #6b6b6b, muted on teal is #b3bfc5
• Status pills in widgets combine a text label with colour
• Marquee has a pause control and respects reduced motion
• Tabs follow the WAI-ARIA tabs pattern
• Hero quote card text sits on an opaque-enough gradient; check white against its lightest stop

Security

• Demo bookings post to a server route with zod validation, honeypot and per-IP rate limiting
• Bookings table has RLS with no anon read; only the server writes with a service role
• Login page uses the auth provider's hosted flow with CSRF protection and generic error messages
• Do not embed third-party tracking before consent

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 **Kovalen**, the marketing site for a B2B workspace that brings tasks, docs and light automations into one place for operations teams. The site opens in deep teal with a lime call to action, states the problem with numbers, and then shows the product through small, realistic UI widgets. Visitors should either start self-serve or book a demo.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui (Radix) for tabs, accordion and dialog, Motion for counters, parallax and widget sequences, lucide-react icons, react-hook-form + zod for the demo form. Supabase handles auth on the login page and stores demo bookings.

### Pages & layout
1. **Home**: framed nav (1px vertical rules bounding a 1140px column) on `--teal-900`. Hero with eyebrow, a two-line regular-weight H1, subline, a lime "Start building" button with chevron, a ghost "Explore features" button, and a rating/award strip. Hero media pair: a wide photo card with an overlaid heading and a narrow gradient quote card. An edge-faded logo marquee. A gradient hand-off to a pale section with three problem stat cards at staggered heights. A dotted-grid statement with one rose-tinted word and floating UI chips. A 2x2 feature grid with widgets. A teal capability section with tabs, checklist and widget panel. Testimonials, three process steps, outcome metrics, pricing preview, FAQ, CTA and footer.
2. **Features**, **Pricing** (cards plus grouped comparison table with sticky header), **Blog** + article, **Contact / Book a demo**, **Login**.
Mobile: the nav shows login and a menu icon; stat offsets are removed; the comparison table scrolls horizontally with the first column pinned.

### Design system
- Colors: `--teal-900: #01283c`, `--teal-700: #024364`, `--lime: #c8f77c`, `--bg: #ffffff`, `--tint: #e8eef2`, `--ink: #1a1a1a`, `--muted: #6b6b6b`, `--muted-on-dark: #b3bfc5`, `--rose: #c48484` (display text only), `--green: #2e9e4f`, `--border: #8696a0`.
- Fonts: Radio Canada (Google Fonts) at 400 for display: H1 72px/1.05, H2 48px/1.15, both at -0.03em. Body 16px/1.55; captions 14px.
- Spacing: 8px base, 120px sections, 24px card gaps.
- Radius: 10px buttons, 16px cards, 12px widgets, pill chips.
- Shadows: widgets `0 6px 24px rgb(1 40 60 / .10)`.
- Motion: 250ms ease-out, count-up 1s, parallax capped at 12px.

### Components & interactions
FramedNav, LimeButton (hover brightens, 1px lift), GhostButton, AwardStrip, PhotoHeroCard, QuoteCard, LogoMarquee (edge mask, pause), StatCard (chip, figure, sentence with bold phrase, count-up), DottedStatement with FloatingChip, FeatureCard with widgets: TaskListWidget (status pills with text), AutomationChain (steps tick in sequence, progress fill), NoteWidget (floating format toolbar), BarChartCard. Also CapabilityTabs (arrow keys, crossfade), PricingToggle, ComparisonTable, DemoForm, LoginForm. Illustrations are HTML/CSS components with sample data, not screenshots.

### Data & state
Plans, comparison features, testimonials and posts are typed JSON/MDX. `demo_bookings(id, name, work_email, company, team_size, use_case, preferred_time, created_at)`. Billing period lives in a URL param. Tabs and form use local state. All figures and names are invented.

### Accessibility
The stat cards' visual offset does not change DOM order. The rose word is used only at 48px and up. Widgets expose a short aria-label summary, and their inner controls are inert. The marquee has a pause button. Tabs follow the ARIA pattern. Focus rings are 2px lime on teal and 2px teal on light. Test white quote-card text against the lightest gradient stop.
Verified contrast: hero text on deep teal: #ffffff on #01283c = 15.33:1; muted text on deep teal: #b3bfc5 on #01283c = 8.16:1; lime button label: #01283c on #c8f77c = 12.45:1; body text on white: #1a1a1a on #ffffff = 17.4:1; muted text on white: #6b6b6b on #ffffff = 5.33:1; muted text on pale section: #6b6b6b on #e8eef2 = 4.55:1; rose highlight word at 48px: #c48484 on #ffffff = 3.01:1; white on teal card: #ffffff on #024364 = 10.56:1; input border: #8696a0 on #ffffff = 3.05:1; focus ring lime on teal: #c8f77c on #01283c = 12.45:1; status green pill dot: #2e9e4f on #ffffff = 3.43:1.

### Security
Demo bookings go through a server action that validates with zod, checks a honeypot and rate-limits per IP. `demo_bookings` has RLS enabled with no anon select, update or delete, and the server inserts with the service role. Login uses Supabase Auth with generic error messages and rate-limited attempts. No analytics scripts run before consent.

### Performance & SEO
Statically render marketing routes. Serve hero photos through next/image with priority and AVIF. Keep widget components light, with no chart library. Font subset: Radio Canada 400/500 with opsz. Give every page unique metadata and OG images, and add SoftwareApplication JSON-LD. CLS < 0.05.

### Guardrails
- Use original copy, invented logos and names, and sample statistics labelled as illustrative.
- Keep widgets as stylised illustrations, not a working app.
- One lime CTA per viewport.
- Acceptance criteria: (1) the demo form covers validation, success and error; (2) the comparison table works at 360px; (3) all widgets have text alternatives; (4) reduced motion removes parallax and counters; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own