Foldwire

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

Space Grotesk keeps the technical, drawing-office headings, and IBM Plex Sans has the engineered, slightly mechanical detailing that fits a monochrome machine for busywork.

• Space GroteskHeadings: display 48px / 34px 500, H2 36px, -0.05em; pricing figure 40px
• IBM Plex SansBody: body 16px/1.6 400, tab titles 17px 500, uppercase tags 12px +0.06em

Patterns

• blueprint frame with corner crosshairs
• centred hero with two-tone headline
• isometric line illustration
• logo marquee
• tabbed feature list with synced illustration
• vertical accordion tabs beside diagram
• pricing cards with yearly switch and '2 months free' tag
• check-list plan inclusions
• hairline-ruled sections

States it is designed for

• illustration SVG fails: show alt caption on grey panel
• newsletter: invalid email, submitting, subscribed, already subscribed, error
• reduced-motion: no auto-advance, marquee static
• long plan feature lists collapse after 7 items with 'Show all'

Who it is for

• operations and RevOps teams
• no-code builders
• technical founders
• agencies automating client workflows

Layout

1. top bar: wordmark, centred links (About, Features, Pricing, Articles, Contact), 'Sign in' text link and black 'Get started' button; hamburger sheet below 768px
2. whole page sits inside a 1px ruled frame with '+' crosshair marks at section corners (frame hidden below 640px)
3. hero: centred two-line H1 (second line in mid-grey), lede, black primary + outlined 'Watch demo' button, large isometric illustration of tool icons on a conveyor feeding an engine block that outputs 'completed' tiles
4. 'trusted by' label with a scrolling marquee of placeholder logos
5. engine section: left heading + lede, 2x2 tab list (automation, integrations, data processing, decision engine) that swaps a stacked-window isometric drawing
6. reliability section: heading, left vertical accordion (available, low-latency, edge delivery, scalable, fault-tolerant) with an underline progress bar, right node-graph drawing in a crosshair frame
7. pricing: three plans with monthly/yearly switch, '2 months free' tag, feature check-list below each price
8. articles teaser, newsletter subscribe, footer

Palette

Technical, monochrome, architectural: like an engineering drawing of a machine that does your busywork.

• page background#fcfcfc
• surface#ffffff
• ink#1a1a1a
• body muted#666666
• secondary / inactive tab text#747474
• rule lines (decorative)#e6e6e6
• input border#767676
• success dot#12883e
• button label#ffffff

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

Space Grotesk 500, 48px desktop / 34px mobile, line-height 1.05, tracking -0.05em

Body

IBM Plex Sans 400, 16px, line-height 1.6 (observed 14px raised to 16px)

H2 36px/500 Space Grotesk; tab titles 17px/500; inactive tabs in --subtle; pricing figure 40px/500; uppercase tag '2 months free' 12px with 0.06em tracking.

Spacing and imagery

Density: measured, engineered; 96px section padding inside the ruled frame Grid: 12-column inside a 1200px frame; sections separated by full-width 1px rules Container: 1200px framed container, 36px inner padding (16px mobile) Radius: buttons 4px, cards 8px, subscribe input 9999px Shadows: none; the ruled frame and drawings provide structure

Black-outline isometric illustrations (conveyors, stacked app windows, node graphs on discs) with light grey fills; monochrome tool icons; faint diagonal grid texture behind the hero; no photography.

Components

• top bar
• ruled page frame with crosshairs
• black button
• outline button with play icon
• isometric hero illustration
• logo marquee
• 2x2 feature tab list
• vertical accordion with progress underline
• node-graph drawing
• pricing card with yearly switch
• check-list rows
• newsletter input
• footer

Interactions

• feature tabs auto-advance every 6s, pause on hover/focus, and cross-fade the drawing
• accordion underline fills over 5s to show auto-advance progress
• marquee scrolls at constant speed, pauses on hover and stops under reduced motion
• yearly switch updates prices and shows the free-months tag
• buttons invert (black→white with black border) on hover

Data

• Plan{id, name, blurb, monthlyPrice, yearlyPrice, features[], cta}
• FeatureTab{id, title, body, illustration}
• ReliabilityItem{id, title, body}
• Article{slug, title, excerpt, date}
• Subscriber{email, createdAt}

Guardrails

Experience

• Auto-advancing tabs must stop permanently once the user interacts.
• Keep the palette strictly monochrome; green appears only as a small 'completed' status dot.
• The ruled frame is decoration; hide it on phones rather than squeezing content.
• Show the yearly saving in words next to the price, not only in a tag.
• Use one primary button style (black) per viewport.

Accessibility

• Tabs use role=tablist; accordion items are buttons with aria-expanded.
• Provide a visible pause control for auto-advancing content (WCAG 2.2.2).
• Inactive tab text uses #747474, which passes 4.5:1 on both backgrounds.
• Isometric drawings get concise alt text describing the flow, not every icon.
• Focus ring: 2px #1a1a1a with 2px white offset.

Security

• Newsletter endpoint validates with zod, rate-limits, and uses double opt-in via a transactional email service.
• Supabase `subscribers` table with RLS: anon insert only, no select.
• Store no names or company data from the marketing site.
• Sign-in link goes to the app domain over HTTPS; the site holds no auth cookies.

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 **Foldwire**, a monochrome marketing site for a visual AI workflow builder: users connect their tools, drop in autonomous agents and watch jobs complete. The design should read like an engineering blueprint (ruled frame, crosshairs, isometric line drawings) and convert visitors to 'Start building' or the pricing page.

### Stack
Astro + TypeScript, Tailwind CSS, shadcn/ui (Radix Tabs, Accordion, Switch, Sheet), lucide-react icons, Motion for cross-fades and marquee, zod + Supabase for the newsletter.

### Pages & layout
1. **Home**: top bar → framed hero (two-tone H1, lede, 'Start building' + 'Watch demo', isometric conveyor illustration) → trusted-by marquee → engine section (heading + 2x2 feature tabs + stacked-window drawing) → reliability section (5-item vertical accordion + node-graph drawing) → pricing (Starter / Growth / Enterprise with yearly switch) → articles teaser (3 cards) → newsletter → footer.
2. **Features**, **Pricing**, **Articles** (index + post), **About**, **Contact**.
3. Breakpoints: tab grid 2x2 → single column under 768px with the drawing above; accordion and drawing stack; frame and crosshairs hidden under 640px.

### Design system
- Colors: `--bg: #fcfcfc`, `--surface: #ffffff`, `--ink: #1a1a1a`, `--muted: #666666`, `--subtle: #747474`, `--rule: #e6e6e6`, `--border: #767676`, `--success: #12883e`, `--on-ink: #ffffff`.
- Fonts: Space Grotesk 500 display 48/34px and H2 36px (tracking -0.05em); IBM Plex Sans 400 body 16px/1.6; uppercase tags 12px +0.06em.
- Spacing: 4px base; 96px section padding; 36px frame inset.
- Radius: 4px buttons, 8px cards, pill inputs.
- Frame: 1px `--rule` borders with 12px '+' crosshair SVGs at every section corner.
- Motion: 300ms cross-fades, 6s tab auto-advance, 30s marquee loop.

### Components & interactions
TopBar, Button (black, outline with play icon), BlueprintFrame + Crosshair, IsoIllustration (inline SVG, strokes in --ink), LogoMarquee, FeatureTabs (2x2 grid of tab buttons, active tab white card, others text in --subtle), ReliabilityAccordion (progress underline), NodeGraph, PricingCard with BillingSwitch and FreeMonthsTag, CheckList, ArticleCard, NewsletterForm, Footer.

### Data & state
Typed content files for plans, feature tabs, reliability items and articles (MDX). Billing period and active tab are island state. Newsletter posts to an endpoint that validates the email and inserts into `subscribers`, then sends a confirmation email.

### Accessibility
One H1, semantic sections. Auto-advance has a pause button and stops on interaction. Drawings are `img` with alt or `svg role=img` with `title`. Pricing announces changes via aria-live. Minimum 12px text, body 16px.
Verified contrast: body text: #666666 on #fcfcfc = 5.6:1; inactive tab text: #747474 on #ffffff = 4.67:1; headline ink: #1a1a1a on #fcfcfc = 16.96:1; button label: #ffffff on #1a1a1a = 17.4:1; input border: #767676 on #fcfcfc = 4.43:1; success dot: #12883e on #ffffff = 4.55:1.

### Security
RLS on `subscribers` (anon insert, no read). zod validation, honeypot, per-IP rate limit, double opt-in. Environment variables hold the email-service key server-side only.

### Performance & SEO
Inline critical SVGs, lazy-load the rest; no raster images needed except OG. Title, description, OG image, SoftwareApplication JSON-LD. Target Lighthouse 95+.

### Guardrails
- All logos in the marquee are invented placeholder marks.
- Tool icons in drawings are generic glyphs (mail, chat, calendar), not real app logos.
- Write original copy; no borrowed taglines.
- Keep drawings as original SVG, never traced from references.

**Acceptance criteria**
- [ ] Frame and crosshairs align on desktop and disappear cleanly on mobile
- [ ] Feature tabs and accordion auto-advance, pause, and are keyboard operable
- [ ] Yearly switch updates all prices and states the saving
- [ ] Newsletter double opt-in works and rows are unreadable to anon
- [ ] All text pairs pass the recorded contrast checks

Open the builderAll templatesThis palette on its own