Halftone: Developer tool and API landing page template for Next.js.

$39one-time payment

Buy HalftoneLive demo

Checkout opens soon.

Next.js 15
Tailwind CSS v4
TypeScript
11 sections
Light
No API keys
Updated Oct 7, 2026

Live demo

The Halftone landing page template on desktop, from the hero to the footer

Overview

A clean, light landing page for developer tools and API products. Every product visual is built in code and animated: a live delivery log, a pipeline, six product panels, a code window with language tabs and a CLI terminal.

Made for: APIs and webhooks, Developer infrastructure, Email, auth and payments APIs
Highlights: Live delivery log hero with a retry that recovers
Animated pipeline and six coded product panels
Code window with language tabs and step highlights
Usage-based pricing slider that prices every plan
The look: White surfaces, one cobalt accent and soft dithered colour fields. Text is set in Instrument Sans, code and data in Geist Mono, and every panel stays sharp at any size because none of it is a screenshot.

Sections

01
Hero
Headline, an install command with a copy button, and a live delivery log in which one request fails and recovers on retry.
02
Logo strip
Six placeholder wordmarks.
03
Build vs. buy
The same rows on both sides: weeks of work against “Included”.
04
How it works
Your app, your product and three customer endpoints, with packets travelling along the lines.
05
Product
A bento grid of six animated panels: retries, signing, replay, latency, regions and a customer portal.
06
Developers
Three steps beside a code window. Each step highlights its lines, and language tabs switch the sample.
07
Numbers
Four figures that count up.
08
Customers
One long story with its result, and two short quotes.
09
Pricing
Usage-based. A log-scale slider prices every plan at the chosen volume and marks the cheapest.
10
FAQ
Heading and contact card beside an accordion.
11
Closing card
A call to action beside a terminal that forwards events to localhost.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Built with

Its motion comes from free components in our library, shipped in components/hairline/ so you can use them anywhere else on the page too.

Make it yours

Every word, link and price lives in site.config.ts. TypeScript flags a missing or misspelled field, so you can’t quietly break a section.

Where to change each part of Halftone
To change	Edit
Copy, links, plans, FAQ, sample events and code	site.config.ts
Accent colour, surfaces and code colours	app/globals.css (@theme)
Dither colours (hero, closing card)	site.config.ts → dither
Fonts	app/layout.tsx
Logo	components/ui/BrandMark.tsx
Section order	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 18.18 or newer. No environment variables.

Before you go live

The product is a made-up webhook service called Ferry. Keep the structure and change the nouns: for an email API the log becomes sent and bounced messages, for auth it shows sign-ins. Each panel is one small component in components/visuals/, so you can also swap any of them for a screenshot.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: Instrument Sans, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react, motion, clsx, tailwind-merge
Images: None. Every visual is built in code.
API keys and environment variables: None
Node.js: 18.18 or newer
Colour scheme: Light
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 34 source files, about 3,800 lines
Last updated: Oct 7, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Halftone?

The complete Halftone project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Halftone for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

The product is a made-up webhook service called Ferry. Keep the structure and change the nouns: for an email API the log becomes sent and bounced messages, for auth it shows sign-ins. Each panel is one small component in components/visuals/, so you can also swap any of them for a screenshot.

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Halftone are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Halftone isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 17 templates, including Halftone and every template added later. Three single templates would cost $117.