Documentation Site Template
A complete six-page documentation site on a clean near-white reading surface, with a proper dark theme and a cool slate alternate shipped as one-attribute palette swaps: fixed top bar, cross-linked sidebar tree, article column and scrollspy "On this page" rail on every page, built around a Cmd+K command palette that fuzzy-searches an index read live from the site's navigation and the current page's headings.
About This Template
A documentation site you deploy as your documentation site, not a landing page about one. The template is the docs dashboard itself: a fixed top bar with wordmark, version badge and search affordance, a left sidebar tree with collapsible groups, a reading column, and a right-hand "On this page" rail whose marker follows you down the article. It ships as a complete six-page site for Cairn, a fictional static-site build CLI: an introduction, a quickstart, full configuration and CLI references, a themes guide and a deploying guide, cross-linked through the sidebar and a prev/next pager on every page. Between them the pages carry every docs pattern you need to copy: a tabbed install block, styled file trees, options and flags tables, CI recipes, and note and warning callouts.
Read the full template overview
The art direction is a calm reading surface, the kind of docs site you can read for an hour: a flat near-white ground with no texture or overlay, calm near-black ink, one deep viridian green for links and active states, and dark code panels, the only dark mass on the light page, because code is content rather than decoration. Three palettes ship: Paper is the default, Dark is a comfortable green-grey dark reading theme with the viridian lifted to mint, and Slate is a cool blue-grey light with a deep indigo accent. Each alternate is a data-palette block in the stylesheet restating every token, so switching is one attribute on the html tag. Chakra Petch gives the headings a squared technical voice, Wix Madefor Text carries the reading, and Ubuntu Sans Mono sets every code span, kbd hint and the version badge.
The signature is the command palette, present on every page. Cmd+K or Ctrl+K opens a centred dialog with a GSAP entrance, live fuzzy filtering with match highlighting, and full keyboard support. Its index is built from the DOM at load: the sidebar's links become page entries that navigate between pages, the current page's headings become scroll targets, and scripted actions round it out, so renaming or deleting a page or section can never leave a stale search result. Choosing a heading smooth-scrolls to it and flashes it briefly so the eye lands in the right place; choosing a page follows its sidebar link.
To make it yours, replace the articles and the sidebar tree with your pages: the palette, the scrollspy rail and the copy buttons all read the DOM, so they pick your structure up with no configuration. Choose Dark or Slate by setting data-palette on the html tag, or reskin entirely from the one token block with RGB triples; the site deploys as static files with no build step.
What's Included
- A complete six-page docs site, not a single demo page: introduction, quickstart, configuration reference, themes guide, deploying guide and CLI reference, cross-linked through the sidebar with the current page marked on every one
- Complete docs-site chrome on every page: fixed top bar with version badge and search affordance, collapsible sidebar tree, breadcrumbs, reading column, scrollspy "On this page" rail, and a prev and next pager wired across the real page order
- Signature command palette on Cmd+K / Ctrl+K: GSAP scale-and-fade entrance, backdrop dim, live fuzzy filtering with match highlighting, arrow-key navigation, Enter to jump, Escape to close, focus trapped and returned
- The palette's index is read from the DOM: sidebar links become cross-page navigation entries, the current page's headings become scroll targets, and scripted actions appear only on pages that can perform them, so search can never drift from the site it searches
- Scrollspy rail with a sliding marker, its entries and positions read from the markup, so deleted sections just shrink the rail
- Choosing a palette or rail entry smooth-scrolls under the fixed bar via Lenis and flashes the target heading
- Copy buttons on every code block, injected by the script so a no-JS page simply never has them, with a Copied state on the dark panel
- Tabbed package-manager install block as a real ARIA tablist; without JavaScript all three panels stack, each naming itself
- Complete shipped content for a fictional CLI across all six pages: tabbed install block, styled file trees, configuration and flags tables, a CI recipe, redirects examples, and note and warning callouts
- Three shipped palettes: a clean near-white default, a comfortable dark reading theme, and a cool slate light, each a data-palette token block so switching is one attribute on the html tag
- A flat, undecorated reading ground in every palette, dark restrained code panels, and a signal red held to the warning border only
- Sidebar groups are native open-by-default details, and the sidebar becomes an overlay drawer on phones; without JavaScript it joins the document flow so nothing is unreachable
- Skip link, semantic landmarks, real table markup for the options, kbd-styled shortcut hints, and visible measured focus rings throughout
- Reduced motion gets an instant palette, jumping marker and no smooth scroll, via both the CSS media query and the matchMedia branch
- Reskins from one token block: every translucent value derives from RGB triples, with measured contrast tables for all three palettes in the stylesheet header
- Lenis smooth scrolling wired on the shared GSAP clock and fully optional; the sidebar scrolls natively via data-lenis-prevent
Perfect For
- Product and API documentation for developer tools, CLIs and libraries
- Internal engineering handbooks, runbooks and onboarding guides
- Open-source project docs that need to look maintained without a docs framework
- Knowledge bases and help centres for technical products
- Learning pattern: an accessible command palette with DOM-derived search and a GSAP-driven scrollspy
How It Works
The command palette
At load the script walks the sidebar links and the current page's h2 and h3 headings and builds the search index from what it finds, adding scripted actions; the copy-install action only exists on pages that carry the install block. Cmd+K, Ctrl+K or the search button opens the dialog with a backdrop fade and a scale-and-fade entrance; typing runs a subsequence fuzzy match that scores word starts and tight runs, and the matched characters render as highlights. Enter on a heading closes the palette, scrolls to it beneath the fixed bar, and briefly flashes it; Enter on a page entry follows that page's sidebar link, so the palette is also the site's navigation. Focus is trapped on the input while open and returned to the opener on close.
Pages and navigation
Six pages ship as plain HTML files sharing one assets folder, so the whole site deploys as static files with no build step. Every page carries the same chrome; the sidebar holds real relative links with the current page marked aria-current, and a prev and next pager runs across the real page order, so with JavaScript disabled navigation is ordinary links and nothing else. One page-agnostic script runs everywhere: every lookup is guarded and the palette index, scrollspy and copy buttons are read from whatever the current page contains, which is also what makes adding a page a copy-and-edit job rather than a configuration change.
Scrollspy and smooth scroll
Lenis drives window scrolling from the GSAP ticker so ScrollTrigger and the scroll position share one clock, and it is opt-out via a data attribute, a URL parameter, or reduced motion. A single ScrollTrigger drives the spy: the last heading above a line 30% down the viewport is active, the foot of the page always lights the final entry even when its section is too short to reach the line, and a 2px marker tweens to the active link. Entries pair rail links with headings by id and skip any whose heading is gone, so removing an article section removes its rail entry with no other edit. The sidebar carries data-lenis-prevent and scrolls natively inside its fixed panel.
Docs chrome, not content motion
The article itself never animates: no scroll reveals, no staggered paragraphs, because documentation is for reading and re-reading. Motion is spent on the chrome instead: the palette entrance, the sliding rail marker, the tab swap in the install block, the copy button's Copied state, and the drawer on phones. Reduced motion swaps each of those for an instant state through both the CSS media query and the matchMedia branch.
Without JavaScript
The page is a plain document that JavaScript upgrades. The search button and menu button are gated behind a class set synchronously in the head and removed if GSAP fails to load, so a blocked CDN shows the full static page. Sidebar groups are native details elements, open by default; the install tabs stack as three labelled blocks; the rail is plain anchor links; copy buttons are injected at runtime so they never exist to fail. Nothing on the page is pre-hidden.
:root.
Try them in the preview above.