Hazelpoint

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

Wix Madefor Display and Text are a matched pair drawn for headlines and small copy respectively, so the tight 60px heading and the 16px body share one warm, founder-friendly voice.

• Wix Madefor DisplayHeadings: hero 60px 500, H2 48px 400, -0.055em tracking
• Wix Madefor TextBody: body 16px/1.5 500, statement paragraph 30px 400, labels 14px

Patterns

• dashed blueprint guide rails framing the content column with corner dots
• announcement pill above hero headline
• hero with product dashboard mockup in a soft framed tray
• avatar stack with review count and star rating
• greyscale logo marquee
• oversized mission statement paragraph with stat counters
• tilted floating gradient tag pills
• alternating split feature cards on pastel tints
• three-step how-it-works with dashed curved connector
• three-tier pricing cards
• FAQ accordion
• closing CTA band with newsletter footer

States it is designed for

• Newsletter: idle, invalid email inline message, submitting (disabled button + spinner), success confirmation, server error with retry
• Dropdown menu open/closed with aria-expanded
• Mobile nav sheet open with focus trapped
• Reduced-motion variant: marquee static and wraps, counters show final value
• Carousel at first/last slide with disabled prev/next
• Long headline or translated copy wrapping without breaking the framed column
• Pricing card highlighted vs default

Who it is for

• Early-stage SaaS founders
• Solo makers and indie builders
• Small digital agencies shipping client sites
• B2B tool teams preparing a launch

Layout

1. Sticky top bar inside the framed column: bolt-mark wordmark left, centered links (Pages dropdown, About, Pricing, Careers, Blog), white pill 'Get started' with chevron right
2. Hero on a faint peach radial glow: 'New' announcement pill, two-line tight headline, two-line muted subcopy, single orange pill CTA, avatar-stack rating chip
3. Product mockup: full dashboard (sidebar, greeting, four KPI cards, bar chart, insights list, table) inside a pale rounded tray
4. Trust line plus greyscale logo marquee
5. About block: eyebrow chip, large 30px statement paragraph left, three animated stat counters below, cluster of tilted gradient tag pills right
6. Centered section intro followed by an interactive feature showcase
7. 'AI features' heading left-aligned, then two full-width split cards (illustration + copy + 'Learn more' pill), alternating sides, tinted periwinkle and lilac
8. How it works: three icon circles joined by a dashed wavy line, title and two-line description under each
9. Testimonials carousel with prev/next buttons
10. Pricing: three cards, middle highlighted
11. FAQ two-column accordion
12. Closing CTA band, footer with link columns and newsletter field with orange subscribe pill
13. Breakpoints: guide rails collapse to 10px side margins under 768px; nav becomes a menu sheet; stat counters and steps stack; feature cards stack illustration above copy; dashboard mockup scales down inside a horizontally clipped frame

Palette

warm, crisp, optimistic, founder-friendly. A tidy workshop feel where the orange spark signals momentum without shouting.

• page background#f5f5f5
• card / surface#ffffff
• ink (headings, body)#1e0d01
• muted text#746a63
• brand orange (button fill)#f97518
• orange text / focus ring#bb5005
• orange chart bars#f66a06
• feature card tint periwinkle#e3e7f3
• feature card tint lilac#e6e0f2
• input border#8a8078
• positive delta#12883e

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

Wix Madefor Display 500, hero 60px/1.0 with about -0.055em tracking, section h2 48px weight 400 with the same tight tracking

Body

Wix Madefor Text 500, 16px/1.5 for paragraphs; statement paragraph 30px/1.35 weight 400; small labels 14px

Very tight negative tracking on headings gives a compact, confident look; keep body at normal tracking. Chip and eyebrow labels are sentence case, never all caps.

Spacing and imagery

Airy: 120px vertical section rhythm on desktop, content confined to a ~900px framed column with dashed guide rails; cards 24-32px padding; radius 16-24px on cards, full pills on buttons and chips; shadows nearly absent, surfaces separated by tint and 1px hairlines.

No photography except small avatars. Product proof is a UI mockup; feature illustrations are simplified wireframe browser windows on grid paper; icons are thin line icons inside soft circles; tag pills use soft multi-hue gradients.

Components

• Framed column with dashed guide rails and corner dots
• Top bar with dropdown menu and pill CTA
• Announcement pill with dot
• Avatar stack rating chip
• Dashboard mockup (KPI cards, bar chart, insight list, data table)
• Logo marquee
• Stat counter
• Floating tag pill cluster
• Split feature card with 'Learn more' pill
• Process step with dashed connector
• Testimonial carousel
• Pricing card (3 tiers)
• FAQ accordion
• Newsletter form

Interactions

• Headline and subcopy fade-rise on load (400ms, 60ms stagger)
• Logo marquee drifts continuously, pauses on hover and focus
• Stat counters count up once when scrolled into view
• Tag pills float gently on a slow loop; static under reduced motion
• Feature cards lift 2px and the arrow nudges right on hover
• Pages dropdown opens on click and hover-intent, closes on Escape
• FAQ accordion animates height; one open at a time
• Carousel buttons and arrow keys move testimonials

Data

• Feature{title, eyebrow, body, illustration, href, tint (periwinkle|lilac)}
• Step{order, icon, title, body}
• Testimonial{quote, name, role, company, avatar}
• Plan{name, price_monthly, blurb, features[], cta_label, highlighted (bool)}
• Faq{question, answer}
• Stat{label, value, suffix}
• Subscriber{email, created_at, source}

Guardrails

Experience

• One primary CTA per viewport: the orange pill; secondary actions are white pills
• Keep the dashboard mockup readable at desktop and crop it, not shrink it to illegibility, on mobile
• Section intros stay under two lines of subcopy
• Label every stat with its unit and what it counts; no bare numbers
• Pricing shows what changes between tiers in the first three bullets
• The guide rails are decorative and must never overlap text

Accessibility

• Orange buttons use dark ink labels (#1e0d01), never white on orange
• Orange text such as eyebrows uses the darkened #bb5005
• Marquee, floating pills and counters honour prefers-reduced-motion
• Dropdown and FAQ use Radix primitives with correct aria-expanded and keyboard support
• Mockup is an image with concise alt text; its fake numbers are not read as page content
• Visible 2px focus ring in #bb5005 with 2px offset on every interactive element

Security

• Validate newsletter email with zod on client and server; store only email and source
• Insert-only RLS policy for the anon role on subscribers; no select for anon
• Rate-limit the subscribe endpoint per IP and add a honeypot field
• Send double opt-in confirmation through a transactional email service

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 **Hazelpoint**, an AI tool that helps founders and small agencies launch a polished product website in days. The page must feel warm, precise and credible: an off-white canvas framed by dashed guide rails, a bold orange spark accent, and a realistic product dashboard mockup right under the hero. Visitors should understand the offer in five seconds, see proof, then move through features, process, testimonials, pricing and FAQ to a single conversion.

### Stack
Astro with React islands and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Accordion, Sheet), lucide-react icons, Motion for reveals, counters and the marquee, zod for the newsletter form. Store newsletter sign-ups in a Supabase table via a small server endpoint; everything else is static content collections.

### Pages & layout
1. **Home**: sticky top bar inside the framed column (bolt mark + wordmark, centered links with a Pages dropdown, white "Get started" pill). Hero on a faint peach radial glow: "New" announcement pill, two-line headline (write fresh copy about launching fast), muted two-line subcopy, one orange pill CTA, avatar-stack chip with review count and star rating. Below, a dashboard mockup in a pale rounded tray: sidebar, greeting, four KPI cards with deltas, monthly bar chart, insights list, sortable table (all invented numbers). Then a trust line with a greyscale logo marquee of invented marks.
2. About block: eyebrow chip, 30px statement paragraph, three stat counters, cluster of tilted gradient tag pills on the right.
3. Features: left-aligned heading, then two full-width split cards alternating image side, tinted periwinkle and lilac, each with eyebrow, h3, body and a white "Learn more" pill.
4. How it works: three icon circles joined by a dashed wavy SVG connector.
5. Testimonials carousel, pricing (three tiers, middle highlighted), two-column FAQ, closing CTA band, footer with link columns and newsletter.
6. Stub pages: About, Pricing, Careers, Blog index + post, Contact, all reusing the framed column.
Mobile (<768px): rails become 10px margins, nav collapses into a Sheet, steps and counters stack, mockup is cropped inside its tray with horizontal clipping rather than shrunk.

### Design system
```
--bg: #f5f5f5; --surface: #ffffff; --ink: #1e0d01; --muted: #746a63;
--orange: #f97518; --orange-text: #bb5005; --orange-chart: #f66a06;
--tint-periwinkle: #e3e7f3; --tint-lilac: #e6e0f2;
--input-border: #8a8078; --positive: #12883e;
```
Fonts: Wix Madefor Display 500 for display (60px hero, 48px h2, line-height 1.0-1.05, tracking about -0.055em); Wix Madefor Text 500 for body at 16px/1.5; statement paragraph 30px/1.35. Spacing on a 4px base with 120px section padding; framed column max 900px, cards 24-32px padding. Radius: cards 20px, trays 28px, buttons and chips full pill. Shadows: none on cards, a 1px #ffffff inner highlight on pills. Motion: 400ms ease-out reveals, 60ms stagger, marquee 40s linear loop.

### Components & interactions
GuideRails (absolute dashed borders with 4px corner dots, aria-hidden), NavBar with NavigationMenu dropdown (click and hover-intent, Escape closes), AnnouncementPill, RatingChip, DashboardMockup (static image or lightweight static React, aria-hidden inner content with one alt summary), LogoMarquee (pauses on hover/focus), StatCounter (counts up once in view), TagCloud (slow float loop), FeatureSplitCard (hover lift 2px, arrow nudge), ProcessSteps (dashed connector hidden on mobile), TestimonialCarousel (buttons + arrow keys, disabled ends), PricingCard, FaqAccordion (single open), NewsletterForm.

### Data & state
Content collections: `features`, `steps`, `testimonials`, `plans`, `faqs`, `stats`, `logos` (invented). Newsletter posts to `/api/subscribe` which inserts into `subscribers(id, email unique, source, created_at, confirmed_at)`. Form states: idle, invalid, submitting, success, error with retry. No other client state beyond open menus and carousel index.

### Accessibility
Orange fills always carry ink labels; orange text uses `--orange-text`. All motion (marquee, float, counters, reveals) respects prefers-reduced-motion. Radix handles menu, accordion and sheet semantics; the mobile sheet traps focus and returns it to the trigger. Provide skip link, one h1, logical h2/h3 order, visible 2px focus rings in `--orange-text` with offset. Marquee duplicates are aria-hidden. Star rating includes text ("4.9 out of 5 from 2,000 reviews", invented).
Verified contrast: body ink on page: #1e0d01 on #f5f5f5 = 17.3:1; muted text on page: #746a63 on #f5f5f5 = 4.83:1; primary button label on orange: #1e0d01 on #f97518 = 6.81:1; orange eyebrow text on page: #bb5005 on #f5f5f5 = 4.52:1; heading ink on lilac feature card: #1e0d01 on #e6e0f2 = 14.65:1; input border on white: #8a8078 on #ffffff = 3.86:1; focus ring on white: #bb5005 on #ffffff = 4.93:1; orange chart bar on white card: #f66a06 on #ffffff = 3.01:1; positive delta text on white card: #12883e on #ffffff = 4.55:1; white text on ink footer band: #ffffff on #1e0d01 = 18.86:1.

### Security
Validate email with zod on client and endpoint; reject over 254 chars. Supabase RLS on `subscribers`: enable RLS, allow insert only (anon role, with check on email format), no select/update/delete for anon; service role key stays server-side. Rate-limit subscribe per IP, add honeypot field, send double opt-in via a transactional email service. Set a strict CSP; no third-party scripts beyond self-hosted fonts.

### Performance & SEO
Static-render everything; hydrate only nav, marquee, carousel, counters and form. Serve the mockup as AVIF/WebP with explicit dimensions and `fetchpriority=high`. Self-host Wix Madefor Display and Wix Madefor Text with `font-display: swap`. Unique titles, meta descriptions, OG images, JSON-LD for SoftwareApplication and FAQPage. Lighthouse 95+ on mobile.

### Guardrails
- All copy, logos, names, testimonials and numbers are invented and generic; label testimonials as illustrative in the content file.
- Keep one orange CTA per viewport and never white text on orange.
- Guide rails and tag pills are decoration only.
- Components typed, no `any`; content lives in collections, not hard-coded in markup.
- Acceptance criteria: (1) hero, mockup and CTA visible above the fold at 1280x800; (2) newsletter handles all five states; (3) all motion stops under reduced motion; (4) keyboard can reach and operate menu, carousel and FAQ; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own