V3 — Forge (Dev Tool)

Feature reference for the Developer Tool / API Product variant.

Table of Contents

• Overview
• Features
• Documentation Section
• Code Blocks
• Theme Customization
• Environment Variables

Overview

In-app brand name: Forge

V3 is the minimal, code-forward variant aimed at developer tool founders, open-source maintainers, and API-first products. It uses a white/zinc palette with monospace accents on technical elements, border-only card styling (no shadows), and a clean, technical aesthetic. Forge is the only variant with a documentation section.

[Screenshot: Forge homepage, desktop, light mode]

Features

The homepage renders sections in a different order than Launchpad and Lumina:

1. Hero — stars badge, headline, dual calls to action, and a dark terminal-style code block with a blinking cursor
2. How It Works / Quick Start — a 3-step walkthrough with tabs for different install commands
3. Features — 4 alternating rows (text + a live code/terminal panel, alternating left/right)
4. Integrations grid — a responsive grid of integration logos
5. API Reference Block — see Code Blocks below
6. Changelog preview — the 3 most recent entries, linking to the full /changelog page
7. Pricing — see table below
8. Testimonials — a horizontal scrolling card row
9. FAQ — an accordion with monospace triggers
10. CTA Banner — a dark full-width band with a terminal-style command and a call to action

Pricing

The Enterprise tier's "Contact sales" button uses a placeholder address baked into the demo content — replace it with your own contact address using the Customization guide.

Documentation Section

Forge is the only variant with a working documentation section:

• 4 sample documentation pages: Getting Started, Installation, API Overview, Deployment
• A sidebar grouped by section (Overview / Setup / Reference / Deploy), with an animated active-item highlight
• A mobile drawer that replaces the sidebar on smaller screens
• Previous/next navigation between documentation pages
• Its own page-transition animation, independent from the rest of the site

[Screenshot: Forge documentation page, desktop, sidebar + article + prev/next nav]

To add a 5th documentation page, see the Customization guide for how documentation pages are structured.

Code Blocks

Code snippets throughout Forge — in the hero terminal, the quick-start steps, and the API Reference Block — are automatically styled with syntax highlighting, and include a copy button so visitors can copy a snippet with one click. Snippets can optionally show a filename and highlight specific lines.

The API Reference Block demonstrates a realistic usage: a single documented POST /v1/endpoints example with a parameters table, status-code chips, and a request/response example shown as static content — this is illustrative content, not a live, callable API.

Because highlighting happens automatically as part of building the site, there is no extra loading time or flash of unstyled code for your visitors.

Theme Customization

Structural colors follow the same shared design system as Launchpad and Lumina. Forge's specific customization points:

• Monospace accent — a monospace font is applied to code blocks, terminal chrome, the hero's cursor blink, CLI commands, and FAQ accordion triggers
• Card style — border-only, no shadow — this is a deliberate Forge-specific visual style, not shared by the other variants
• HTTP method badges — GET/POST/PUT/PATCH/DELETE colors (green/blue/amber/purple/red) follow common API convention and are an intentional exception to the shared color system (see the Customization guide)

Environment Variables

None. Forge has zero required environment variables. The API Reference Block, quick-start commands, and documentation section are all static demo content — there is no real API, CLI, or SDK behind them. If you build a real product around this template, your own backend/API will introduce its own environment variables.