Ferrola

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

Reddit Sans is a clear, even grotesk with a full weight range, so one family carries both the tightly tracked headings and the operational UI text of a well-kept control room.

• Reddit SansHeadings: display 70px / 40px 500, H2 44px 500, -0.03em; stat numbers 32px tabular
• Reddit SansBody: body 16px/1.6 500, UI labels 14px, chart axes 12px

Patterns

• centred hero with rating chip
• full-width product dashboard mock
• stat cards row
• bento feature grid
• agent catalogue cards
• alternating feature rows with UI vignettes
• integration card grid with connect buttons
• faint square-grid background
• pricing cards with trial CTA
• logo strip

States it is designed for

• dashboard mock renders a skeleton before hydration
• early-access form: empty, invalid email, submitting, success ('You're on the list'), duplicate email notice, server error with retry
• integration grid empty filter state
• reduced-motion static mock
• long agent names wrap to two lines without breaking card height

Who it is for

• small and mid-size trucking and delivery operators
• dispatch managers
• operations leads at logistics startups
• founders evaluating automation tools

Layout

1. floating top bar in a white rounded container: wordmark, Features dropdown, About, Blog, Pricing, outlined 'Book a demo' button; hamburger under 768px
2. hero on a faint square-grid background: rating chip, two-line H1 with a subtle grey gradient, lede, single blue primary button
3. large dashboard mock (sidebar nav, search, date range, 4 stat cards, bar chart with tabs, live tracking card with map) overlapping into the next section; on mobile scaled screenshot inside a scrollable frame
4. 'trusted by' line with logo row
5. solutions section in a white rounded panel: eyebrow pill, split heading and lede, 3x2 bento of capability cards
6. agent catalogue: grid of agent cards (document, builder, chatbot, insight, dispatch) each with icon, title, blurb
7. alternating feature rows on tinted panels: copy + 'View details' button beside a UI vignette (form parsing, scheduling timeline)
8. integrations: heading and grid of connector cards with 'Connect' buttons (1 column on mobile)
9. pricing (3 plans), testimonials, FAQ, final CTA, footer

Palette

Calm, precise, operational: grey-on-white with a single confident blue, like a well-kept control room.

• page background#f5f5f5
• surface#ffffff
• ink#3d3d3d
• muted text#646464
• primary blue#2f69ff
• positive delta#12883e
• negative delta#dc2626
• highlight amber (decorative)#f5b800
• input border#8e8e8e
• hairline#e5e5e5

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

Reddit Sans 500, 70px desktop / 40px mobile, line-height 1.02, tracking -0.03em

Body

Reddit Sans 500, 16px, line-height 1.6

H2 44px/500 tracking -0.03em; card titles 20px/500; stat numbers 32px/500 tabular; eyebrow pills 14px; minimum 12px for chart axis labels.

Spacing and imagery

Density: comfortable; 96px section padding, dashboard mock gets its own 64px breathing room Grid: 12-column, 20px gutter; bento 3x2 Container: 1200px max, 24px side padding (16px mobile) Radius: panels 24px, cards 16px, buttons 12px, chips 9999px Shadows: very soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04) on panels

Product UI as the hero image (built in HTML), small UI vignettes per feature, brand-colour icons in rounded squares, a subtle 32px square grid background; no stock photography.

Components

• floating top bar
• rating chip
• primary and outline buttons
• dashboard mock (sidebar, stat cards, bar chart, tracking card)
• eyebrow pill
• bento capability card
• agent card
• feature row with vignette
• integration connector card
• pricing card
• testimonial
• FAQ accordion

Interactions

• dashboard mock tilts slightly flat-to-3D on scroll (max 6deg), disabled under reduced motion
• stat numbers count up once when visible
• chart tabs switch data with a 200ms bar-height transition
• cards lift 2px with shadow on hover
• Features dropdown opens on click and keyboard, closes on Escape
• integration 'Connect' buttons show a tooltip explaining that connection happens after sign-up

Data

• Agent{id, name, category (dispatch|documents|chat|insights|inbox), blurb, icon}
• Integration{id, name, category, description, logoUrl}
• Plan{id, name, price, period, features[], trialDays}
• Stat{label, value, delta, direction (up|down)}
• EarlyAccessSignup{email, company, fleetSize (1-10|11-50|51-200|200+), createdAt}
• Post{slug, title, excerpt, cover, publishedAt}

Guardrails

Experience

• Keep the hero to one primary action ('Get early access'); demo booking lives in the top bar.
• The dashboard mock must use invented, plausible logistics data and no real addresses.
• Label up/down deltas with an arrow icon and a sign, not colour alone.
• Integration cards explain that connecting requires an account; don't fake OAuth flows.
• Every feature row pairs one sentence of benefit with one UI vignette, nothing more.

Accessibility

• Chart in the mock has an accessible summary and hidden data table.
• Stat deltas include text such as 'up 18% vs last month' for screen readers.
• Focus ring 2px #2f69ff with 2px offset on white and grey surfaces.
• Grid background is decorative and purely CSS; no text sits on low-contrast grid lines.
• Dropdown menu follows the Radix menu keyboard pattern (arrows, Escape, focus return).

Security

• Early-access endpoint validates with zod, rate-limits by IP and dedupes by email.
• Supabase table `early_access` has RLS: anon insert only, staff select.
• No tracking scripts before consent; analytics via a privacy-friendly hosted analytics service.
• Keep contact data minimal (email, company, fleet size).

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 **Ferrola**, a light, precise marketing site for AI agents that run the busywork of a trucking or delivery operation: auto-dispatching loads, messaging drivers, parsing paperwork and triaging the ops inbox. The page must show the product working (a convincing dashboard mock), explain the agent catalogue, list integrations, and capture early-access sign-ups.

### Stack
Next.js (App Router, static export) + TypeScript, Tailwind CSS, shadcn/ui (Radix) for DropdownMenu, Accordion, Tooltip and Sheet, lucide-react icons, Recharts for the mock bar chart, Motion for the tilt and count-up, react-hook-form + zod for the early-access form, Supabase for storing sign-ups.

### Pages & layout
1. **Home**: floating top bar → grid-background hero (rating chip, H1, lede, 'Get early access') → dashboard mock (sidebar with five nav items, search with ⌘K hint, date-range and export controls, four stat cards: loads, active drivers, auto-dispatch rate, documents processed; bar chart with Ship/Air/Delivery tabs; tracking card with map placeholder and a two-stop timeline) → trusted-by line → solutions bento (six capability cards) → agent catalogue → two alternating feature rows with vignettes (form-parsing card; scheduling timeline) → integrations grid → pricing (3 plans with a 14-day trial) → testimonials → FAQ → CTA → footer.
2. **Pricing**, **Blog index + post**, **About**, **Book a demo** (form).
3. Breakpoints: bento 3 cols ≥1024, 2 cols ≥640, 1 col below; dashboard mock scales to fit width and becomes horizontally scrollable under 640px with a 'Swipe to explore' hint.

### Design system
- Colors: `--bg: #f5f5f5`, `--surface: #ffffff`, `--ink: #3d3d3d`, `--muted: #646464`, `--primary: #2f69ff`, `--positive: #12883e`, `--negative: #dc2626`, `--highlight: #f5b800`, `--border: #8e8e8e`, `--hairline: #e5e5e5`.
- Fonts: Reddit Sans 500 for display (70/40px, tracking -0.03em) and H2 44px; Reddit Sans 500 for body 16px/1.6 and UI labels 14px; minimum 12px for chart axes.
- Spacing: 4px base; 96px section padding; 24px card padding; 20px grid gap.
- Radius: 24px panels, 16px cards, 12px buttons, full pills for chips.
- Shadows: `0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04)`.
- Background grid: 32px squares drawn with 1px `--hairline` lines at 50% opacity, masked to fade at edges.
- Motion: 200ms ease-out for hovers and tabs; count-up 800ms; tilt tied to scroll progress.

### Components & interactions
TopBar (floating white capsule, DropdownMenu for Features, Sheet on mobile), RatingChip, Button (primary blue, outline), DashboardMock (Sidebar, SearchInput, DateRange, StatCard ×4 with up/down deltas, BarChartCard with Tabs, TrackingCard), LogoRow, EyebrowPill, BentoCard, AgentCard, FeatureRow (copy + vignette, alternating sides), IntegrationCard (logo placeholder, name, description, 'Connect' button with Tooltip), PricingCard, TestimonialCard, FaqAccordion, CtaSection, Footer. Hover: cards lift 2px; buttons darken 8%.

### Data & state
Static typed data files: `agents.ts`, `integrations.ts`, `plans.ts`, `stats.ts`, `testimonials.ts`, plus MDX posts. Mock chart data is a fixed array of 12 months. The early-access form (email, company, fleet size) posts to a route handler that validates with zod and inserts into Supabase `early_access` (unique email). Form state lives in react-hook-form; success/error in component state.

### Accessibility
One H1. The dashboard mock is wrapped in a `figure` with a caption; its chart has an `aria-describedby` summary and a visually hidden table. Delta chips read as 'up 18 percent versus last month'. Tabs, dropdown and accordion use Radix semantics. Buttons have ≥44px hit areas on mobile. Motion respects reduced-motion.
Verified contrast: body text: #3d3d3d on #f5f5f5 = 9.96:1; muted text on white: #646464 on #ffffff = 5.92:1; primary button label: #ffffff on #2f69ff = 4.58:1; positive delta: #12883e on #ffffff = 4.55:1; negative delta: #dc2626 on #ffffff = 4.83:1; input border: #8e8e8e on #ffffff = 3.28:1; focus ring / chart bars: #2f69ff on #f5f5f5 = 4.2:1.

### Security
RLS on `early_access`: `insert` allowed for anon with a check that only email/company/fleet_size are set; `select` restricted to staff. Unique index on lower(email). Rate-limit 5 requests/min/IP at the route handler and add a honeypot. No secrets in client bundles; only the anon key is public.

### Performance & SEO
Render the dashboard mock as static HTML/CSS with Recharts loaded lazily when it enters the viewport. Use `next/image` for logos. Provide title, meta description, OG image and Organization/SoftwareApplication JSON-LD. Target CLS < 0.05 by reserving mock height.

### Guardrails
- All company names, addresses, order IDs and people in the mock are invented.
- Rating chip shows a placeholder score with no third-party review brand.
- Integration logos are neutral placeholder marks until real partnerships exist.
- Don't claim outcomes (percentages, savings) without a footnote source.

**Acceptance criteria**
- [ ] Hero, dashboard mock and bento render correctly at 390, 768 and 1440px
- [ ] Chart tabs switch data and remain keyboard operable
- [ ] Early-access form validates, dedupes and stores rows under RLS
- [ ] All deltas are understandable without colour
- [ ] No layout shift when the mock hydrates

Open the builderAll templatesThis palette on its own