Lorimark

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

Gantari is a calm geometric grotesk that stays precise at 72px in the dark control room, and Playfair's optical-size italic gives the single accent phrase a glossy, premium curve.

• GantariHeadings: hero 72px / 40px 500, -0.04em; section headings 48px; card titles 24px
• GantariBody: body 16px/1.6 500, pill badges 14px, tabular metrics
• PlayfairAccent: one italic 400 phrase per heading, at heading size

Patterns

• near-black canvas with soft violet radial glows
• pill eyebrow badge above every section heading
• headline with one italic serif accent phrase
• single primary CTA (book a demo) repeated per section
• grayscale partner logo strip
• framed dashboard preview under hero with bottom fade
• 2x2 bento feature cards with embedded mini-UI
• auto-scrolling testimonial marquee with edge fade
• alternating split rows (copy left, UI mock right)
• 3x2 icon feature grid
• pricing toggle monthly/annual with save badge
• stacked pricing cards with check-list
• FAQ accordion
• hamburger overlay nav on all widths

States it is designed for

• Demo form: inline validation for work email and required fields
• Demo form: submitting state with disabled button and spinner
• Demo form: success panel replacing the form, and error message with retry
• Pricing: annual vs monthly values, both announced to screen readers
• Blog and changelog lists: empty state when a filter has no posts
• 404 page with a link home
• Reduced-motion: marquee becomes a static wrapped grid and fades are disabled
• Long plan feature lists wrap without breaking card alignment

Who it is for

• Heads of sales and revenue operations
• Founders of small B2B teams comparing analytics tools
• Growth marketers who own funnel reporting
• Sales managers tracking rep performance

Layout

1. Top bar: square app mark + wordmark left, hamburger menu right that opens a full overlay nav (About, Blog, Changelog with 'New' tag, Pricing, Pages, Book a demo)
2. Hero: centered pill badge announcing a new integration, two-line headline ending in an italic serif phrase, short paragraph, single violet 'Book a demo' button
3. Logo strip: small caption plus five grayscale partner wordmarks; on mobile becomes a horizontal marquee
4. Dashboard preview: framed composite of three KPI cards, a balance column and a revenue line chart, fading into the canvas at the bottom
5. Product section: pill badge, heading, then a 2x2 bento of feature cards (visitor chart, downloadable report list, per-rep sales list, pending invitations)
6. Testimonials: pill badge, heading, then a horizontally auto-scrolling row of quote cards with star ratings and edge fade masks
7. Integrations split row: copy + CTA left, card with a checklist of connected tools right
8. Real-time split row: UI card left showing KPI cards with 'updated N min ago' chips, copy + CTA right
9. Features: pill badge, heading, 3x2 grid of icon cards
10. Pricing: pill badge, heading, monthly/annual switch with 'save 40%' chip, two plan cards (second with a violet glow)
11. FAQ accordion, then a closing demo-request CTA band and a multi-column footer
12. Breakpoints: bento and icon grids go 2 or 3 columns to 1 below 768px; split rows stack with the UI card after the copy; headline drops from 72px to 40px

Palette

nocturnal, precise, premium, calm, data-literate. A quiet black control room where violet light pools behind the numbers.

• canvas background#0a0a0a
• card surface#141414
• primary text#f5f5f8
• muted text#ababab
• primary button (violet)#4f1ad6
• focus ring / violet on dark#6c3ce7
• positive delta green#75dfa6
• card hairline border (decorative)#262626
• input border#626262
• violet glow (decorative)#57468d

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

Gantari 500 (similar to the observed geometric grotesk), 72px desktop / 40px mobile hero, -0.04em tracking; accent words in Playfair italic 400 at the same size

Body

Gantari 500, 16px / 1.6 (observed 14px raised to 16px); card titles 24px 500 with -0.02em tracking

Pill badges 14px 500. Figures in cards use tabular numerals. The serif italic is used for exactly one phrase per heading, never for body copy.

Spacing and imagery

Generous vertical rhythm (120-160px between sections), 1120px container, 24px gutters in grids. Cards 16-20px radius with 1px hairline borders; buttons 10px radius; pill badges fully rounded. No drop shadows: depth comes from soft violet radial gradients behind cards.

No photography apart from tiny avatars. All visuals are UI fragments: KPI cards, line charts with a single highlighted point, file-download rows, invite lists and integration checklists, each fading into the dark.

Components

• Overlay navigation with 'New' tag on a menu item
• Pill eyebrow badge with status dot
• Heading with italic serif accent span
• Violet primary button
• Grayscale logo strip / marquee
• Framed dashboard preview with fade mask
• KPI card with delta chip
• Bento feature card with embedded mini-UI
• Testimonial card with star rating and avatar
• Integration checklist card
• Icon feature card
• Billing-period switch with savings chip
• Pricing card with feature checklist
• FAQ accordion
• Demo-request form (name, work email, company size)

Interactions

• Sections fade and rise 16px into view once on scroll
• Testimonial row auto-scrolls slowly, pauses on hover and focus, and has a pause button
• Billing switch animates the thumb and cross-fades prices
• Chart line draws in once when visible; hovered point shows a tooltip
• Primary button brightens and lifts 1px on hover; 2px violet focus ring with offset
• Overlay menu opens with a fade, traps focus and closes on Escape
• FAQ items expand with a height transition; only one open at a time

Data

• Plan{id, name, monthly_price, annual_price, summary, features[], highlighted (bool)}
• Testimonial{id, quote, author_name, role, company, rating (1-5), avatar}
• Feature{id, icon, title, body}
• Integration{id, name, logo, connected (bool)}
• Post{slug, title, excerpt, cover, published_at, tags[]} (blog collection)
• ChangelogEntry{version, date, title, body, tag (new|improved|fixed)}
• DemoRequest{name, email, company, team_size (1-10|11-50|51-200|200+), message}
• FaqItem{question, answer}

Guardrails

Experience

• Keep one primary action per section and make it the same demo request everywhere
• Limit the italic serif accent to one phrase per heading
• Dashboard fragments must read as illustrative: round numbers, invented names, no real logos
• Show both monthly and annual prices clearly; never hide the billing period
• Keep the testimonial marquee slow (at least 40s per loop) and pausable
• Section intros stay under 30 words

Accessibility

• Body copy at least 16px with 1.6 line-height, even though the source used 14px
• Muted text uses #ababab or lighter on dark cards only
• Focus ring uses the lighter violet #6c3ce7, not the button fill, so it stays visible on black
• Marquee has a pause control and respects prefers-reduced-motion
• Charts in feature cards have aria-hidden decoration plus a one-line text summary
• Billing switch is a real switch with aria-checked and visible labels on both sides

Security

• Validate the demo form with zod on client and server; reject free-mail domains only with a clear message
• Insert demo requests through a server endpoint using a service role; RLS on demo_requests allows no public select
• Rate-limit demo submissions per IP and add a honeypot field
• Store only the fields the sales team needs; no tracking of form keystrokes

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 the marketing site for **Lorimark**, a sales-and-analytics tool for small B2B revenue teams. The site's single job is to convince a sales lead that Lorimark puts pipeline, revenue and rep performance on one screen, then get them to book a demo. It should feel like the product itself: dark, quiet, numeric, with violet light pooling behind UI fragments.

### Stack
Astro with React islands, TypeScript, Tailwind CSS, shadcn/ui (Radix primitives) and lucide-react icons. Recharts for the small line charts, Motion for scroll reveals and the testimonial marquee, react-hook-form + zod for the demo form. Content (plans, testimonials, FAQ, blog, changelog) lives in Astro content collections. Demo requests post to a Supabase Edge Function that inserts into a `demo_requests` table.

### Pages & layout
1. **Home**: top bar (app mark + wordmark, hamburger that opens a full overlay menu); hero with a pill badge ("New: calendar sync"), two-line headline ending in an italic serif phrase, one-line subcopy and a violet "Book a demo" button; grayscale logo strip of invented partners; framed dashboard preview (three KPI cards, balance column, revenue line chart) fading into the canvas; product bento (2x2 cards: visitor chart, report downloads, per-rep revenue list, pending invites); testimonial marquee; integrations split row; real-time split row; 3x2 icon feature grid; pricing with billing switch; FAQ; closing CTA band; footer.
2. **Pricing** (reuses the home pricing block plus a comparison table).
3. **Blog** list + post template; **Changelog** timeline with tags.
4. **About**, **Contact / Book a demo**, **Legal**, **404**.
Below 768px: grids collapse to one column, split rows stack copy-first, logo strip becomes a marquee, hero headline 40px.

### Design system
- Colors: `--canvas: #0a0a0a`, `--card: #141414`, `--fg: #f5f5f8`, `--muted: #ababab`, `--primary: #4f1ad6`, `--on-primary: #ffffff`, `--ring: #6c3ce7`, `--positive: #75dfa6`, `--hairline: #262626` (decorative only), `--input-border: #626262`, `--glow: #57468d` (radial gradients only).
- Fonts: Gantari 500 for everything (similar to the observed geometric grotesk); hero 72px/1.1 with -0.04em tracking, section headings 48px, card titles 24px, body 16px/1.6. Accent phrases in Playfair italic 400. Tabular numerals in all metrics.
- Spacing: 4px base; section padding 128px desktop / 80px mobile; container 1120px; grid gap 24px.
- Radius: cards 20px, inner UI tiles 12px, buttons 10px, badges full.
- Shadows: none. Use `radial-gradient(var(--glow) at 50% 0%, transparent 60%)` behind highlighted cards.
- Motion: 400ms ease-out reveal with 16px rise, 60ms stagger; marquee 45s linear loop.

### Components & interactions
OverlayNav (focus trap, Escape to close, "New" tag chip), PillBadge (optional green status dot), AccentHeading (`<em>` span in serif), PrimaryButton, LogoStrip, DashboardPreview (static composite with bottom fade mask), KpiCard (label, value, delta chip), BentoCard (title, body, slot for mini-UI), TestimonialMarquee (pause on hover/focus, visible pause button), SplitRow (reversible), IconFeatureCard, BillingSwitch (monthly/annual, "save 40%" chip), PlanCard (price, period, CTA, checklist, highlighted variant with glow), FaqAccordion (single open), DemoForm.

### Data & state
Collections: `plans`, `testimonials`, `features`, `integrations`, `faq`, `posts`, `changelog`. All sample people, companies and figures are invented (e.g. "Priya Nandakumar, VP Sales at a logistics startup"). Billing period is local state persisted in the URL (`?billing=annual`). DemoForm states: idle, validating, submitting, success, error with retry.

### Accessibility
Body text 16px minimum; nothing under 12px. Use `#ababab` only for secondary copy on dark. Focus rings are 2px `--ring` with 2px offset. The marquee is a list with a pause button and becomes a static wrapped grid under `prefers-reduced-motion`. Decorative charts are `aria-hidden` with a text summary beside them. BillingSwitch is a Radix Switch with visible labels and a live region announcing the new prices.
Verified contrast: body text on canvas: #f5f5f8 on #0a0a0a = 18.19:1; muted text on card: #ababab on #141414 = 8.02:1; button label on violet button: #ffffff on #4f1ad6 = 8.57:1; positive delta text on card: #75dfa6 on #141414 = 11.28:1; focus ring on canvas: #6c3ce7 on #0a0a0a = 3.24:1; focus ring on card: #6c3ce7 on #141414 = 3.02:1; input border on card: #626262 on #141414 = 3.02:1; chart line (green) on card: #75dfa6 on #141414 = 11.28:1.

### Security
The demo form posts to an Edge Function that validates with the same zod schema, checks a honeypot, rate-limits by IP (5 per hour) and inserts with the service role. `demo_requests` has RLS enabled with no anon select/update/delete policies; only authenticated staff with a `sales` role can read. No secrets in the client bundle beyond the anon key. Send confirmation via a transactional email service from the function, never from the browser.

### Performance & SEO
Ship static HTML with islands only for nav, switch, marquee, accordion and form. Lazy-load Recharts inside the bento card. Preload the two font files, `font-display: swap`. Unique titles and descriptions per page, OG image per blog post, sitemap and RSS for the blog. Target LCP under 2s and CLS under 0.05.

### Guardrails
- Write all copy fresh; no real partner, customer or integration logos: use neutral placeholders.
- Testimonials are clearly sample content until replaced.
- Keep one CTA per section; do not add pop-ups or chat widgets.
- Keep components typed; no `any`.
- Acceptance criteria:
  - [ ] Hero, bento, marquee, pricing and FAQ render from content collections
  - [ ] Billing switch updates all prices and is keyboard operable
  - [ ] Demo form validates, rate-limits and stores a row; success and error states visible
  - [ ] All contrast pairs above pass; reduced motion stops the marquee
  - [ ] Lighthouse 95+ on performance and accessibility

Open the builderAll templatesThis palette on its own