Nightvault

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

Inter Tight's medium weight is the sleek funded-fintech voice this nocturnal page is built on, and it stays in only a few templates.

• Inter TightHeadings: hero 70px 500 at -2%, section heads 48px
• Inter TightBody: body 16px, grey secondary

Who it is for

• Fintech founders pre-launch
• Payments and neobank startups
• Agencies pitching fintech clients
• Solo founders validating finance ideas

Layout

1. Header: asterisk logo + wordmark left, Pages dropdown / Feature / About / Pricing / Blogs center, neumorphic light pill 'Get Started' right
2. Hero: purple-pink spotlight glow, large two-line headline, subline, pill email input with inset 'Send Code' button, 3D-perspective grid floor with glassy payment cards
3. 'Bank complete confidence' section with repeated feature rows (text left, rounded photo right) inside a large dark rounded container
4. Payment features: send/receive, organize, cards with low deposit
5. Pricing: Starter and Professional tiers
6. Testimonial carousel, infinite partner logo marquee
7. FAQ accordion, 'Apply in under 10 minutes' CTA with Lottie animation, newsletter footer
8. Other pages: about, integrations directory, blog list/post, early access, contact, admin CMS

Palette

Sleek, premium, nocturnal, trustworthy, futuristic. A night-mode banking app with neon spotlighting.

• background#0e0e0e
• text#ffffff
• primary (coral)#ff8975
• card#141414
• secondary surface#1f1f1f
• border#2c2c2c
• hero glow violet#b58be0

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

Inter Tight 500, 70px hero with -2% tracking, 48px section heads

Body

Inter Tight 16px, gray secondary copy

A single tight grotesk in medium weight keeps the brand sleek and modern like a funded fintech.

Spacing and imagery

Wide cinematic sections, ~1060px inner container inside large 32px-radius dark panels, pill buttons, 12px image radius.

Glassy credit card renders on a perspective grid, warm lifestyle photos of people managing money, Lottie character animations, partner logos.

Components

• Mega/dropdown nav
• Neumorphic pill button
• Hero email capture with inline button
• Glass card visuals on grid floor
• Feature row with photo
• Benefit cards
• Pricing tier cards
• Testimonial carousel
• Infinite logo marquee
• FAQ accordion
• Integrations directory with filters
• Blog list and post
• Tiptap rich-text editor
• Contact form

Interactions

• Scroll-triggered reveals
• Hover glow on pill buttons
• Testimonial carousel autoplay
• Logo marquee
• Accordion FAQ
• Integrations search/filter
• Admin login with roles
• Rich text editing and publishing
• Form validation with toasts

Data

• Post{id, slug, title, excerpt, content_json, cover_url, author_id, status, published_at}
• Integration{slug, name, category, logo, description}
• Plan{name, price, interval, features[]}
• Testimonial{name, role, quote, avatar}
• Lead{email, name, message, source}
• Profile{id, role(admin/editor)}

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 a template'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 templates)
- 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.

### Goal
Build **Nightvault**, a dark-themed marketing website for a fictional payments and business-banking startup. Visitors are founders and finance leads comparing providers; they should see a premium product, understand features and pricing, trust the company and leave an email. The team needs a small CMS to publish blog posts and manage integrations.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (NavigationMenu, Accordion, Card, Tabs, Dialog, Form, Toast), lucide-react, Framer Motion for reveals, lottie-react for two illustrative animations, Embla Carousel for testimonials, Tiptap for the blog editor, react-hook-form + zod, TanStack Query, React Router for 10+ pages. **Supabase**: Postgres (`posts`, `integrations`, `leads`, `profiles`, `user_roles`), Auth for admins/editors, Storage for blog covers, Edge Function for lead capture.

### Pages & layout
1. **Home** – header: icon + wordmark, a Pages dropdown and four links, light neumorphic pill "Get started". Hero: violet-to-coral spotlight glow from the top, big two-line headline, subline, pill email field with an inset light button, and below it a perspective grid floor with two or three glassy card renders. "Bank with confidence" block inside a large rounded dark panel with alternating feature rows (headline, copy, Learn more, rounded photo). Payments features (three cards). Pricing preview (Starter, Professional). Testimonial carousel. Partner logo marquee. FAQ. "Apply in minutes" CTA with a Lottie character. Newsletter footer.
2. **Features**, **About**, **Pricing** (monthly/annual toggle, comparison table), **Integrations** (search, category filter, detail), **Blog** (list, post), **Early access**, **Contact**, 404.
3. **Admin** – posts list, Tiptap editor with cover upload, draft/publish, integrations CRUD.

### Design system
- Tokens (RGB triplets for alpha): `--background: 14 14 14`, `--foreground: 255 255 255`, `--primary: 255 137 117` (coral), `--primary-foreground: 13 13 13`, `--card: 20 20 20`, `--secondary: 31 31 31`, `--border: 44 44 44` (decorative), `--input-border: 114 114 114`, `--accent: 96 97 101`, `--radius: 0.75rem`; glow `radial-gradient(60% 40% at 50% 0%, rgb(181 139 224 / .45), transparent)`.
- Font: Inter Tight 400/500/600. Scale: 14 / 16 / 18 / 24 / 32 / 48 / 70, display tracking -0.02em.
- Spacing: 8px base; section panels 32px radius with 64px padding; sections 120px apart.
- Neumorphic pill: light gray gradient fill, inner highlight, soft outer shadow.
- Motion: reveals 600ms; marquee 30s; carousel autoplay 6s with pause; button glow 200ms.

### Components & interactions
Nav dropdown (keyboard), pill button (default/hover glow/focus/loading), email capture (invalid, submitting, success toast, duplicate), feature row, pricing card (highlighted, toggle), comparison table, testimonial carousel (pause, arrows, dots), marquee (pausable), accordion, integration card and filter (empty state), blog card, editor (toolbar, autosave indicator, publish confirmation, validation for title/slug), contact form, protected routes (redirect when unauthenticated, 403 for wrong role).

### Data & state
`posts(id,slug unique,title,excerpt,content jsonb,cover_path,author_id,status,published_at)`, `integrations(slug,name,category,logo_path,description)`, `leads(id,email,name,message,source,created_at)`, `user_roles(user_id,role)`. Public content through TanStack Query; editor state local with autosave. Seed 6 fictional posts, 20 invented integrations with generated logos, and sample testimonials labeled as examples.

### Accessibility
Coral `#ff8975` on near-black is 8.35:1; coral buttons use `#0d0d0d` text (8.4:1). The light pill button uses `#0d0d0d` on its `#e5e5e5` base (15.4:1). Gray body copy is at least `#a1a1a1`. White text over the violet glow stays above 8:1 (glow peak `#59466c`). The `96 97 101` accent is never used for text; inputs use `--input-border: #727272`. Carousel and marquee pausable, stopped under reduced motion; Lottie animations respect reduced motion and are `aria-hidden`. Comparison table uses proper headers. Editor toolbar buttons have labels and keyboard shortcuts.
Verified contrast: body text on near-black #ffffff on #0e0e0e = 19.3:1; coral text on near-black #ff8975 on #0e0e0e = 8.35:1; dark label on coral button #0d0d0d on #ff8975 = 8.41:1; dark label on light pill button #0d0d0d on #e5e5e5 = 15.43:1; gray body copy on near-black #a1a1a1 on #0e0e0e = 7.47:1.

### Security
RLS: public select on `posts` where `status='published'` and on `integrations`; writes only for `admin`/`editor` via `has_role`. `leads` insert via Edge Function only (zod, honeypot, rate limit), no public select. Sanitize Tiptap HTML output with DOMPurify before rendering. Storage uploads limited to images under 5 MB in an editor-only bucket. Never collect card or bank details on the marketing site; application links go to a separate secure flow. Only the anon key in the client.

### Performance & SEO
Pre-render marketing pages; lazy-load Lottie and Tiptap (admin only). Optimize card renders as WebP with fixed sizes. Article JSON-LD for posts, Organization schema, OG images, sitemap. Lighthouse 90+ on home.

### Guardrails
- Fictional fintech brand, partners and figures; no real bank or card-network logos or trademarks.
- Don't imply regulated status (licenses, insurance) that doesn't exist; include placeholder disclaimers.
- Minimal PII; no financial data collected.
- Small typed components, no `any`, visible errors.
- Done when: all marketing routes render; email capture stores a lead once; admins can draft, publish and see posts appear; integrations filter works; RLS blocks non-admin writes; carousel and marquee are pausable.

Open the builderAll templatesThis palette on its own