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.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
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.
Reference style: Near-black canvas, hairline construction rules, Geist type, high-contrast copy,Typography
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.
Assigned collection
13 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
