Customization

How to rebrand, retheme, and edit content across all three variants.

Table of Contents

• Branding
• Logos
• Colors
• Fonts
• Images
• Navigation
• Footer
• Content Editing
• Adding Pages
• Adding Blog Posts
• Dark Mode

Branding

Each variant has its own placeholder brand name baked into its demo content:

To rebrand a variant, update:

1. Your site title and description
2. The navigation logo, menu links, footer content, and copyright text
3. The brand mentions in each section's headline and body copy
4. The sample blog posts and changelog entries — these frequently reference the placeholder brand name too

Logos

Each variant ships with logo files for both light and dark backgrounds:

To replace a logo, swap in your own image file, keeping the same filename and a similar aspect ratio to the original.

Each variant also ships its own favicon, which you should replace with your own.

Colors

All colors used throughout the templates come from one shared set of design settings, so you can update your brand color in one place and have it apply consistently across buttons, links, and accents.

Documented exceptions

A few colors are intentionally kept separate from the shared brand color, because they're either decorative or carry their own meaning:

• Lumina's gradient orbs and glassmorphism effect — a dark-mode-only decorative effect — see Lumina
• Forge's HTTP method badges — GET (green) / POST (blue) / PUT (amber) / PATCH (purple) / DELETE (red) — colors follow common API convention, not your brand color
• Code syntax highlighting — uses its own fixed color theme for readability
• Status colors across all variants — green for success, red for errors, amber for warnings — these are intentionally not tied to your brand color

Fonts

Each variant loads two fonts automatically: a body font (Inter) and a monospace accent font (JetBrains Mono), used for code and technical accents. To use different fonts, update the font selection in each variant's project settings — each variant configures its own fonts independently, so update all three if you want a consistent change.

Images

All images are optimized automatically. Local image files (logos, favicons) work with zero additional setup.

Navigation

The navigation links, call-to-action button, and mobile menu are all driven by a simple list of links defined near the top of each variant's site configuration. Edit this list to add, remove, or reorder navigation links.

The navigation automatically hides on the login, register, and forgot-password pages, so those pages can use their own dedicated layout.

Footer

Footer columns, social links, and the copyright text are defined the same way as the navigation — as a simple list of content per variant. Most footer links in the shipped demo content point to placeholder destinations — replace these with your own real links before launch.

Content Editing

Adding Pages

Because this is a standard Next.js project, you can add a new page by creating a new folder with a page file inside the project's routes, following the same structure as the existing pages. New pages automatically include the shared navigation, footer, and page-transition animation — no extra wiring required. Add the new route to the navigation list if it should appear in the menu.

Adding Blog Posts

Create a new Markdown file in the relevant variant's blog content folder. The filename becomes the post's URL.

---
title: "Your Post Title"
date: "2026-07-05"
description: "One or two sentences for the blog list card and search engines."
tags: [engineering, product]
author: "Your Name"
---
 
## Your first heading
 
Regular Markdown content goes here, including tables, lists, and code
blocks with automatic syntax highlighting:
 
\`\`\`ts
export const hello = () => 'world'
\`\`\`

All five fields (title, date, description, tags, author) should be filled in — a missing field may display as blank in the post card or header. New posts are picked up automatically and sorted by date — no extra registration step is needed.

Dark Mode

Dark mode is built in and works automatically. Visitors can toggle it from the navigation or footer.

All animations respect visitors' reduced-motion preferences automatically.