Jorvale

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

Libre Franklin gives friendly, trustworthy headlines with real grotesk character, and Open Sans is an open, highly legible body for a human CRM full of real photography.

• Libre FranklinHeadings: H1 56px 500 at -2px, H2 36px at -1.5px
• Open SansBody: body 16px/1.8 400-500, captions 14px, widget labels 12px, widget numbers 400 at 32px+

Patterns

• centred hero with avatar stack and star rating
• dual CTA pill pair with trial fine print
• faint grid-line background behind hero
• photo collage with floating KPI cards
• greyscale logo row
• alternating split feature rows with product widget mock
• check-list bullets with filled circle icons
• two-up feature cards with embedded analytics widgets
• three-column icon feature row
• photo plus solid colour stat tile
• pricing toggle monthly/yearly with save badge
• FAQ accordion
• three interchangeable hero variants

States it is designed for

• Pricing: monthly vs annual with correct per-month math and a save badge
• Contact and demo forms: validation errors inline, disabled submit while sending, success message, error with retry
• Blog: loading skeleton cards, empty category state
• Careers: no open roles empty state with a talent-pool email link
• Changelog: long entries collapse with read-more
• 404 page with search and back-home link
• Reduced motion: numbers render final value, no ring drawing

Who it is for

• small-business owners
• sales team leads
• agency founders
• customer-success managers

Layout

1. Top nav: wordmark left, centred text links, black pill contact button right; collapses to a menu button under 900px
2. Hero: overlapping avatar stack with star rating and a customer count, two-line H1, subline, black primary pill plus white outlined pill, asterisk fine print; faint square grid background
3. Photo collage: one large and one small rounded photo with small white KPI widget cards overlapping corners
4. Logo row with caption
5. Split feature rows (widget on grey panel one side, H2, copy, checklist and CTA the other), alternating sides
6. Workflow section: H2 then a wide card and two half cards, each with a coloured icon chip, title, copy and an analytics widget
7. Three-column icon feature row
8. Stats: photo tile with a solid orange stat tile beside it, plus additional stat tiles
9. Pricing on light grey band: monthly/annual segmented toggle with save badge and hand-drawn arrow sticker, three plan cards
10. FAQ, closing CTA band, footer with link columns
11. Mobile: all splits stack widget-first, collage shows only the large photo, pricing cards stack with the highlighted plan first

Palette

Friendly, bright, trustworthy. A modern CRM that feels human because of real-looking team photography.

• background#ffffff
• panel grey#f7f7f7
• ink / primary button#000000
• body text#3b3b3b
• chart blue (fixed for text use)#136dff
• orange stat tile#ff9a1f
• orange as graphic on white (fixed)#de7a00
• green positive (fixed)#20aa59
• negative chip text#c62828
• input / hairline border#8c8c8c

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

Libre Franklin 500, H1 56px/1.1 with -2px tracking, H2 36px/1.2 with -1.5px tracking

Body

Open Sans 400-500, 16px/1.8; captions 14px; widget labels 12px minimum

Tight negative tracking only on display sizes. Widget numbers use tabular figures and a lighter 400 weight at 32px+.

Spacing and imagery

Comfortable: 1200px container, 30px gutters, 100px section spacing. Radius 12px on widgets and photos, 20px on feature cards, 58px pills. Widgets carry a soft 0 10px 30px rgba(0,0,0,0.08) shadow; panels are flat grey.

Candid office photos of small teams with rounded corners; white dashboard widgets (radial lead-score ring, stream chart, donut, area band chart, task stats) overlapping photos or sitting on grey panels; small filled-square icon chips in blue, orange and green.

Components

• Top nav with pill contact button
• Avatar stack + rating row
• Primary and secondary pill buttons
• Grid-line hero background
• Photo collage with floating KPI card
• Logo row
• Split feature row
• Checklist item
• Radial lead-score widget
• Pipeline stream chart widget
• Donut top-customers widget
• Area band analytics widget with delta chips
• Icon feature column
• Stat tile (solid colour)
• Segmented billing toggle with save badge
• Plan card
• FAQ accordion
• Changelog timeline
• Careers list
• Contact form
• 404 page

Interactions

• Widgets animate in on scroll: ring segments draw, numbers count up once
• Chart tooltips on hover and keyboard focus of data points
• Billing toggle slides a highlight pill and swaps prices with a quick crossfade
• Buttons invert on hover (black to dark grey; outlined to grey fill); focus ring 2px blue offset 2px
• FAQ items expand one at a time with height animation
• Mobile menu opens as a full-width sheet with focus trap and Escape to close

Data

• Plan{id, name, blurb, price_monthly, price_annual, features[], highlighted}
• Post{slug, title, excerpt, cover, author_alias, category, published_at}
• Role{slug, title, team, location, type (full-time|part-time|contract), body}
• ChangelogEntry{version, date, title, items[], tag (new|improved|fixed)}
• Faq{question, answer, order}
• DemoRequest{name, work_email, company, team_size (1-10|11-50|51-200|200+), message, created_at}

Guardrails

Experience

• Two hero CTAs only: start free (black) and book a demo (outlined)
• Every feature row ends with one concrete outcome sentence and at most three checklist bullets
• Widget mocks use obviously sample data and never show real customer names
• Stat claims carry a footnote or are labelled as illustrative in the template
• Keep the annual discount math visible (price per month and billed-annually total)
• Offer three hero variants as layout options, not three competing messages on one page

Accessibility

• Blue text and links use #136dff so they reach 4.5:1 on white
• Stat tile text on orange uses black ink, never white
• Chart widgets include a visually hidden summary sentence and do not rely on colour alone (legends with labels and shapes)
• Positive/negative delta chips include a sign and arrow, not just green/red
• Billing toggle is a radio group with visible labels
• Avatars in the rating row are decorative; the rating is announced as text

Security

• Demo and contact forms post to a server route validated with zod; honeypot plus per-IP rate limit
• Store requests in a table with RLS: insert via service role only, no public select
• Do not collect phone numbers or company size beyond a bucketed range
• Sanitise blog and changelog markdown; no raw HTML

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 **Jorvale**, the marketing site for an AI-assisted CRM for small sales teams and agencies. The look is bright white with candid team photos and crisp white dashboard widgets floating over them. Every section should prove the product works (lead scoring, pipeline, workflow automation) and move visitors toward a free trial or a demo request.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui on Radix, lucide-react icons, Recharts for widget mocks, Motion for scroll reveals, react-hook-form + zod for forms. MDX for blog and changelog. Supabase stores demo requests.

### Pages & layout
1. **Home**: sticky nav (wordmark, centred links, black contact pill). Hero on a faint square-grid background with an avatar stack, stars and customer count, a two-line H1, subline, a black "Start free" pill, an outlined "Book a demo" pill, and asterisk fine print. Photo collage with floating KPI cards. Logo row. Three alternating split feature rows (lead-score ring, pipeline stream chart, checklist). Workflow cards (one wide, two half) with icon chips and analytics widgets. A three-column icon feature row. Stats (photo plus orange stat tile). Pricing on a grey band. FAQ, closing CTA, footer.
2. **Features**, **About**, **Pricing** (full comparison), **Blog** + post, **Careers** + role, **Changelog**, **Contact / Book a demo**, **404**.
3. Ship three hero variants as components (centred text, split text/photo, text over collage) selectable by a prop.
Mobile: splits stack widget-first, the collage keeps one photo, nav becomes a sheet, and pricing stacks with the highlighted plan first.

### Design system
- Colors: `--bg: #ffffff`, `--panel: #f7f7f7`, `--ink: #000000`, `--text: #3b3b3b`, `--blue: #136dff`, `--orange: #ff9a1f` (tile fill), `--orange-graphic: #de7a00`, `--green: #20aa59`, `--red: #c62828`, `--border: #8c8c8c`.
- Fonts: Libre Franklin 500 for display (H1 56px/1.1 at -2px, H2 36px/1.2 at -1.5px); Open Sans for body (16px/1.8), captions 14px, widget labels at least 12px.
- Spacing: 8px base, 100px sections, 1200px container, 30px gutters.
- Radius: 12px widgets and photos, 20px cards, 58px pills.
- Shadow: widgets `0 10px 30px rgb(0 0 0 / .08)`; panels flat.
- Motion: 400ms ease-out rise-and-fade, count-up 900ms, ring draw 1.2s. All disabled under reduced motion.

### Components & interactions
Nav + MobileSheet (focus trap, Escape), RatingRow, CTAButtons, GridBackdrop (CSS background, aria-hidden), PhotoCollage with FloatingKpi, LogoRow, FeatureSplit (widget, heading, copy, Checklist, CTA), LeadScoreRing, PipelineStream, TopCustomersDonut, AnalyticsBand with DeltaChip (sign, arrow and colour), IconFeature, StatTile (ink text on orange), BillingToggle (radio group, sliding pill, save badge), PlanCard, FaqAccordion (single open), ChangelogTimeline, RoleList, DemoForm. Chart points show tooltips on hover and focus.

### Data & state
MDX collections for posts, roles and changelog; JSON for plans and FAQ. `demo_requests(id, name, work_email, company, team_size, message, created_at)`. Billing period lives in a `?billing=` URL param. Widget data is static sample JSON with invented names and numbers.

### Accessibility
Use a skip link and landmark regions. Each chart has an sr-only summary sentence, and legends pair colour with a label. Delta chips never rely on colour alone. The toggle is a radio group. Focus rings are 2px `--blue`. Links use `--blue` and are underlined in body copy. Stat tiles use ink text on orange.
Verified contrast: body text: #3b3b3b on #ffffff = 11.2:1; body text on grey panel: #3b3b3b on #f7f7f7 = 10.46:1; primary button label: #ffffff on #000000 = 21.0:1; link / accent text: #136dff on #ffffff = 4.51:1; stat tile text on orange: #000000 on #ff9a1f = 9.89:1; positive series / check icon: #20aa59 on #ffffff = 3.02:1; orange chart series: #de7a00 on #ffffff = 3.05:1; negative delta text: #c62828 on #ffffff = 5.62:1; input border: #8c8c8c on #ffffff = 3.36:1; focus ring: #136dff on #ffffff = 4.51:1.

### Security
The demo form posts to a route handler that validates with zod, checks a honeypot field, and rate-limits per IP and email. Insert with the service role on the server only. `demo_requests` has RLS enabled with no anon select, update or delete. Collect team size as a bucket only. Render MDX without raw HTML.

### Performance & SEO
Statically generate every page. Use next/image with explicit sizes for the collage photos, AVIF first. Lazy-load Recharts below the fold. Load only Libre Franklin 500 and Open Sans 400/500. Give each page unique metadata and OG images. Add Organization and FAQPage JSON-LD. Target LCP under 2s.

### Guardrails
- Use invented people, companies and figures, and label stats as illustrative.
- Show no third-party trademarks; use placeholder logo marks only.
- Keep the widgets decorative-but-accessible and non-interactive beyond tooltips.
- Acceptance criteria: (1) the three hero variants render from one prop; (2) annual pricing shows the per-month and billed total; (3) all charts have text alternatives; (4) the demo form handles error and success states; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own