A complete dark-mode documentation site design system — sticky navbar, collapsible left navigation, content column with code blocks and callouts, and a right-side table of contents. The layout used by Next.js, Vite, Stripe, and every serious developer-facing product.
What Is Documentation UI?
Documentation UI is the dark, three-column layout that powers nearly every modern developer documentation site — Next.js, Vite, Stripe, Tailwind, Vercel. It is built around one principle: a developer should never have to leave the page to find what they need. Navigation on the left, content in the center, and a live table of contents on the right — all visible simultaneously on desktop, all reachable in one tap on mobile.
The near-black palette isn't an aesthetic choice — it reduces eye strain during long technical reading sessions and signals immediately that this is a tool, not a marketing page.
The Vibe
Everything you need, always in view.
No hero sections. No marketing copy. Just a search bar, a sidebar full of topics, dense readable content with code blocks and callouts, and a table of contents that tracks your scroll position. The violet accent appears exactly where it matters — links, active states, focus rings — and nowhere else.
Core Design Decisions
Near-Black, Not Pure Black
#0A0A0F instead of #000000 is a small difference with a big effect. Pure black against white text creates harsh contrast that causes eye fatigue over long reading sessions. The near-black canvas, combined with off-white (#F4F4F5) rather than pure white text, creates a softer, more sustainable reading surface — critical for documentation that developers might read for 20+ minutes at a time.
Three Layers of Surface
The entire visual hierarchy is built from three background values: canvas (#0A0A0F), surface (#13131A), and surface-elevated (#1A1A23). Each step up signals "this is a distinct, interactive region" — sidebars sit on surface, code blocks and promo cards sit on surface-elevated. No shadows are needed because the layering itself creates depth.
The Sidebar Doesn't Need a Different Background
Counter to most app sidebars, the left navigation in Documentation UI uses the same background as the page (canvas). Separation comes purely from a 1px border. This keeps the page feeling like one continuous surface rather than a dashboard with "panels" — appropriate for a reading experience rather than a data application.
The Right Sidebar Is a Live Map
The "On this page" TOC isn't static — it tracks scroll position and highlights the current section in violet. This gives readers a constant sense of "where am I in this document" without needing to scroll back up. For long technical pages, this single feature dramatically reduces the feeling of being lost.
Mobile Collapses to Two Toggles, Not One
The mobile pattern — "Menu" and "On this page" as two separate toggle buttons in a sub-bar — preserves access to BOTH navigation systems without cramming everything into a single hamburger menu. A developer on mobile can jump to a different doc page (left drawer) or jump to a different section of the current page (right drawer) with equal ease.
Code Blocks Get Their Own Elevation
Code blocks use surface-elevated with a header bar containing the filename/language and a copy button. This isn't decoration — it's the single most-interacted-with element on a documentation page. The copy button must always be reachable, and the header bar provides crucial context (which file, which language) before the developer reads the code itself.