Gravelight

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 named pixel display face and Geist Mono are kept: together they give the retro mission-control console its dot-matrix headings and all-monospace text.

• Pixelify SansHeadings: hero 41px, H2 40px, weight 400
• Geist MonoBody: body 16px/1.6, labels 12px uppercase +0.06em, figures 28px

Patterns

• framed centre column with dot-matrix side gutters
• pixel-style display headline with yellow highlighted phrase
• square-cornered highlighter-yellow CTA plus dark ghost CTA
• agent network node diagram
• bracketed corner-mark cards
• dotted separator bars between sections
• metrics strip with slash-prefixed mono labels
• input-processing-output pipeline diagram
• 3x2 capability grid with schematic mini-visualisations
• numbered four-step grid with pixel numerals
• industry case studies with key metric rows
• three-tier pricing
• integration wall
• closing CTA

States it is designed for

• Reduced motion: no pulses, typing or draws; final values shown
• Trial sign-up: validation, submitting, workspace-ready message, error
• Demo scheduling form: slot selected, confirmed, failed
• Pricing monthly/annual
• Menu open with focus trap
• Very long metric labels wrap within cells

Who it is for

• Revenue operations leaders
• Heads of customer success
• Operations and automation engineers
• Founders exploring AI agents

Layout

1. Page body: 800px framed column with 1px borders; left and right gutters filled with a faint dot-matrix pattern
2. Top bar inside the frame: square pixel logo + uppercase wordmark, hamburger (desktop menu with vertical-stacked letter labels is optional; use normal horizontal links)
3. Hero split: left 41px pixel-style headline with the second half in yellow, slash-prefixed mono paragraph, yellow 'Start free trial' and dark 'Schedule demo' square buttons, a thin bracketed strip of three perks with pixel glyph icons; right, agent network diagram (central node, labelled agent nodes, faint connectors)
4. Dotted separator; metrics strip: muted label cell then four big mono figures with slash-prefixed uppercase labels
5. Bracketed panel: input → processing → output schematic left; heading with yellow second line, uppercase mono paragraph, three pixel-icon metrics right
6. Capability grid 3x2 of bracketed cards, each with a schematic visual (growth line, lead funnel, support hub, data streams, workflow nodes, forecast line), title and text
7. Launch section: heading with yellow number, mono paragraph, yellow CTA, giant dotted numeral in the background; 2x2 numbered step grid
8. Industry case studies (three cards with monitoring visuals and key-metric rows), logos, pricing (three tiers), integration wall, final CTA, footer
9. Breakpoints: frame goes full-width with 16px gutters and dot pattern hidden; hero diagram moves below copy; grids one column; metrics 2x2

Palette

engineered, nocturnal, precise, a little retro. A mission-control console where one highlighter colour marks what matters.

• page background#080809
• card / panel#141415
• heading text#ffffff
• muted mono text#9f9f9f
• secondary light text#cccccc
• highlighter yellow (accent, CTA)#feff7c
• dark ghost button#1b1b0f
• frame lines / dotted separators / brackets#646442
• status green (live dot)#22c55e

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

Pixelify Sans 400 (similar to the observed pixel display face) or Geist Mono 400 as fallback; hero 41px/1.25, h2 40px, figures 28px

Body

Geist Mono 400, 16px/1.6 (observed 11px raised); labels 12px uppercase with 0.06em tracking

Everything outside headings is monospace. Uppercase mono is used for short labels and one-line descriptors only; longer paragraphs stay sentence case.

Spacing and imagery

Tight grid: 800px framed column, 1px borders, 24-32px card padding; 96px section spacing with dotted separator bars; 0px radius everywhere; bracket corner marks 8px long.

No photos. Schematic line diagrams, node networks, pixel glyph icons, dot-matrix textures and giant dotted numerals, all in white, grey and yellow on black.

Components

• Framed column with dot-matrix gutters
• Pixel headline with highlight span
• Square yellow and ghost buttons
• Perk strip
• Agent network diagram
• Dotted separator
• Metrics strip
• Pipeline schematic
• Bracketed capability card
• Numbered step grid
• Case study card with metric rows
• Pricing tier
• Integration wall

Interactions

• Network diagram pulses along connectors every few seconds
• Figures type on character by character when in view
• Capability visuals animate once (line draws, funnel fills, streams tick)
• Buttons invert on hover (yellow to dark, dark to yellow outline)
• Bracket corners extend 4px on card hover
• Hamburger opens a full-height mono menu

Data

• Metric{value, label}
• Capability{title, body, visual (growth|funnel|hub|streams|workflow|forecast)}
• Step{number, title, body}
• CaseStudy{industry, summary, visual, metrics[{value, label}]}
• Plan{name, price_monthly, agents_included, features[], cta}
• Integration{name, category}
• TrialSignup{work_email, company, use_case, created_at}

Guardrails

Experience

• Yellow is used only for the primary CTA and one highlighted phrase per heading
• Uppercase mono limited to labels and one-line descriptors
• Every figure has a slash-prefixed label explaining it and is marked illustrative
• Schematics must remain legible at mobile width (simplify, don't shrink)
• Use normal horizontal nav labels; never stack letters vertically

Accessibility

• Body copy at 16px even though the look is mono and dense
• Frame lines and brackets use #646442 to reach 3:1 on black
• Schematics are aria-hidden with a text summary; figures are real text
• Typing animation renders the full string for assistive tech immediately
• All motion disabled under prefers-reduced-motion
• Focus ring 2px yellow with 2px offset

Security

• Trial and demo forms validated with zod both sides; use_case is an enum
• RLS on trial_signups and demo_requests: anon insert-only, sales role reads
• Rate limit and honeypot
• Do not claim specific security certifications without evidence

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 **Gravelight**, a platform for deploying autonomous AI agents across revenue operations, lead handling, customer success and data work. The look is a mission-control console: near-black framed column, dot-matrix gutters, pixel-style headlines, monospace everything else, and one highlighter yellow. It must feel engineered and trustworthy and convert to a free trial or a demo.

### Stack
Next.js with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Sheet, Tabs, Accordion), lucide-react (sparingly; most icons are custom pixel glyphs), Motion for pulses, typing and schematic draws, react-hook-form + zod for forms, Supabase for sign-ups and demo requests.

### Pages & layout
1. **Home**: 800px framed column with 1px lines; dot-matrix gutters. Top bar: pixel logo + uppercase wordmark, horizontal links, menu Sheet on mobile.
   Hero split: pixel headline with the second phrase in yellow, slash-prefixed mono paragraph, yellow "Start free trial" + dark "Schedule demo", bracketed perk strip (No code, Live in minutes, 14-day trial); agent network diagram right.
   Dotted separator, metrics strip (label cell + four figures with slash labels).
   Bracketed pipeline panel (Input: CRM, Users, Market → Processing → Output insights bars) with heading, mono paragraph and three metrics.
   Capability grid 3x2 with schematic visuals.
   Launch section with giant dotted numeral and a 2x2 numbered step grid.
   Three industry case cards, logos, pricing (three tiers), integration wall, final CTA, footer.
2. **Pricing**, **Integrations**, **Case studies**, **Book a demo**.
Mobile: full-width frame, gutters hidden, diagram under copy, grids stack, metrics 2x2.

### Design system
```
--bg: #080809; --card: #141415; --text: #ffffff; --muted: #9f9f9f; --text-2: #cccccc;
--yellow: #feff7c; --ghost: #1b1b0f; --line: #646442; --live: #22c55e;
```
Fonts: Pixelify Sans 400 (similar to the observed pixel display face) for headings 41/40px, Geist Mono 400 for body 16px/1.6 and labels 12px uppercase +0.06em; figures Geist Mono 28px. Spacing 8px base, 96px sections, 800px column, 24-32px card padding. Radius 0 everywhere. No shadows. Brackets: 8px corner strokes in `--line`. Motion: 3s connector pulse, 30ms per character typing, 900ms schematic draw.

### Components & interactions
FramedLayout (DotGutter SVG pattern), TopBar + Sheet, PixelHeadline (highlight span), SquareButton (yellow | ghost, invert on hover), PerkStrip, AgentNetwork (SVG, pulse), DottedSeparator, MetricsStrip (type-on), PipelineSchematic, CapabilityCard (Bracket frame + visual variants), StepGrid, CaseStudyCard, PricingTiers, IntegrationWall, TrialForm, DemoForm.

### Data & state
Content JSON: `metrics`, `capabilities`, `steps`, `caseStudies` (generic industries), `plans`, `integrations` (generic categories), all invented and labelled illustrative. Forms write `trial_signups(id, work_email, company, use_case, created_at)` and `demo_requests(id, name, work_email, preferred_slot, created_at)`. Client state: menu, billing period, form status.

### Accessibility
Body 16px despite the dense look; uppercase only for short labels. Frame and bracket lines deepened to 3:1. Schematics aria-hidden with summaries; numbers are text. Typing effect exposes full text immediately (aria-label) and is skipped under reduced motion along with pulses and draws. Yellow 2px focus ring.
Verified contrast: white heading on page: #ffffff on #080809 = 20.02:1; muted mono text on page: #9f9f9f on #080809 = 7.56:1; muted mono text on card: #9f9f9f on #141415 = 6.96:1; yellow highlight on page: #feff7c on #080809 = 18.88:1; dark label on yellow button: #080809 on #feff7c = 18.88:1; yellow label on ghost button: #feff7c on #1b1b0f = 16.37:1; secondary text on card: #cccccc on #141415 = 11.46:1; frame lines and brackets on page: #646442 on #080809 = 3.28:1; live status dot on card: #22c55e on #141415 = 8.08:1.

### Security
Zod validation both sides with enums and length limits. RLS on `trial_signups` and `demo_requests`: enable, anon insert-only, select for a `sales` role. Rate limit and honeypot; confirmations via a transactional email service. Avoid unverified compliance claims.

### Performance & SEO
Static generation; all visuals as inline SVG; dot gutters as a CSS background pattern. Self-host fonts with swap. Metadata, OG image, SoftwareApplication JSON-LD. Lighthouse 95+.

### Guardrails
- All metrics, case studies, customers and integrations are invented and marked illustrative.
- One accent colour only; no gradients.
- Typed components, no `any`, content in JSON.
- Acceptance criteria: (1) layout holds at 390px with no horizontal scroll; (2) all animations stop under reduced motion; (3) forms handle all states; (4) keyboard reaches every CTA with a visible yellow ring; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own