Rivet: Design and engineering studio landing page template for Next.js.

$39one-time payment

Buy RivetLive demo

Checkout opens soon.

Next.js 15
CSS
TypeScript
10 sections
Dark
No API keys
Updated Oct 10, 2026

Live demo

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

Overview

A complete independent studio website for ambitious digital projects. Original monochrome imagery, acid-green accents, large Geist typography, and careful motion frame a product design and engineering practice with a clear point of view.

Made for: Product design and engineering studios, Digital agencies and independent practices, Creative development teams and consultancies
Highlights: Photographic framed hero and deliberate typography motion
Four editable project compositions and complete case-study pages
Full-screen accessible navigation and inline capability disclosures
Configured inquiry delivery or downloadable local briefs
The look: A near-black canvas, warm white typography, and acid-green accents. An original architectural photograph sits inside an inset hairline frame with technical rails. Right-aligned section introductions, circular client marks, a two-column portfolio, numbered services, and a large typographic footer create an editorial rhythm.

Sections

01
Navigation and hero
Framed architectural hero, finite staggered typography, original studio image, and full-screen clip-reveal navigation with focus containment, Escape, inert background, and scroll locking.
02
Studio and philosophy
Circular project marks, a five-part working rhythm, a monochrome studio photograph, and three structural facts about the practice.
03
Selected work
Four distinct editable project compositions with hover and focus treatment; each opens a full case study with challenge, approach, output, deliverables, and next-project navigation.
04
Capabilities
Four numbered native disclosures with original service diagrams, scope, deliverables, and tags. Content expands in place.
05
Process
A sticky introduction alongside four connected working stages, with restrained scroll reveals and a normal mobile reading order.
06
Engagements
Three clearly labeled starting fees with one-time versus monthly terms. Actions preselect the relevant engagement on the inquiry page.
07
Field notes
Three complete original articles, coordinated covers, a journal index, article metadata, and readable editorial pages.
08
FAQ and closing
Native accessible disclosures, an architectural closing composition, and direct conversation links.
09
Project inquiry
Validated form, selected engagement, configured JSON endpoint delivery, honest error handling, downloadable local brief, and optional email draft.
10
Supporting pages and footer
Studio, contact, four case studies, journal and three articles, privacy holding page, custom 404, large brand footer, optional social destinations.

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

Make it yours

Start with site.config.ts for branding, page copy, navigation, FAQ, and destinations. Portfolio, articles, and engagement data are divided into focused files.

Where to change each part of Rivet
To change	Edit
Brand, metadata, main copy, booking, inbox, and inquiry endpoint	site.config.ts
Portfolio, scopes, narratives, and generated project routes	data/projects.ts
Services, process, engagement prices, and deliverables	data/services.ts
Complete articles and editorial metadata	data/articles.ts
Project artwork and service diagrams	components/art/ and styles/project-art.css
Palette, typography, spacing, and responsive compositions	styles/
Original architectural and studio photography	public/images/ and ASSETS.md

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace illustrative projects, brand, fees, copy, and studio imagery. Set your canonical URL, business email, scheduling destination, and inquiry endpoint. Publish your own reviewed privacy notice. The local brief flow works without a backend; live submission needs your own validated endpoint and delivery service.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Geist, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom
Images: Two original monochrome photographs generated with the built-in imagegen tool and shipped as optimized WebP. Fictional project imagery, diagrams, and marks are editable HTML, CSS, React, and SVG.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Dark
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: 75 source files, about 5,700 lines
Last updated: Oct 10, 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 Rivet?

The complete Rivet 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 Rivet 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?

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 Rivet are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Rivet 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 31 templates, including Rivet and every template added later. Three single templates would cost $117.