Arcwell

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

Asap is a crisp, dependable sans with a slightly rounded finish, so medium-weight headlines look calm and a little corporate against lots of white.

• AsapHeadings: hero 48px 500, H2 36px, -0.025em, Title Case; prices 32px 700 tabular
• AsapBody: body 16px/1.5 400, subheads 18px, eyebrows 14px 700 uppercase +0.08em

Patterns

• eyebrow label above every section heading
• centred hero with ghost + solid CTA pair
• three-point proof row under hero
• product screenshot framed in a tinted rounded panel
• auto-scrolling capability chip marquee
• split media + copy section with checklist columns
• full-bleed saturated colour band with pale feature cards
• numbered three-step how-it-works with dotted dividers
• pricing toggle monthly/yearly
• three-tier pricing with dark highlighted middle and brand-coloured top tier
• testimonial cards with avatar
• newsletter signup plus four-column footer
• nav badges (NEW pill, status dot)

States it is designed for

• Newsletter: empty, invalid email, submitting (button spinner, disabled), success message, server error with retry
• Auth forms: validation errors per field, wrong credentials, loading, success redirect
• Billing toggle: monthly default, annual selected persisted in URL
• Screenshot image loading placeholder with fixed aspect ratio
• Long plan feature lists truncate after 8 items with 'See all features'

Who it is for

• early-stage SaaS founders
• indie developers launching a side project
• agencies needing a quick product site

Layout

1. Sticky top bar: wordmark left; centre links (Features, Updates with a small red NEW pill, Changelog with a green dot, FAQ); ghost 'Sign up' and solid 'Log in' right; hamburger under 768px
2. Hero: blue uppercase eyebrow, 48px two-line headline, one-line muted subhead, ghost + solid buttons, then a three-column proof row of bold lead-ins with muted text
3. Screenshot panel: app dashboard image inside a pale-blue rounded container with 32px inset
4. Section: eyebrow, headline, subhead, then a horizontally scrolling chip marquee with edge fades, then a four-column icon feature row
5. Split section: screenshot panel left, eyebrow + headline + CTA pair right; below, three columns each with title, paragraph and two check bullets
6. Full-bleed blue band: centred white heading and three pale cards with line icons
7. How it works: three numbered circles with titles, separated by vertical dotted rules
8. Pricing: segmented monthly/annual toggle, three cards (light, near-black 'Popular', saturated blue) each with a top panel and a checklist
9. Testimonials: three light-grey cards with circular avatar, quote and bold name line
10. Footer on a soft blue gradient: wordmark + blurb, newsletter input with Subscribe, four link columns, bottom credit row
11. Mobile: single column, CTA buttons stacked full width, pricing cards stack with Popular first, marquee remains swipeable

Palette

Crisp, trustworthy, a little corporate. Blue accents and lots of white make it feel like a dependable business tool.

• page background#ffffff
• alt section / card grey#f9fafb
• heading text#111827
• muted text#6b7280
• brand blue (eyebrow, primary button)#0065ff
• blue band background#1a5cff
• pale blue card on band / screenshot frame#eaf1ff
• card body text on pale blue#374151
• dark pricing card#0b0f19
• input / ghost-button border#8c95a2
• NEW badge red#dc2626

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

Asap 500 (standing in for the observed variable sans), 48px hero / 36px section h2, line-height 1.3, -0.025em tracking; Title Case headings

Body

Asap 400 16px/1.5 body, 18px subheads; eyebrows Asap 700 14px uppercase with 0.08em tracking

Medium-weight headlines keep the look calm; bold is reserved for eyebrows, prices and proof lead-ins. Raise the observed 12px nav buttons to 14px.

Spacing and imagery

Airy; 4px base; sections 112px apart; container 1152px; card padding 24-32px; grid gap 24px. Radius 6px buttons, 16px cards and screenshot panels, 24px pricing cards. Shadows: faint 1px on light cards; none on the blue band.

Product dashboard screenshots in tinted frames; thin blue line icons; circular headshot avatars for testimonials (use illustrated or generated neutral avatars).

Components

• TopNav with badge pill and status dot
• Eyebrow + SectionHeading + Subhead block
• HeroCTAPair (ghost, solid)
• ProofRow
• ScreenshotFrame
• ChipMarquee
• IconFeature
• ChecklistColumn
• ColourBand with FeatureCard
• NumberedStep
• BillingToggle (segmented)
• PricingCard variants (light, dark-popular, brand)
• TestimonialCard
• NewsletterForm
• FooterColumns
• Auth forms (sign up, sign in)

Interactions

• Nav links underline on hover; mobile menu is a slide-down panel with focus trap
• Chip marquee scrolls continuously at slow speed, pauses on hover and focus, and stops under reduced motion
• Billing toggle swaps prices with a 150ms crossfade and shows a 'save 2 months' hint on annual
• Pricing cards lift 2px on hover
• Newsletter submit shows inline success or error without page reload
• FAQ page uses accordions with one-open-at-a-time behaviour

Data

• Plan{id, name, audience, blurb, priceMonthly, priceAnnual, highlight (none|popular|brand), features[]}
• Testimonial{quote, author, role, avatar}
• Feature{icon, title, body}
• ChangelogEntry{date, version, title, body (markdown), tags[]}
• FaqItem{question, answer}
• NewsletterSignup{email, createdAt, source}

Guardrails

Experience

• Every section follows eyebrow, heading, subhead so scanning is predictable; eyebrows must say something meaningful, never a placeholder word
• One primary CTA per viewport; the ghost button is always the secondary
• Pricing highlights exactly one plan and shows annual savings explicitly
• Keep the chip marquee to short capability phrases (2-4 words)
• Testimonials must be clearly labelled as sample content until real ones exist
• Footer links go to real pages or are removed

Accessibility

• Marquee has a pause control and is aria-hidden duplicate content; the chip list is also rendered once as a static list for screen readers
• Billing toggle is a radio group with visible labels, not two unlabelled buttons
• White text on the #1a5cff band reaches 5.23:1; pale cards on the band use #374151 body text
• Input and ghost-button borders use #8c95a2 (3.03:1) rather than the observed light grey
• Eyebrows are 14px bold uppercase with 0.08em tracking; never smaller
• Status dot and NEW pill carry text alternatives

Security

• Newsletter endpoint validates email with zod, rate-limits by IP and uses double opt-in
• Store sign-ups in a table with RLS: insert-only for anon, no select
• Auth pages use a hosted auth provider; never handle raw passwords in custom code
• Add honeypot field and time-to-submit check on forms
• Collect only email for the newsletter; link to privacy page beside the form

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 **Arcwell**, a lean marketing-site starter for a young SaaS product. It ships a long, conversion-ordered landing page plus FAQ, changelog, terms, privacy, sign-up and sign-in pages, all re-skinnable through a handful of CSS variables. The invented example product is a team workspace for scheduling client work.

### Stack
Astro with TypeScript and Tailwind CSS; lucide icons (the lucide-react set or its static SVG equivalent); content collections for changelog and FAQ; zod for form validation. Newsletter and auth forms post to Supabase (auth + one `newsletter_signups` table). Tiny vanilla islands for the mobile menu, billing toggle and marquee.

### Pages & layout
1. **Landing (`/`)**, top to bottom:
   - Sticky nav: wordmark; links Features, Updates (red NEW pill), Changelog (green dot), FAQ; ghost "Sign up" and solid "Log in".
   - Hero: blue uppercase eyebrow ("Scheduling for small teams"), medium-weight two-line headline, one-line subhead, ghost "See the tour" + solid "Start free", then a three-column proof row (bold lead-in + muted sentence).
   - Screenshot of an invented dashboard inside a pale-blue rounded frame.
   - Capabilities: heading, a slow chip marquee of short phrases with edge fades, and four icon features.
   - Split section: screenshot left, heading + CTA pair right; below it three columns with paragraph and two check bullets each.
   - Full-bleed blue band with white heading and three pale feature cards.
   - How it works: three numbered steps separated by dotted rules.
   - Pricing: monthly/annual segmented toggle; three cards: light "Starter", near-black "Team" with a Popular chip, blue "Scale"; each has a top summary panel, price, button and checklist.
   - Testimonials: three grey cards with avatar, quote, name and role (clearly sample).
   - Footer: soft blue gradient, blurb, newsletter form, four link columns, credit row.
2. **FAQ, Changelog, Terms, Privacy**: shared narrow prose layout (max 720px).
3. **Sign up / Sign in**: centred card, 400px wide, same tokens.
4. **Responsive**: under 768px the nav becomes a hamburger panel, grids go single-column, CTAs stack full width.

### Design system
- Colors: `--bg: #ffffff`, `--bg-alt: #f9fafb`, `--heading: #111827`, `--muted: #6b7280`, `--brand: #0065ff`, `--band: #1a5cff`, `--brand-pale: #eaf1ff`, `--on-pale: #374151`, `--dark-card: #0b0f19`, `--border: #8c95a2`, `--badge: #dc2626`.
- Fonts: Asap. Headlines 500 at 48px (hero) and 36px (sections), line-height 1.3, tracking -0.025em; body 400 at 16px/1.5; subheads 18px; eyebrows 700 at 14px uppercase, 0.08em tracking; prices 700 at 32px with tabular numerals.
- Spacing: 4px base; 112px section rhythm; container 1152px; card padding 24-32px.
- Radius: 6px buttons and inputs, 16px cards and frames, 24px pricing cards; pills fully rounded.
- Shadows: `0 1px 3px rgb(17 24 39 / 0.06)` on light cards only.
- Motion: 150ms transitions; marquee at 40s per loop; all motion off under reduced motion.

### Components & interactions
TopNav, Eyebrow, SectionHeading, HeroCTAPair, ProofRow, ScreenshotFrame, ChipMarquee (pause button, hover/focus pause), IconFeature, ChecklistColumn, ColourBand, NumberedStep, BillingToggle (radio group, persists `?billing=annual`), PricingCard (light | popular-dark | brand), TestimonialCard, NewsletterForm, FooterColumns, AuthCard. Pricing cards lift 2px on hover. Newsletter shows inline states without reload. FAQ uses native `<details>` accordions.

### Data & state
Plans, features, testimonials and FAQ live in typed data files; changelog entries are markdown with `{date, version, title, tags}` front matter. `newsletter_signups(id, email unique, source, confirmed_at, created_at)`. The only client state is the mobile menu, billing toggle and form status.

### Accessibility
Landmarks for nav, main and footer; one h1. The marquee duplicates are `aria-hidden` and a static list carries the content; provide a visible pause control. The billing toggle is a labelled radio group. Status dot and NEW pill have text equivalents. Inputs have labels, not placeholder-only. Focus ring: 2px `--brand` with 2px offset (white ring on the blue band).
Verified contrast: heading on white: #111827 on #ffffff = 17.74:1; muted text on grey card: #6b7280 on #f9fafb = 4.63:1; primary button label: #ffffff on #0065ff = 4.88:1; eyebrow blue on white: #0065ff on #ffffff = 4.88:1; white text on blue band: #ffffff on #1a5cff = 5.23:1; card text on pale blue: #374151 on #eaf1ff = 9.09:1; white text on dark pricing card: #ffffff on #0b0f19 = 19.15:1; input border on white: #8c95a2 on #ffffff = 3.03:1; NEW badge label: #ffffff on #dc2626 = 4.83:1.

### Security
Enable RLS on `newsletter_signups`: anon may insert only, nobody may select from the client. Validate email with zod on client and in the insert function, rate-limit by IP, add a honeypot field and double opt-in via a transactional email service. Auth uses Supabase Auth with email verification; no custom password handling. Keep the anon key public only; service keys stay server-side.

### Performance & SEO
Ship static HTML with islands only where needed. Serve screenshots as AVIF/WebP with width/height set and lazy-load below the fold. Self-host Asap subset. Unique title and meta description per page, sitemap, RSS for the changelog, canonical URLs and an original OG image. Target Lighthouse 95+ across the board.

### Guardrails
- All copy, plan names, prices and testimonials are invented; label testimonials as sample content.
- Use your own screenshots of an invented dashboard; no copied UI or logos.
- Replace every eyebrow placeholder with real, specific text.
- Acceptance criteria:
  - [ ] All eight pages build and link correctly
  - [ ] Billing toggle updates every price and survives reload
  - [ ] Newsletter handles invalid, duplicate, success and error states
  - [ ] Marquee can be paused and is static under reduced motion
  - [ ] No contrast failures on the blue band or dark card

Open the builderAll templatesThis palette on its own