Nerve

Live preview ->

Nerve is a complete website system for AI, automation, and operational technology businesses that need to look intelligent without relying on the familiar blue-purple SaaS gradient. Its strict four-column grid, oversized editorial typography, alternating near-black and warm-white sections, monochrome photography, restrained red signals, and deliberate motion give the site a precise visual identity.

The demo is written as an intelligent automation company, but the same structure works for AI agent products, workflow software, automation consultancies, operations studios, enterprise technology, data platforms, systems integrators, productized services, and internal transformation programs.

Property	Value
Tier	Pro ($49 launch / $59 reg.)
Category	AI / Automation / B2B
Body font	Inter Variable
Label font	Geist Mono Variable
Palette	Near-black, warm white, and a muted red signal
Photography	Centralized Unsplash URLs, grayscale-ready
Configuration	Shared interface content lives in src/config/site.ts

Included routes

• / - 14-section homepage with hero, positioning, solutions, workflow simulator, use cases, capabilities, human control, case studies, ROI calculator, pricing, testimonials, insights, FAQ, and closing CTA
• /about/ - company positioning and operating beliefs
• /solutions/ - solutions overview and delivery process
• /case-studies/ and /case-studies/[slug]/ - case-study index and Markdown detail pages
• /insights/ and /insights/[slug]/ - insight index and Markdown article pages
• /contact/ - configurable contact form
• /waitlist/ - focused waitlist form
• /sections/ - reusable section and interface overview
• /legal/privacy-policy/, /legal/terms-and-conditions/, and /404
• Generated sitemap and robots output

What makes Nerve different

• Operational proof, not decorative mockups - the workflow simulator, department navigator, human-control board, and ROI calculator let visitors see how work moves, where people stay in control, and what the operational impact could be.
• Built for more than one revenue model - the pricing ledger works for fixed projects, recurring automation programs, subscriptions, retainers, and custom enterprise work.
• A recognizable AI aesthetic without the usual AI gradient - a strict grid, sharp controls, monochrome imagery, editorial type, and a single muted-red signal create the personality.
• Content stays centralized - navigation, shared copy, workflow scenarios, use cases, policies, ROI values, prices, images, forms, page metadata, legal templates, and SEO live in src/config/site.ts.
• Long-form content stays author-friendly - case studies and insight articles are Markdown files backed by Astro Content Collections.
• Motion has a purpose - marquees, workflow progress, synchronized image replacement, scroll-linked text, reveals, count-up metrics, and parallax communicate activity while respecting prefers-reduced-motion.

Nerve-specific setup

Change the identity and production URL

Start in src/config/site.ts:

name: "Nerve",
legalName: "Nerve Systems, Inc.",
tagline: "Intelligence in motion.",
url: "https://nerve-theme.pages.dev",
email: "hello@example.com",
privacyEmail: "privacy@example.com",
legalEmail: "legal@example.com",

Replace the production URL before deploying on your own domain. The same identity block controls contact details, locale, language, favicon, and the default theme color.

Header navigation, footer navigation, CTA destinations, accessibility labels, and social/contact links are also in site.ts.

Reposition the theme for another use case

The demo copy describes an intelligent operating layer. To adapt it for another category, edit these blocks before touching components:

• hero - primary positioning, CTA labels, rotating workflow signals, and partner marks
• about - the wide positioning statement and supporting copy
• solutions - service or product pillars and their synchronized images
• capabilities - capability cards and grayscale images
• caseStudiesSection, testimonials, insightsSection, faqSection, and pageCta
• pages - standalone-page metadata, hero copy, and delivery-process content

Good alternate fits include an AI product, automation consultancy, B2B SaaS platform, enterprise technology company, data product, systems integrator, and productized operations service.

Configure the live workflow simulator

The simulator reads from workflowSimulator:

workflowSimulator: {
  scenarioLabel: "Scenario",
  liveLabel: "Processing live",
  scenarios: [
    {
      label: "Revenue",
      title: "Qualify and route an enterprise lead",
      input: "New opportunity / $84,000 ARR",
      output: "Qualified lead assigned in 18 seconds",
      steps: [
        { label: "Trigger received", meta: "CRM opportunity created" },
        // ...
      ],
    },
  ],
},

Add, remove, or rewrite scenarios and steps in this array. The tab labels, input/output labels, progress status, and section introduction live in the same object.

Configure department use cases

useCases.items controls each navigator tab. Every item includes:

• department label
• Unsplash image and alt text
• headline and supporting copy
• example workflows
• two outcome metrics

The first item is selected by default. Clicking or using the arrow keys replaces the image, copy, workflows, and metrics together.

Configure human control and governance

The humanControl block controls:

• decision headline and supporting copy
• confidence and approval thresholds
• policy labels and values
• approve and escalate button labels
• status messages shown after each action
• audit-trace actors, timestamps, actions, and statuses

This section is a front-end demonstration. Connect the buttons to your application or form endpoint if you want them to trigger real workflow actions.

Adjust the ROI calculator

The calculator reads its range controls and assumptions from roiCalculator:

roiCalculator: {
  currency: "USD",
  controls: {
    teamSize: { min: 5, max: 250, step: 5, value: 40 },
    hours: { min: 1, max: 20, step: 1, value: 6 },
    hourlyRate: { min: 20, max: 200, step: 5, value: 55 },
  },
  assumptions: {
    automationRate: 0.68,
    weeksPerMonth: 4.33,
    monthsPerYear: 12,
  },
},

Update the ranges, defaults, labels, currency, and assumptions for your audience. The browser calculates recovered hours, monthly value, and annual value without a third-party library.

Configure pricing for software or services

pricing.plans supports different commercial models in the same horizontal ledger:

• one-time fixed-scope launches
• monthly subscriptions or retainers
• custom enterprise programs

Each plan has a name, eyebrow, price, cadence, description, feature list, CTA label, CTA destination, and optional featured state. Replace the commercial model without changing the component.

Change the palette, typography, and grid

Core visual tokens live under :root in src/styles/global.css:

• --ink and --paper - primary dark and light environments
• --line-dark and --line-light - grid and divider colors
• --signal and --signal-bright - operational accent colors
• --frame - shared content-frame width
• --ease - primary motion curve

Inter Variable is used for display and body copy. Geist Mono Variable handles labels, metadata, counters, and operational details. Both are self-hosted through Fontsource packages.

Replace the photography

Shared image URLs live in src/config/site.ts, including the hero, capability cards, use cases, testimonials, article cards, and closing CTA. The unsplash() helper keeps dimensions and quality parameters consistent.

Case-study and insight cover images live in the Markdown frontmatter under:

• src/content/case-studies/
• src/content/insights/

Replace the Unsplash URLs with local /public files or your own image host before launching a customer site.

Connect the forms

Nerve ships in local demo mode:

forms: {
  provider: "demo",
  contactAction: "#",
  waitlistAction: "#",
}

Set the two action URLs to your form provider or backend endpoint. Both forms submit standard fields by POST; the README included with Nerve documents the field names and demo confirmation behavior.

What’s next

• Configure -> site.ts - identity, navigation, section content, images, scenarios, ROI assumptions, prices, forms, page metadata, analytics, and SEO.
• Customize -> Brand colors & fonts - adapt Nerve’s ink, paper, signal, grid, Inter, and Geist Mono system.
• Customize -> Pages - add or rearrange routes and homepage sections.
• Content -> Blog posts - the same Markdown workflow applies to Nerve’s insight collection.
• Deploy -> Cloudflare Pages - publish the static build to Cloudflare Pages.