An original, unofficial Next.js-inspired system for framework onboarding, documentation discovery, feature explanation, and full-stack web product surfaces. It retains only 13 focused elements supported by Next.js's live site.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A restrained framework-onboarding system where docs discovery, a first command, feature proof, and nested layout ideas sit inside a near-black technical grid.
Near-black canvas, hairline construction rules, Geist type, high-contrast copy, themeTypography
Geist Sans
Body, hero, navigation, cards, and controls observed on nextjs.org.
GeistSans, GeistSans Fallback, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
Geist Mono
create-next-app command, keyboard hints, technical metadata, and code cues.
GeistMono, GeistMono Fallback, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Grid canvas / light
#f4f4f4Quiet neutral documentation field.
Grid canvas / dark
#000000Observed black homepage canvas.
Surface / light
#ffffffFeature and command surface.
Surface / dark
#101010Raised technical panel.
Ink / light
#111111Primary type on light.
Ink / dark
#edededObserved primary homepage type.
Action green / light
#75b632Primary action on light.
Action green / dark
#b7ff68Primary action and focus on dark.
Link blue
#8ab4ffDocumentation/link signal.
Hairline
#303030Technical grid and panel rule.
Muted copy
#a8a8a8Secondary type on dark.
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero desktop | 72px | 600 | 72px | — |
| Hero mobile | 48px | 600 | 52.8px | — |
| Feature | 32px | 600 | 40px | — |
| Body | 16px | 400 | 26.4px | — |
| UI | 14px | 500 | 20px | — |
| Command | 13px | 500 | 20px | — |
Spacing & shape
Iconography
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Spacing
Motion
Guidelines
Imagery
Prefer original CSS grid geometry, neutral diagrams, and tiny code cues. Do not use Next.js logos, screenshots, site illustrations, or Vercel assets.
Layout
Center the first framework promise and two actions, then expand into feature tiles and proof. Keep docs search in the header; at 390px stack hero, command, and features in one readable axis.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
13 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.