R 16.2.6/app/docs

Full-stack polish with terminal-grade restraint.

A monochrome system for builders: dense docs rails, pill controls, code surfaces, and product demos.

create-next-app
▲npx create-next-app@latest storefront
│TypeScript Tailwind ESLint App Router Turbopack
▲pnpm dev
✓Compiled successfully in 615 ms
Server Actions Streaming Routing
17core colors
13type levels
18components
40+CSS tokens
01 / Colors

Monochrome hierarchy with code-aware surfaces

Primary
#111111
CTA fill and dark emphasis.
Accent
#000000
Maximum-contrast ink moments.
Accent Hover
#1f1f1f
Subtle dark hover lift.
Accent Pressed
#2a2a2a
Pressed state in grayscale.
Canvas
#ffffff
Main page field.
Surface Alt
#fafafa
Search and soft modules.
Code Background
#f6f6f6
Snippet surfaces.
Badge Background
#f3f3f3
Capsules and release pills.
Body
#171717
Default copy tone.
Muted
#666666
Secondary labels.
Border
#e5e5e5
Primary separator.
Border Strong
#d4d4d4
Firmer control edge.
Terminal Background
#111111
Signature developer canvas.
Success
#067647
Positive product state.
Warning
#b54708
Caution tone.
Error
#b42318
Sober error emphasis.
02 / Typography

Compressed, technical, and editorial at once

The React Framework

Display — 64 / 600 / 1.05 / -.05 / Sans

Ship without noise.

Hero — 48 / 600 / 1.08 / -.04 / Sans

Production-grade tooling

Headline — 32 / 600 / 1.15 / -.03 / Sans

Dynamic streaming

Title L — 24 / 600 / 1.2 / -.025 / Sans

Routing and layouts

Title M — 20 / 600 / 1.25 / -.02 / Sans

Server components

Title S — 16 / 600 / 1.35 / -.01 / Sans

Quiet, precise reading for product and docs.

Body — 16 / 400 / 1.6 / -.01 / Sans

Latest version

Label — 14 / 500 / 1.4 / -.01 / Sans

Get Started

Button — 14 / 500 / 1.2 / -.01 / Sans

Modern browsers, zero config.

Caption — 13 / 400 / 1.45 / 0 / Sans

© 2026

Legal — 12 / 400 / 1.45 / 0 / Sans

pnpm create next-app@latest my-app

Code — 14 / 400 / 1.55 / 0 / Mono

Enterprise foundations

Pricing — 40 / 600 / 1.1 / -.03 / Sans
03 / Buttons

Capsule controls with disciplined emphasis

button-primary
button-primary-active
button-secondary
button-ghost
button-icon
release-pill adaption
04 / Cards & Surfaces

Flat containment, measured padding, and code-first contrast

Standard light surfaces

Code surface

Light gray framing separates snippets without shadow.

Inspect API →
Dark signature surfaces

Terminal module

Dark executable surfaces used sparingly but memorably.

Run command →

Streaming preview

High-contrast text keeps dark mode premium, not ornamental.

View output →
05 / Brand-Specific Product Patterns

Docs rails, app shells, route chips, and terminal status

Terminal Build Output
dark module
turbopack
▲ next dev
✓ static pages generated
Docs Sidebar + Content
utility mode
latest version
InstallationRoutingCaching
Route Architecture
file-system model
app/
layout.tsx page.tsx loading.tsx route.ts
Search + Version Bar
top controls
⌘K
Search documentation…16.2.6Feedback
06 / Forms

Quiet inputs with border-led focus treatment

Invalid route segment.
App Router Latest docs
07 / Spacing

Tight component rhythm, generous section rhythm

xs
4px
sm
8px
md
12px
lg
16px
xl
24px
section
96px
08 / Radius

Pill-first controls, moderate container rounding

8px
small utility containers
12px
code blocks and panels
14px
template cards
20px
hero and feature surfaces
pill
buttons, chips, search
09 / Elevation

Flat by intent

Level 0No shadow. White surface, hairline edge.box-shadow: none
Level 0 / CodeDepth comes from `{colors.code-bg}` against the canvas.box-shadow: none
Level 0 / DarkDark contrast creates priority more effectively than blur or lift.box-shadow: none
This brand uses flat surfaces. Depth comes from contrast, borders, and density.
10 / Extracted Component Tokens

Core custom properties

:root {
  --brand-primary: #111111;
  --brand-accent: #000000;
  --brand-body: #171717;
  --brand-muted: #666666;
  --brand-canvas: #ffffff;
  --brand-surface-alt: #fafafa;
  --brand-border: #e5e5e5;
  --brand-border-strong: #d4d4d4;
  --brand-terminal: #111111;
  --brand-code-bg: #f6f6f6;
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Geist Mono", ui-monospace, monospace;
  --display-size: 64px;
  --headline-lg: 32px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
  --space-lg: 16px;
  --space-section: 96px;
  --shadow-flat: none;
}