Hexledger

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

Comme is a geometric sans with genuinely heavy weights, so the 96px gradient headline has nightclub presence while the body stays simple on black.

• CommeHeadings: hero 96px 700 at -0.01em, H2 72px 700, H3 40px 700
• CommeBody: body 16px/1.6 500, labels 14px, eyebrow pills 13px uppercase +0.06em

Another design for the same product as Nightvault, so the gallery lists it there. A dark marketing site for a payments and business-finance startup.

Patterns

• dark canvas with blurred 3D blob shapes
• gradient-text headline keyword
• hero split into product dashboard mockup tile and photo tile with floating gauge card
• wordmark logo strip
• outlined pill section eyebrow
• bento feature grid with orbit globe and integration icon mesh
• wrapping feature chip cloud
• alternating image/text feature rows inside dark cards
• icon + title + one-liner benefit list
• big-number stats row
• closing CTA panel

States it is designed for

• Hero media loading: dark skeleton tiles at fixed aspect ratio
• Reduced motion: no blob drift, gauge shown at final value
• Mobile menu open with focus trap
• Pricing monthly/annual toggle selected state
• Contact form: validation errors, submitting, sent, failed
• Image load failure: tile keeps its dark background and alt text

Who it is for

• Founders of small online businesses
• Finance leads at early-stage startups
• Freelancers managing cards and payouts
• Operators comparing modern banking tools

Layout

1. Transparent top bar: squared-petal logo mark + wordmark, centered links (Home, Features, Pricing, About, Blog, Contact), gradient 'Get started' pill; hamburger under 810px
2. Hero: 96px bold headline across two lines with the first words in a red-coral gradient, 16px muted paragraph left and two pills right ('Learn more' outlined, 'Get started' gradient)
3. Hero media row: large dark tile with a tilted tablet showing a cards dashboard (left 60%) + photo tile of a person at a laptop with a floating white 'earnings' gauge card (right 40%)
4. Greyscale wordmark strip of four invented logos
5. Visual info panel: eyebrow pill, centered 3-line heading, paragraph, outlined pill; right a white amount card with slider and stacked-card shadow
6. Two-up bento: left glowing globe with app icon and capability chips; right mesh of circular integration icons; each with eyebrow, heading, text
7. Centered chip cloud of five feature chips with sparkle icons
8. Features: eyebrow + centered heading, then three dark cards alternating copy/photo, each with two icon benefits and a 'Learn more' pill
9. Three-step setup, stats row (percent, speed multiple, percent), testimonials, pricing, CTA panel, footer
10. Breakpoints: hero media stacks, headline drops to 48px, bento and feature rows single-column, chips wrap centered

Palette

bold, nocturnal, energetic, premium. Finance with a nightclub glow: black space, one hot gradient, bright white data cards.

• page background#000000
• card / panel#0d0d0d
• raised chip#141414
• heading text#f1f1ef
• muted body#9b9b9b
• gradient start / accent text on dark#ff254e
• gradient end coral#ff8a6b
• button fill start (white label)#ec002c
• button fill end (white label)#c8154f
• hairline / chip border#5f5f5f
• white data card#ffffff
• positive figure on white card#1a7f3c

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

Comme 700, hero 96px/1.05 with -0.01em tracking, h2 72px, h3 40px

Body

Comme 500, 16px/1.6 muted grey; labels 14px

Heavy geometric sans throughout. The gradient is applied only to the first headline phrase; eyebrow pills are 13px uppercase with 0.06em tracking in accent red.

Spacing and imagery

Wide 1200px container, 16-20px gaps between bento tiles, 48px internal padding in feature cards, radius 20-24px on cards, full pills on buttons and chips; no drop shadows, depth from black vs near-black and glow.

Soft black 3D blob shapes in the background, lifestyle photos of people at laptops overlaid with white UI cards, rounded gradient app-icon tiles, dotted globe with red rim glow, circular dark integration icons.

Components

• Gradient headline span
• Outlined and gradient pill buttons
• Tablet dashboard mockup (sidebar, card tabs, virtual card tiles)
• Photo tile with floating gauge card
• Logo strip
• Eyebrow pill
• Amount card with slider
• Globe glow tile with capability chips
• Integration icon mesh
• Feature chip cloud
• Alternating feature card with icon benefits
• Stats row
• CTA panel

Interactions

• Headline words fade and rise in sequence on load
• Background blobs drift slowly on scroll (parallax 0.1), static under reduced motion
• Gauge needle and slider thumb animate to value when visible
• Integration icons pulse subtly on hover with a tooltip naming the category
• Chips brighten border on hover
• Feature cards reveal on scroll with 300ms fade
• Gradient pill shifts gradient angle on hover; outlined pill fills #141414

Data

• Feature{title, body, image, image_alt, benefits[{icon, title, text}], side (left|right)}
• Integration{name, category, icon}
• Capability{label, icon}
• Stat{value, suffix, label}
• Plan{name, price_monthly, price_yearly, features[], highlighted}
• ContactMessage{name, email, company, message, created_at}

Guardrails

Experience

• Use the gradient only on the hero keyword and the primary pill; everything else is monochrome
• Every data card shows a label, a figure and a unit; no unexplained numbers
• Place the primary CTA on the right of the hero paragraph and repeat it in the final panel only
• Feature rows alternate image side but keep copy width under 460px
• Integration icons must have visible names on focus/hover and a text list fallback

Accessibility

• White button labels sit on the darkened #ec002c to #c8154f gradient, never on the lighter coral
• Gradient headline text keeps a solid #ff254e fallback for forced-colours mode
• Photos with UI overlays: the overlay card carries its own text; photo alt describes the scene
• Blob parallax and gauge animation disabled under prefers-reduced-motion
• Focus ring: 2px #ff254e outline with 2px offset, visible on black
• Minimum body size 16px; muted grey #9b9b9b only on #0d0d0d or darker

Security

• Contact form validated with zod on client and server; strip HTML
• RLS on contact_messages: insert-only for anon, select only for an admin role
• Rate-limit form posts and add a honeypot
• Make clear no financial data is collected on the marketing site; no card fields anywhere

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 marketing site for **Hexledger**, a finance platform for small online businesses (virtual cards, payments, spend insight). The look is black and dramatic with one hot red-to-coral gradient and bright white data cards. Visitors should grasp the product from the hero mockups, trust it through clear figures, and reach "Get started" confidently.

### Stack
Next.js with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Sheet, Tabs, Accordion, Tooltip), lucide-react, Motion for reveals, parallax and gauges, react-hook-form + zod for the contact form, Supabase for storing contact messages.

### Pages & layout
1. **Home**: transparent top bar (petal logo mark, centered links, gradient pill). Hero headline 96px bold on two lines, the opening phrase in a red-coral gradient; muted paragraph left, "Learn more" outlined pill and "Get started" gradient pill right. Media row: a dark tile with a tilted tablet showing a card-management dashboard (sidebar, All/Virtual/Physical tabs, two virtual card tiles with invented balances) and a photo tile with a floating white earnings gauge card. Greyscale strip of four invented wordmarks.
   Visual info panel: eyebrow pill, centered heading, paragraph, outlined pill; right, a white amount card with a slider and stacked card edges below.
   Bento pair: globe-glow tile with app icon and capability chips; integration mesh of circular icons. Chip cloud of five features.
   Features: eyebrow + heading, three dark cards alternating copy and photo, each with two icon benefits and a pill.
   Setup in three steps, stats row, testimonials, pricing with monthly/annual toggle, CTA panel, footer.
2. **Pricing**, **About**, **Blog** index/post, **Contact** (form).
Mobile: headline 48px, media and bento stack, feature cards put the image first.

### Design system
```
--bg: #000000; --panel: #0d0d0d; --chip: #141414; --text: #f1f1ef; --muted: #9b9b9b;
--grad-start: #ff254e; --grad-end: #ff8a6b; --btn-start: #ec002c; --btn-end: #c8154f;
--line: #5f5f5f; --data-card: #ffffff; --positive: #1a7f3c;
```
Font: Comme. Hero 96px/1.05 700 (-0.01em), h2 72px 700, h3 40px 700, body 16px/1.6 500, eyebrows 13px uppercase +0.06em. Spacing 8px base, 1200px container, 16-20px bento gaps, 48px card padding, 120px sections. Radius 24px cards, 16px data cards, full pills. No shadows; glow via radial gradients at 20% opacity. Motion 300-500ms ease-out, parallax factor 0.1.

### Components & interactions
TopBar (Sheet on mobile), GradientHeadline (background-clip text, solid fallback), PillButton (gradient | outline), HeroMediaRow (TabletMock, PhotoWithCard + GaugeCard animating to value), LogoStrip, EyebrowPill, AmountCard (slider animates to position), GlobeTile with CapabilityChips, IntegrationMesh (Tooltip names, plus visually hidden list), ChipCloud, FeatureRow (alternating), StatsRow (count-up once), PricingToggle (Radix Tabs), CtaPanel, ContactForm.

### Data & state
Content JSON: `features`, `integrations` (invented names by category), `capabilities`, `stats`, `plans`, `testimonials` (clearly fictional). Contact form writes `contact_messages(id, name, email, company, message, created_at)`. Client state: menu open, billing period, animation-in-view flags.

### Accessibility
Button labels are white only on the darkened gradient; gradient text has a solid colour fallback and passes on black. All photos have alt text; UI overlay cards are real text, not baked into images. Reduced motion removes parallax, count-ups and gauge sweeps. Tooltips are also reachable by keyboard; the integration list exists as text. 2px red focus ring with offset.
Verified contrast: heading text on page: #f1f1ef on #000000 = 18.57:1; muted body on card: #9b9b9b on #0d0d0d = 6.99:1; accent eyebrow text on card: #ff254e on #0d0d0d = 5.21:1; white label on button start: #ffffff on #ec002c = 4.56:1; white label on button end: #ffffff on #c8154f = 5.71:1; chip border on card: #5f5f5f on #0d0d0d = 3.04:1; focus ring on page: #ff254e on #000000 = 5.63:1; positive figure on white data card: #1a7f3c on #ffffff = 5.07:1; red slider fill on white data card: #ec002c on #ffffff = 4.56:1.

### Security
Zod validation client and server; max lengths on every field; sanitise message text. RLS on `contact_messages`: enable, anon insert only, select/update/delete only for an `admin` role checked via a claims function. IP rate limit, honeypot, and notification through a transactional email service. No payment or card inputs anywhere on the site.

### Performance & SEO
Static generation, hero photo and tablet mock as responsive AVIF with fixed aspect ratios; blobs as lightweight blurred SVG or CSS gradients, not video. Self-host Comme. Per-page metadata, OG images, Organization and FAQPage JSON-LD. Lighthouse 90+ mobile; keep total JS under 120 KB on Home.

### Guardrails
- All brand marks, balances, people and testimonials are invented; balances are clearly sample figures.
- Do not state regulatory status or guarantees; keep claims generic.
- Gradient used sparingly; never white text on the light end of it.
- Typed components, no `any`, content outside JSX.
- Acceptance criteria: (1) hero readable at 390px with no overflow; (2) all animations stop under reduced motion; (3) contact form handles invalid, submitting, sent and failed; (4) integration names reachable without hover; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own