Axlewood

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

Mozilla Headline is a sleek grotesk drawn for large sizes, so the regular-weight 72px headings with tight tracking look quiet and premium on the dark launch page.

• Mozilla HeadlineHeadings: hero 72px 400 at -0.05em, section heads 48px, proof headline 30px 700
• Mozilla HeadlineBody: body 16px/1.5 400, subline 20px, card titles 18px 700

Patterns

• centred thin-weight hero with two white buttons
• rounded slate panel holding a 3x2 icon feature card grid
• text-left / device-mockup-right showcase
• white contrast band with social-proof headline and icon row
• accordion feature explainer beside heading
• two-column review cards with star ratings
• app-store download section with tilted phone render
• light/dark theme toggle in header
• slim footer with social icons

States it is designed for

• Light theme variant for every section
• Accordion collapsed / expanded
• Contact form: validation errors, sending, sent, failed
• Device images loading with reserved aspect ratio
• Store buttons link to placeholders until real listings exist (visually marked as 'Coming soon')

Who it is for

• solo developers launching an app
• students learning a modern web framework
• startups wanting a lightweight landing page

Layout

1. Header: plain-text site name left; Home and Contact links and a sun/moon theme toggle right; hairline bottom border
2. Hero on black: 72px tight-tracked headline, 20px grey one-liner, two small white buttons side by side
3. Features panel: full-width #111827 rounded (8px) block with centred 48px heading, intro line and a 3x2 grid of #1f2937 cards (white icon, bold title, grey description)
4. Showcase: 48px left-aligned heading and paragraph on the left, upright phone mockup on the right
5. Proof band: white background, bold black three-line headline left, a row of seven monochrome glyph icons right
6. Accordion section: three stacked dark accordion items on the left (first open), 48px heading and paragraph on the right
7. Reviews: slate band with centred heading and a 2x2 grid of cards (green stars, bold title, grey quote, name and role)
8. Download: black section with tilted phone render left and heading, text and two store buttons right
9. Footer: copyright left, five social icons right
10. Mobile: site name wraps; all two-column sections stack text first; review grid single column

Palette

Dark, sleek and product-launch ready. Big quiet headings and white buttons feel premium with minimal effort.

• canvas black#000000
• panel slate#111827
• card slate#1f2937
• primary text / button fill#ffffff
• secondary text#d1d5db
• muted text#9ca3af
• star green#22c55e
• input / divider border#56667f

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

Mozilla Headline 400 at 72px/1.0 with -0.05em tracking (hero) and 48px/1.0 (section heads); proof headline 700 30px

Body

Mozilla Headline 400 16px/1.5; hero subline 20px at weight 400 (observed 300 is below the 24px light-weight threshold)

Regular-weight large headings with tight tracking give an elegant feel; bold is used for card titles, buttons and the proof band only.

Spacing and imagery

Airy; container full-bleed with 32px gutters; section padding 96-128px; card padding 20px; grid gap 24px. Radius 6px buttons, 8px cards and panels. No shadows.

Photoreal phone renders (upright and tilted) with blank or app screens; monochrome glyph icons in cards and the proof row; filled green stars.

Components

• SiteHeader with ThemeToggle
• Hero
• FeaturePanel with FeatureCard
• ShowcaseSplit with DeviceMockup
• ProofBand with IconRow
• FeatureAccordion
• ReviewCard with StarRating
• StoreButtons
• DownloadSection
• SiteFooter with SocialIcons
• ContactForm

Interactions

• Theme toggle switches light/dark, respecting system preference on first visit
• Accordion: one item open at a time, chevron rotates 180deg over 150ms
• White buttons dim to #e5e7eb on hover
• Feature cards lighten 4% on hover
• Phone mockups fade in on scroll (disabled under reduced motion)

Data

• Feature{icon, title, body}
• AccordionItem{title, body}
• Review{rating (1-5), title, quote, name, role}
• SocialLink{network, href, label}
• ContactMessage{name, email, message}

Guardrails

Experience

• Hero has one headline, one line of copy and at most two buttons with different labels and destinations
• Proof band number must be real or clearly sample; no inflated claims
• Accordion titles are benefits in 2-4 words; bodies one or two sentences
• Reviews show star rating plus name and role; mark them as sample content
• Store buttons only appear when the app is actually listed

Accessibility

• Replace the observed weight-300 20px subline with weight 400
• Accordion uses button triggers with aria-expanded and region content
• Star ratings expose text like 'Rated 4 out of 5'
• Theme toggle has an accessible name reflecting the next state
• Decorative phone renders use empty alt; glyph icons in the proof row are aria-hidden with a visually hidden list

Security

• Contact form posts to a server action with zod validation, a honeypot and rate limiting
• No API keys in client bundles; the email service key lives in server env
• Social and store links use rel="noopener noreferrer"
• Collect only name, email and message

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 **Axlewood**, a minimal-dependency landing-page starter for a SaaS or mobile app. It ships a complete dark landing page with a light-theme variant, a contact page and nothing heavier than the framework, Tailwind CSS, a theme switcher and an icon set. The example product is an invented habit-and-task app.

### Stack
Next.js (App Router) + React + TypeScript, Tailwind CSS with class-based dark mode, a tiny theme provider (class on `<html>`, with a system-preference default), lucide-react icons, Radix Accordion, and zod for the contact server action. No database.

### Pages & layout
1. **Home**, top to bottom:
   - Header: plain-text site name; Home and Contact links; a sun/moon toggle; hairline bottom border.
   - Hero on black: a large regular-weight headline with tight tracking ("Plan less. Do more."), a one-line subline, and two small white buttons ("Get started", "Download").
   - Features panel: a full-width slate rounded block, centred heading and intro, then a 3x2 grid of darker cards (icon, bold title, two-line description).
   - Showcase: a left-aligned heading and paragraph, with an upright phone mockup on the right.
   - Proof band: a white strip with a bold black headline ("Trusted by 12,000 early adopters", marked as sample) and a row of seven monochrome glyphs.
   - Accordion: three dark items on the left (first open), with a heading and paragraph on the right.
   - Reviews: a slate band and a 2x2 grid of cards (green stars, title, quote, name, role).
   - Download: a tilted phone render on the left; heading, text and two store buttons on the right.
   - Footer: copyright left, social icons right.
2. **Contact**: centred 560px form (name, email, message).
3. **Responsive**: every split stacks text-first under 768px; the reviews grid becomes one column; section padding shrinks to 64px.

### Design system
- Dark colors: `--bg: #000000`, `--panel: #111827`, `--card: #1f2937`, `--fg: #ffffff`, `--fg-2: #d1d5db`, `--muted: #9ca3af`, `--star: #22c55e`, `--border: #56667f`. Buttons are white fills with black labels.
- Light theme: invert to white canvas, `#f3f4f6` panels, `#111827` text and `#4b5563` muted text; verify pairs again.
- Fonts: Mozilla Headline. Hero 400 at 72px/1.0, -0.05em; section heads 400 at 48px; card titles 700 at 18px; body 400 at 16px/1.5; subline 400 at 20px.
- Spacing: 8px grid; section padding 96-128px; gutters 32px; card padding 20px.
- Radius: 6px buttons; 8px panels and cards.
- Shadows: none.
- Motion: 150ms hovers, 200ms accordion, scroll fade-ins off under reduced motion.

### Components & interactions
SiteHeader, ThemeToggle, Hero, FeaturePanel, FeatureCard, ShowcaseSplit, DeviceMockup (next/image), ProofBand, IconRow, FeatureAccordion (single-open), ReviewCard, StarRating, StoreButtons, DownloadSection, SiteFooter, ContactForm. White buttons hover to `#e5e7eb`; cards lighten slightly on hover; the chevron rotates on open.

### Data & state
Content lives in typed arrays: `Feature {icon, title, body}`, `AccordionItem {title, body}`, `Review {rating, title, quote, name, role}`, `SocialLink {network, href, label}`. The theme is stored in localStorage (try/catch) with the system default. The contact action returns `{ok}` or field errors.

### Accessibility
Landmarks and one h1. The accordion follows the Radix pattern (`aria-expanded`, `aria-controls`). Star ratings carry text equivalents. The toggle announces "Switch to light theme" or "Switch to dark theme". Decorative renders have `alt=""`. The focus ring is 2px white on dark (2px black on light) with offset. The subline uses weight 400.
Verified contrast: primary text on black: #ffffff on #000000 = 21.0:1; secondary text on black: #d1d5db on #000000 = 14.25:1; muted text on card: #9ca3af on #1f2937 = 5.78:1; muted text on panel: #9ca3af on #111827 = 6.99:1; button label on white: #000000 on #ffffff = 21.0:1; star green on card: #22c55e on #1f2937 = 6.44:1; input border on panel: #56667f on #111827 = 3.04:1.

### Security
The contact server action validates with zod, limits lengths, strips HTML, checks a honeypot and rate-limits by IP before calling a transactional email service whose key lives only in server env. External links use `rel="noopener noreferrer"`. No analytics by default.

### Performance & SEO
Static generation for all pages. Device renders as AVIF/WebP with explicit sizes; lazy-load below the fold. Self-host Mozilla Headline. Metadata API for title, description, OG image and canonical. Keep first-load JS under 80 KB. Lighthouse 95+.

### Guardrails
- Invent the product, copy, reviewer names and numbers; label reviews and counts as sample content.
- Use generic device renders you are licensed to use or render your own.
- Keep dependencies minimal: no UI kit beyond Radix Accordion.
- Acceptance criteria:
  - [ ] Both themes render every section with passing contrast
  - [ ] Accordion and theme toggle work by keyboard
  - [ ] Contact form shows success and error states
  - [ ] No layout shift from images (CLS under 0.05)
  - [ ] Mobile layout has no horizontal scroll

Open the builderAll templatesThis palette on its own