Farrowline

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

SUSE is a crisp geometric grotesk with a sharp, slightly theatrical bold, which suits the tunnel-grid hero and keeps the dense order tables clean.

• SUSEHeadings: H1 44px / 32px mobile 700, -0.02em; H2 40px 700; metric figures 56px 700 tabular
• SUSEBody: body 16px/1.5 500, dense tables 15px, trust label 16px uppercase +0.05em

Patterns

• centred hero over perspective grid tunnel
• browser-framed dashboard mock
• logo strip
• full-width chart showcase card with value callout
• tilted table showcase on violet panel
• metric impact row
• testimonial wall
• three-tier pricing (free, paid, custom)
• FAQ accordion
• final CTA

States it is designed for

• status pills: shipped, ready to ship, delivered, cancelled -- each with text
• mock data loading skeleton before hydration
• free-trial form: validation, submitting, success, error
• reduced-motion: static grid and flat table
• tables overflow horizontally inside their card on mobile

Who it is for

• online store owners
• e-commerce managers
• growth marketers
• small DTC brands

Layout

1. top bar: italic wordmark left, anchor links (Features, Metrics, Testimonials, Pricing, FAQs), violet outline-glow button right; menu sheet on mobile
2. hero: perspective line-grid tunnel background with drifting dots, bold two-line H1, short lede, violet glowing CTA
3. browser-framed dashboard mock: top nav tabs (Dashboard, Sales, Reports, Shipments), revenue card, stacked bar sales overview, recent orders table with status pills, visitors line chart
4. trusted-by uppercase line and logo strip
5. features: H2, lede; full-width conversion tracker card with smooth line chart and value callout; violet 'order manager' panel with a tilted orders table; further feature cards
6. impact metrics row (four big percentage figures with captions)
7. testimonials, pricing (Free / Pro / Custom), FAQ, CTA band, footer

Palette

Sharp, data-proud, a little theatrical: a dark tunnel grid pulls the eye into a crisp analytics dashboard.

• canvas#10111a
• surface#1a1c2a
• text#ffffff
• soft text#cfcfd1
• muted text#888888
• slate caption#7f839f
• violet primary#4321ea
• sky chart series#7cc3ff
• positive#4ade80
• negative#f87171
• input border#64667c

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.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

SUSE 700, 44px desktop / 32px mobile, line-height 1.2, tracking -0.02em (similar to the observed geometric grotesk)

Body

SUSE 500, 16px, line-height 1.5

H2 40/28px/700; metric figures 56px/700 tabular; table text 15px in dense tables; uppercase trust label 16px +0.05em.

Spacing and imagery

Density: balanced; product mock dense, marketing text sparse Grid: 12-column; feature cards full-width then 6/6 Container: 1200px max, 30px padding (16px mobile) Radius: cards 16px, browser frame 14px, buttons 16px, status pills 9999px Shadows: violet outer glow on primary button (0 0 0 4px rgba(67,33,234,.35)); cards use 1px rgba(255,255,255,.08) border

Perspective line-grid tunnel with sparse dots; charts in violet/blue/sky; product thumbnails in the orders table as neutral placeholder shapes; no people photography except small testimonial avatars.

Components

• top bar
• violet glow button
• perspective grid background
• browser frame
• KPI card
• stacked bar chart
• orders table with status pills
• line chart with legend
• value callout bubble
• tilted table showcase
• metric figure
• testimonial card
• pricing card
• FAQ accordion

Interactions

• grid tunnel lines subtly move toward the vanishing point (disabled under reduced motion)
• chart callout follows hover/keyboard focus along the line
• orders table showcase rotates from tilted to flat as it scrolls into view
• metric figures count up once
• anchor links smooth-scroll with offset for the fixed bar

Data

• Order{id, productName, orderDate, price, status (shipped|ready|delivered|cancelled)}
• KPI{label, value, delta}
• SeriesPoint{date, website, mobileApp, ads}
• Plan{name, price, features[], cta}
• ImpactMetric{value, label}
• Testimonial{quote, name, role}
• TrialSignup{email, storeUrl, createdAt}

Guardrails

Experience

• Use neutral product names in mocks ('Wireless earbuds', 'Canvas tote'); never real branded products.
• Impact metrics must be marked as illustrative or sourced.
• Status pills pair colour with a text label and consistent order.
• Keep the violet fill for the single primary CTA per viewport.
• Tables in mocks keep column headers visible when scrolled horizontally.

Accessibility

• Slate captions use #7f839f to pass 4.5:1 on surface; muted #888888 only on canvas.
• Charts have captions and hidden data tables.
• Anchor navigation uses scroll-margin-top and moves focus to the section heading.
• Focus ring: 2px #7cc3ff with 2px offset.
• Reduced motion removes grid movement, table tilt and counters.

Security

• Trial signup endpoint validates email and store URL (https) with zod, rate-limits, dedupes.
• Supabase `trial_signups` with RLS: anon insert, staff select.
• No store credentials requested on the marketing site; connecting a store happens in-app via OAuth.
• CSP and HSTS headers; no third-party scripts before consent.

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 **Farrowline**, a dark marketing site for an e-commerce analytics dashboard that brings revenue, orders, conversion rate and visitor trends into one view. The hero pulls visitors into a perspective grid toward a browser-framed dashboard mock; feature showcases, impact metrics and simple three-tier pricing close the sale.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix Accordion, Sheet), lucide-react, Recharts for mock charts, Motion for tilt, counters and grid motion, react-hook-form + zod for the trial form, Supabase for sign-ups.

### Pages & layout
1. **Home** (anchor sections): top bar → hero with perspective grid (H1, lede, 'Start your free trial') → browser-framed dashboard mock → trusted-by strip → features (conversion tracker card; order manager violet panel with tilted table; more cards) → impact metrics → testimonials → pricing (Free / Pro / Custom) → FAQs → CTA → footer.
2. **Trial sign-up** page and **Privacy**.
3. Breakpoints: mock scales down and becomes a static image with 'Open interactive demo' button under 640px; feature cards stack; metrics 4→2→1 columns.

### Design system
- Colors: `--canvas: #10111a`, `--surface: #1a1c2a`, `--text: #ffffff`, `--soft: #cfcfd1`, `--muted: #888888`, `--slate: #7f839f`, `--primary: #4321ea`, `--sky: #7cc3ff`, `--positive: #4ade80`, `--negative: #f87171`, `--border: #64667c`.
- Fonts: SUSE 700 for H1 44/32px and H2 40/28px (similar to the observed geometric grotesk); 500 for body 16px/1.5; tables 15px; metric figures 56px tabular.
- Spacing: 4px base; 112px sections; 24px card padding.
- Radius: 16px cards/buttons, 14px browser frame, pill statuses.
- Borders: 1px rgba(255,255,255,.08).
- Glow: button ring `0 0 0 4px rgba(67,33,234,.35)`; violet haze under the mock.
- Motion: 250ms eases; grid drift 20s; counters 1s.

### Components & interactions
TopBar (anchor links, Sheet on mobile), GlowButton, PerspectiveGrid (CSS 3D or SVG), BrowserFrame, DashboardMock (TopTabs, RevenueCard, StackedBarChart, OrdersTable with StatusPill, VisitorsLineChart), LogoStrip, ChartShowcaseCard with Callout, TiltedTableShowcase, MetricFigure, TestimonialCard, PricingCard, FaqAccordion, CtaBand, Footer.

### Data & state
Typed mock data (orders, KPIs, series) with invented products and dates; plans, metrics, testimonials, FAQs in data files. Trial form → route handler → zod → Supabase `trial_signups` (unique email).

### Accessibility
One H1. Mock wrapped in a `figure` with caption; interactive-looking controls inside are inert. Charts provide hidden tables. Status pills read text. Anchor links move focus. Reduced motion respected.
Verified contrast: body text: #ffffff on #10111a = 18.8:1; soft text on surface: #cfcfd1 on #1a1c2a = 10.86:1; muted text on canvas: #888888 on #10111a = 5.3:1; slate caption on surface: #7f839f on #1a1c2a = 4.54:1; primary button label: #ffffff on #4321ea = 7.94:1; sky chart series: #7cc3ff on #1a1c2a = 8.93:1; positive status: #4ade80 on #1a1c2a = 9.69:1; negative status: #f87171 on #1a1c2a = 6.11:1; input border: #64667c on #1a1c2a = 3.0:1.

### Security
RLS on `trial_signups` (anon insert with column check, staff select). zod validation, https-only store URL, rate-limit, honeypot. No store credentials collected here.

### Performance & SEO
Lazy-load Recharts when the mock nears the viewport; grid drawn in CSS. Title, description, OG image, SoftwareApplication and FAQPage JSON-LD. CLS < 0.05 by reserving mock height.

### Guardrails
- No real retailer logos, product brands or people in mocks or logo strips.
- Impact figures are placeholders with a visible footnote.
- Write original headlines; avoid gimmicky copy that promises guaranteed results.
- Keep chart colours consistent across all mocks (violet, blue, sky).

**Acceptance criteria**
- [ ] Hero grid, mock and features render at 390/768/1440px
- [ ] Chart callout works with keyboard focus
- [ ] Trial sign-up validates and stores under RLS
- [ ] Status pills understandable without colour
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own