Hopfield

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

The design's own pairing is kept: tall condensed Bebas Neue for scoreboard punch and soft geometric Urbanist for friendly body copy, a combination no other template uses.

• Bebas NeueHeadings: hero 88px uppercase, H2 64px, stat figures 96px, -0.02em
• UrbanistBody: body 16px/1.6 500, lead 22px, accordion titles 20px 600 uppercase, stat figures 300 at 96px

Patterns

• uppercase condensed display headline
• tagline chip above hero
• dual pill CTAs (lime solid, aqua solid)
• hero dashboard widget strip bleeding off both edges
• big-number stats row with dashed dividers
• icon-circle benefit trio
• accordion feature list beside tinted product card
• logo row between hairlines
• feature grid of four with icons beside a widget card
• revenue feature section
• testimonials
• closing CTA

States it is designed for

• Accordion item open/closed with synced preview
• Widget period select changed (loading shimmer 300ms then new sample)
• Reduced motion: widgets static, bars at value
• Trial sign-up: validation, submitting, success, duplicate email, error
• Mobile carousel with scroll-snap position indicators
• Chart with no data for a period shows an empty message

Who it is for

• Small and mid-size business owners
• Operations managers
• Marketing leads tracking acquisition sources
• Finance-minded founders

Layout

1. Top bar on navy: crescent-mark logo + wordmark with lime dot, centred links (Home, About, Pricing, Blog, Contact), outlined lime 'Start trial' pill; hamburger on mobile
2. Hero on navy: small dark tagline chip (uppercase), 88px condensed uppercase two-line headline, 22px paragraph, lime 'Get started' and aqua 'Try a demo' pills with diagonal arrows
3. Widget strip overlapping the navy/white boundary and bleeding off both sides: page-views card with stacked bars and source legend, lime 'new customers' tile, donut 'returning customers' tile, yearly revenue bar chart with callout chips
4. Light grey stats band: three huge numbers with unit suffixes and labels, dashed vertical dividers
5. Benefit trio: aqua icon circles with bold lead phrase + muted continuation
6. Split: condensed heading, paragraph, accordion (dashboard, collaboration, project management) left; lime-framed card with statistics line chart, pipeline rows and a split progress bar right
7. Logo row between two hairlines
8. Split: heading, paragraph, 2x2 icon features left; aqua-framed page-views widget right
9. Revenue section, testimonials, CTA band, footer
10. Breakpoints: headline 44px; pills full-width stacked; widget strip becomes a horizontal scroll-snap carousel; stats stack with horizontal dashed dividers

Palette

sporty, data-forward, fresh, confident. A scoreboard for your business with a pop of highlighter lime.

• navy hero / ink#0f2028
• page background#ffffff
• stats band#f7f7f7
• lime pill / tile / frame#edff71
• aqua pill / icon circle / frame#d0efef
• muted text on navy#a5acaf
• muted text on white#5b6569
• tagline chip on navy#25353c
• chart teal on white#53a1a1
• chart olive-lime on white#8f9b1e
• hairline / input border#7a8387

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

Bebas Neue 400, hero 88px/1.0 uppercase with -0.02em tracking, h2 64px uppercase, stat figures 96px

Body

Urbanist 500, 16px/1.6 body, 22px/1.5 lead; accordion titles 20px 600 uppercase with 0.05em tracking

Tall condensed uppercase headlines for punch, soft geometric sans body for friendliness. Stat figures can use Urbanist 300 at 96px (light weight only at large size).

Spacing and imagery

1000-1100px content width; 120px sections; widget cards 16-20px radius; tinted frames 24px radius with 32px padding; pills 100px radius, 48px tall; subtle dashed dividers in stats.

No photography; all proof is dashboard widgets: stacked pill bars, donuts, bar charts with callout chips, line charts, split progress bars. Icons are simple filled glyphs in aqua circles.

Components

• Tagline chip
• Condensed uppercase headline
• Lime and aqua pill buttons
• Widget strip (page views, KPI tile, donut tile, revenue chart)
• Stats band
• Icon-circle benefit
• Feature accordion
• Tinted product frame
• Logo row
• Icon feature grid
• Testimonial card
• CTA band

Interactions

• Widget strip slides in from both sides on load and parallaxes horizontally on scroll
• Bars and donuts animate to values once visible
• Accordion: one open at a time, product card on the right swaps to match the open item
• Pills: arrow rotates to horizontal on hover
• Period selects in widgets change sample data (client only)
• Logos brighten from grey on hover

Data

• Widget{type (bars|kpi|donut|revenue|line), title, period, series[{label, value}], legend[]}
• Stat{value, suffix, label}
• AccordionFeature{title, body, preview}
• Benefit{icon, lead, rest}
• Testimonial{quote, name, role, company}
• TrialSignup{email, company, created_at}

Guardrails

Experience

• Condensed uppercase only for headings and short labels; body stays sentence case
• Every chart has a title, period and legend; callout chips state the value
• Hero shows exactly two pills; lime is primary
• Accordion keeps at most four items; the preview always matches the open item
• Stats include what the number counts and are marked as sample

Accessibility

• Lime and aqua are fills behind navy text only; never text on white
• Chart data marks on white use deepened teal and olive-lime (3:1) plus navy
• Accordion uses Radix Accordion; preview panel has aria-live polite
• Widget strip carousel on mobile is keyboard scrollable with visible focus
• Uppercase labels tracked at least 0.05em
• Focus ring 2px navy on light, lime on navy

Security

• Trial form: zod validation both sides, unique email
• RLS on trial_signups: anon insert-only, sales role reads
• Rate limit and honeypot
• Widgets use static sample data; no analytics data from real users is displayed

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 the landing site for **Hopfield**, a business operations platform that turns traffic sources, customers and revenue into simple dashboards. The look is sporty and data-forward: deep navy hero, tall condensed uppercase headlines, electric lime and pale aqua pills and frames, and dashboard widgets as the only imagery. Primary action: start a free trial; secondary: try a demo.

### Stack
Next.js with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Accordion, Select, Sheet), lucide-react, Recharts for all widgets, Motion for the widget strip and reveals, react-hook-form + zod for sign-up, Supabase for trial sign-ups.

### Pages & layout
1. **Home**: navy top bar (crescent logo, links, outlined lime pill). Hero: uppercase tagline chip, 88px condensed two-line headline (fresh copy), 22px paragraph, lime "Get started" + aqua "Try a demo" with diagonal arrows. Widget strip overlapping the navy/white edge and bleeding off both sides: page views (stacked pill bars by source with legend and "add source"), lime KPI tile (percentage + period select), donut tile, yearly revenue bars with callout chips.
   Stats band on #f7f7f7: three giant figures with suffixes and labels, dashed dividers.
   Benefit trio with aqua icon circles.
   Split: heading, paragraph, accordion (Intuitive dashboard, Team collaboration, Project management) with a lime-framed preview that swaps per item.
   Logo row between hairlines. Split: heading, paragraph, 2x2 icon features; aqua-framed page-views widget.
   Revenue section, testimonials, CTA band, footer.
2. **Pricing**, **About**, **Blog**, **Contact**, **Demo** (interactive sample dashboard).
Mobile: 44px headline, stacked full-width pills, widget strip as a scroll-snap carousel.

### Design system
```
--navy: #0f2028; --bg: #ffffff; --band: #f7f7f7; --lime: #edff71; --aqua: #d0efef;
--muted-on-navy: #a5acaf; --muted: #5b6569; --chip: #25353c;
--chart-teal: #53a1a1; --chart-olive: #8f9b1e; --line: #7a8387;
```
Fonts: Bebas Neue 400 uppercase for display (88px hero, 64px h2, -0.02em); Urbanist 500 body 16px/1.6, lead 22px; accordion titles 20px 600 uppercase +0.05em; stat figures Urbanist 300 at 96px. Spacing 8px base, 120px sections, 1100px container. Radius: widgets 16-20px, frames 24px, pills 100px. No shadows; frames provide colour blocks. Motion: 600ms strip slide-in, 800ms chart grow, 250ms accordion.

### Components & interactions
TopBar (Sheet), TaglineChip, PillButton (lime | aqua | outline), WidgetStrip with PageViewsWidget, KpiTile, DonutTile, RevenueChart (callout chips, period Select with 300ms shimmer), StatsBand, BenefitItem, FeatureAccordion + SyncedPreview (aria-live polite), LogoRow, IconFeatureGrid, TestimonialCard, CtaBand, TrialForm.

### Data & state
Static JSON sample series per widget and period; `stats`, `benefits`, `features`, `testimonials`, `logos` (invented). Trial form writes `trial_signups(id, email unique, company, created_at)`. Client state: open accordion item, widget periods, carousel index, menu.

### Accessibility
Lime and aqua only as fills behind navy text. Chart marks on white use navy, deepened teal and olive-lime with legends and value labels; each chart has an sr-only table. Uppercase labels tracked. Carousel keyboard-scrollable. Reduced motion disables slide-in and chart growth. Focus ring navy on light, lime on navy.
Verified contrast: white headline on navy: #ffffff on #0f2028 = 16.7:1; muted paragraph on navy: #a5acaf on #0f2028 = 7.25:1; navy label on lime pill: #0f2028 on #edff71 = 15.22:1; navy label on aqua pill: #0f2028 on #d0efef = 13.74:1; navy figures on stats band: #0f2028 on #f7f7f7 = 15.59:1; muted text on white: #5b6569 on #ffffff = 5.98:1; white on tagline chip: #ffffff on #25353c = 12.7:1; teal chart marks on white: #53a1a1 on #ffffff = 3.01:1; olive-lime chart marks on white: #8f9b1e on #ffffff = 3.05:1; hairline / input border on white: #7a8387 on #ffffff = 3.87:1; lime focus ring on navy: #edff71 on #0f2028 = 15.22:1.

### Security
Zod validation both sides; RLS on `trial_signups`: enable, anon insert-only, select for `sales` role only. Rate limit and honeypot; confirmation via a transactional email service. Widgets show only static sample data.

### Performance & SEO
Static generation; lazy-load Recharts below the hero (hero widgets can be pre-rendered SVG). Self-host Bebas Neue and Urbanist. Metadata, OG image, SoftwareApplication JSON-LD. Lighthouse 90+ mobile.

### Guardrails
- All figures, logos and testimonials are invented and labelled as sample.
- Don't use condensed uppercase for paragraphs.
- Typed components, no `any`, data outside JSX.
- Acceptance criteria: (1) accordion and preview stay in sync by mouse and keyboard; (2) every chart readable without colour; (3) widget strip usable on touch at 390px; (4) trial form handles all states; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own