Template documentation

GLYPH Mono

A hardware product-launch template built with Next.js, React, TypeScript, Tailwind CSS, and Motion. This guide is written for non-developers — you can customize the entire site by editing a few plain-text files, no coding required.

Introduction

GLYPH Mono is a single-product launch template featuring an interactive, recolorable keyboard, a scroll-driven product showcase, light/dark modes, a full set of marketing sections, three sub-pages (full specs, the build story, and a live configurator), and a styled 404 page.

The golden rule: almost all of your text, links, prices, and product data live in one file — config/site.ts. You rarely need to touch the components themselves.

Requirements

Node.js 20 or newer — download from nodejs.org.
A code editor (e.g. VS Code) for editing the text files.
A terminal (Command Prompt on Windows, Terminal on macOS).

Quick start

Open a terminal in the template folder and run these in order:

# 1. Install dependencies (one time)
npm install

# 2. Start the local preview at http://localhost:3000
npm run dev

# 3. When you're done, build the final static site
npm run build

While npm run dev is running, any change you save appears in the browser instantly.

Project structure

Path	What it is
`config/site.ts`	All editable text, links, prices, and product data. Start here.
`config/keyboard.ts`	The keyboard layout (keys, sizes, accent keys).
`app/globals.css`	Brand colors (accent, light/dark palette).
`app/layout.tsx`	Fonts and the page shell.
`app/page.tsx`	The homepage — the order of sections.
`app/specs/`, `app/build/`, `app/configure/`	The three sub-pages.
`app/components/`	The building blocks (sections, header, footer, keyboard). You usually won't edit these.

Editing content

Open config/site.ts. Every block of text is clearly named. Change the words inside the quotation marks and save — that's it. Key sections:

Variable	Controls
`siteConfig`	Product name, tagline, page description.
`hero`	The headline, eyebrow, button, and the four spec chips on the homepage.
`features`	The "Why GLYPH" feature cards.
`testimonials`	The review quotes.
`faqs`	The FAQ questions and answers.
`preOrder`	The dark call-to-action band near the bottom.
`specSheet`	The full specs page table.
`buildStory`	The build-story page steps.
`navLinks` / `pageLinks`	The header menu and footer page links.

Always keep the quotation marks and commas exactly as they are — only change the text between the quotes. If a comma goes missing, the site won't compile (the terminal will tell you which line).

Colors

The entire palette is three values in app/globals.css. Change the accent in one place and it updates every button, the Esc/Enter keys, and highlights site-wide.

@theme inline {
  --color-bone: #efe9dd;    /* light background */
  --color-ink:  #1a1814;    /* dark text / dark sections */
  --color-accent: #c6f432;  /* the one accent color */
}

Light and dark modes are defined just below:

:root  { --background: #efe9dd; --foreground: #1a1814; } /* light */
.dark  { --background: #1a1814; --foreground: #efe9dd; } /* dark  */

Tip: keep the accent used as a fill behind dark text (like the Pre-order button). A bright accent as text on the light background can be hard to read.

Fonts

Fonts are loaded in app/layout.tsx using Next.js's built-in Google Fonts loader (they are downloaded and bundled automatically at build time — no external requests for your visitors). The defaults are Space Grotesk (headings), Inter (body), and JetBrains Mono (labels). To change one, swap the import name — for example replace Space_Grotesk with another Google font and update the three references.

Keyboard & configurator

Keyboard layout

The on-screen keyboard is drawn from data in config/keyboard.ts. Each key has a label, an optional width (w), and an optional accent: true to tint it with your accent color. Edit labels or add/remove keys there.

Configurator options

The /configure page reads from configGroups and basePrice in config/site.ts. Each group (Case, Keycaps, Accent, Switches) lists its options with a label, a price (added to the base), and — for color options — a color hex value. Add, remove, or reprice options freely; the live preview and total update automatically.

Keycap legends are dark, so choose light keycap colors to keep the letters readable.

Build & deploy

Run the build to produce a fully static site in the out/ folder:

npm run build

The out/ folder contains plain HTML, CSS, and JavaScript — it needs no server and can be hosted anywhere static files are served:

Cloudflare Pages: npx wrangler pages deploy out
Netlify / Vercel: drag-and-drop the out folder, or connect the repo.
Any web host: upload the contents of out/ to your public directory.

Troubleshooting

Symptom	Fix
Site won't compile after an edit	You likely removed a quote or comma in `config/site.ts`. The terminal names the file and line.
A new page shows the 404	Stop the dev server and run `npm run dev` again so it re-scans for new pages.
Fonts look wrong	Building requires an internet connection the first time (to fetch the fonts).
Accent color didn't change everywhere	Make sure you edited `--color-accent` in `app/globals.css`, not a single component.

Credits & license

Fonts: Space Grotesk, Inter, and JetBrains Mono — all open-source (SIL Open Font License / Apache 2.0), free for commercial use and safe to redistribute.
Libraries: Next.js, React, Tailwind CSS, Motion — all open-source under permissive licenses.
Demo content: "GLYPH Mono" is a fictional product created to demonstrate the template. Replace it with your own product.

Your purchase includes the license you bought from the marketplace. Refer to that marketplace's license terms for usage rights.