Hireloom

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

Both named faces are kept: Mona Sans gives the wide-ish, humane headings and Familjen Grotesk a friendly body, a pairing no other template uses.

• Mona SansHeadings: hero 60px 600, H2 48px, card titles 28px
• Familjen GroteskBody: lead 18px/1.6, body 16px/1.6 400, eyebrow 12px uppercase +0.08em

Patterns

• split hero with portrait photo and floating form and donut cards
• eyebrow tag with sparkle icon
• solid CTA plus underlined text link
• dark green logo band
• three value cards with pastel icon tiles
• feature card with bullet list and dashboard collage
• two-up feature cards
• employee status table mockup with status pills
• rolling digit counters
• testimonials
• closing CTA

States it is designed for

• Free-trial sign-up: validation, submitting, account created, email already used, failure
• Counters show final numbers under reduced motion
• Dropdown open, mobile menu open
• Status pills: permanent, contract, probation
• 404 page with search and back-home link
• Image loading placeholders with fixed aspect ratio

Who it is for

• HR managers at growing companies
• Founders handling payroll themselves
• People-operations teams
• Recruiters tracking candidates

Layout

1. Top bar: tiled-diamond logo + wordmark, centred links (Home dropdown, About, Features, Pricing, Blog), outlined 'Start free trial' button
2. Hero on white with a pale mint-to-lime corner glow: eyebrow tag with sparkle icon (uppercase), 60px two-line headline, paragraph, solid green 'Start free trial' + underlined 'View pricing' link; right, portrait photo in a soft frame with a floating 'Add payroll' form card top-right, a 'Candidate hiring' donut card bottom-left and outlined geometric shapes
3. Full-width dark green band: 'used by companies' line, row of five invented logos, small '...and more' note
4. Values: centred heading and three bordered cards, each with a pastel icon tile (mint, lilac, sky), title and centred text
5. Solutions on a warm grey background: heading + paragraph, then a wide white card (payroll: title, text, bullet list, dark button left; collage of stat card, team payment card, sage metric card, employee status table right)
6. Two-up white cards (team management, candidate hiring) with their own collages
7. Workflow section, 'why choose' comparison, testimonials, rolling-digit stats, closing CTA, footer; 404 page
8. Breakpoints: hero stacks with photo first, floating cards shrink and stay inside the photo frame; value cards and two-up cards stack; table in collage scrolls horizontally

Palette

trustworthy, humane, grounded, fresh. A calm people-first office with plants in the window.

• page background#ffffff
• section background warm grey#f0efeb
• ink / dark band#02190f
• body text#3f4449
• primary green button#0c6c47
• muted text on dark band#a3b0a8
• sage metric card#a0ae8b
• pale lime glow / icon tile#def0c2
• status pill peach#ffe8cc
• donut chart amber#c5881d
• input border#8d9592

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

Mona Sans 600, hero 60px/1.05, h2 48px, card titles 28px

Body

Familjen Grotesk 400, 18px/1.6 lead, 16px/1.6 body

Wide-ish grotesk headings with a friendly grotesk body. Eyebrow tag is 12px uppercase with 0.08em tracking. Dark ink text on the sage card, never white.

Spacing and imagery

Comfortable: 1200px container, 30px side padding, 112px sections; cards 12px radius with 1px #e5e5e0 borders; buttons 6px radius, 48px tall; collage panels 16px inset on a light grey tray.

Professional portrait photography with floating white UI cards; pastel icon tiles with line icons; outlined geometric L-shapes as accents; dashboard collages with tables and small charts.

Components

• Nav with dropdown
• Eyebrow tag
• Primary button + underlined link
• Portrait with floating form card and donut card
• Dark logo band
• Value card with icon tile
• Feature card with bullet list and collage
• Employee status table mockup
• Metric card
• Rolling digit counter
• Testimonial card
• CTA band

Interactions

• Floating hero cards drift a few pixels on a loop
• Donut chart fills to value on load
• Rolling digit counters spin to their numbers when in view
• Value cards lift border colour on hover
• Nav dropdown opens on click with keyboard support
• Underlined link thickens underline on hover

Data

• Module{key (payroll|team|hiring|onboarding), title, body, bullets[], collage}
• Value{icon, tint (mint|lilac|sky), title, body}
• Stat{value, suffix, label}
• Testimonial{quote, name, role, company, avatar}
• TrialSignup{work_email, company, company_size, created_at}

Guardrails

Experience

• Green button is the only filled CTA in the hero; the pricing link is text
• Floating cards must not cover the portrait subject's face
• Each module card has at most four bullets and one button
• Collages use obviously sample data with invented names
• Stats state what and when they measure

Accessibility

• Text on the sage card uses dark ink (#02190f)
• Status pills include text labels; colour is secondary
• Rolling counters announce the final value only (aria-live off, label with value)
• Portrait has descriptive alt; floating UI cards are real text or aria-hidden with a summary
• Visible 2px green focus ring with offset
• Reduced motion stops drifting and counters

Security

• Trial sign-up validated with zod both sides; business email and company size only
• RLS on trial_signups: anon insert only, sales role reads
• Never collect salary, ID or payroll data on the marketing site
• Rate limiting and honeypot on sign-up

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 landing site for **Hireloom**, an HR suite that handles payroll, onboarding, team management and hiring for growing companies. It should feel trustworthy and human: deep forest green, soft pale-lime glows, a professional portrait with floating product cards, and module cards that show real-looking dashboards. Primary action: start a free trial.

### Stack
Next.js with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Sheet, Accordion), lucide-react, Motion for floating cards, donut fill and rolling counters, react-hook-form + zod for the trial form, Supabase for sign-ups.

### Pages & layout
1. **Home**: top bar (logo, Home dropdown, About, Features, Pricing, Blog, outlined "Start free trial"). Hero with a pale mint-lime glow: eyebrow tag with sparkle, 60px headline (fresh copy about simpler people ops), paragraph, green "Start free trial" + underlined "View pricing". Right: portrait photo with a floating "Add payroll" card (employee select, amount, disabled submit) and a "Candidate hiring" donut card, plus outlined L-shapes.
   Dark green logo band with five invented marks.
   Values: three bordered cards with mint, lilac and sky icon tiles.
   Solutions on warm grey: wide payroll card (title, text, four bullets, dark button; collage with stat card, team payment card with avatars, sage metric card, employee status table with status pills), then two-up cards for team management and hiring.
   Workflow steps, "why choose" comparison list, testimonials, rolling-digit stats, CTA, footer.
2. **Features**, **Pricing**, **About**, **Blog**, **Contact**, **404**.
Mobile: photo first, floating cards scaled inside frame; cards stack; table in collage scrolls horizontally.

### Design system
```
--bg: #ffffff; --section: #f0efeb; --ink: #02190f; --body: #3f4449;
--green: #0c6c47; --muted-on-dark: #a3b0a8; --sage: #a0ae8b; --lime-glow: #def0c2;
--pill-peach: #ffe8cc; --amber: #c5881d; --input-border: #8d9592;
```
Fonts: Mona Sans 600 display (60px hero, 48px h2, 28px card titles); Familjen Grotesk 400 body (18px lead, 16px/1.6 body); eyebrow 12px uppercase +0.08em. Spacing 8px base, 112px sections, 1200px container. Radius: cards 12px, buttons 6px, tags 4px, pills full. Borders 1px #e5e5e0; shadows only on floating cards (0 12px 32px rgba(2,25,15,.08)). Motion: 5s drift loops, 800ms donut fill, 1.2s digit roll.

### Components & interactions
NavBar (dropdown + Sheet), EyebrowTag, Button + TextLink, HeroPortrait (FloatingFormCard, DonutCard, Shapes), LogoBand, ValueCard, ModuleCard (bullets + collage slot), StatusTable (pills with text), MetricCard, RollingCounter, TestimonialCard, CtaBand, TrialForm (dialog or page).

### Data & state
Content JSON: `modules`, `values`, `stats`, `testimonials`, `logos`, `faqs` with invented people ("Priya Lane, Marketing") and numbers. Trial form writes `trial_signups(id, work_email, company, company_size, created_at)` with unique work_email. Client state: menu, form status.

### Accessibility
Ink text on sage and peach; status carried by text. Counters render final values for assistive tech and under reduced motion. Hero cards either real text or aria-hidden with summary. Dropdown keyboard support via Radix. Green focus ring 2px with offset. Headings in order; one h1.
Verified contrast: ink heading on white: #02190f on #ffffff = 18.28:1; body text on white: #3f4449 on #ffffff = 9.84:1; white label on green button: #ffffff on #0c6c47 = 6.46:1; body text on warm grey section: #3f4449 on #f0efeb = 8.55:1; muted text on dark band: #a3b0a8 on #02190f = 8.13:1; ink on sage metric card: #02190f on #a0ae8b = 7.77:1; ink on peach status pill: #02190f on #ffe8cc = 15.38:1; donut arc on white card: #c5881d on #ffffff = 3.04:1; input border on white: #8d9592 on #ffffff = 3.07:1; green focus ring on white: #0c6c47 on #ffffff = 6.46:1.

### Security
Zod validation both sides; RLS on `trial_signups`: enable, anon insert-only, select for `sales` role only. Rate limit and honeypot. Explicitly no payroll, salary or ID fields anywhere on the marketing site. Confirmation via a transactional email service; secrets server-only.

### Performance & SEO
Static generation; portrait as priority AVIF with fixed aspect; collages lazy. Self-host Mona Sans and Familjen Grotesk. Metadata, OG images, SoftwareApplication JSON-LD. Lighthouse 90+.

### Guardrails
- Invent all names, logos, figures and testimonials; label stats as illustrative until real.
- Use stock or generated portraits with rights; no real employees.
- Typed components, no `any`, content in JSON.
- Acceptance criteria: (1) hero readable and CTA visible at 390px; (2) trial form handles all five states; (3) collage table scrolls without breaking layout; (4) reduced motion stops drifting and counters; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own