An unofficial Vercel-inspired system for precise developer platforms: adaptive neutral surfaces, compact operational UI, and production-ready elements across every Frontend Forever category.
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
Precision interface architecture built from monochrome planes, hairline grids, compact operational controls, and rare semantic color. The system moves between a bright marketing canvas and a dense dark product surface while preserving one typographic and spatial rhythm.
Reference style: adaptive light and darkTypography
Geist
Display, heading, navigation, controls, and body copy
Geist, Arial, sans-serifFallback: Arial, ui-sans-serif, system-ui, sans-serif
Geist Mono
Code, metrics, timestamps, command output, and technical metadata
Geist Mono, SFMono-Regular, Consolas, monospaceFallback: SFMono-Regular, Consolas, Liberation Mono, monospace
Geist Pixel
Rare decorative technical labels and diagram accents
Geist Pixel, Geist, sans-serifFallback: Geist, Arial, sans-serif
Palette
Black Canvas
#000000Dark page canvas and inverse primary button
Dark Surface
#0A0A0APrimary dark card and code-panel surface
Raised Dark
#1A1A1AHover, selected row, and raised control surface
Dark Border
#2A2A2AHairline structure on dark backgrounds
Dark Text
#EDEDEDPrimary text and inverted action fill
Muted Dark
#A1A1A1Secondary text, helper copy, and inactive navigation
White Canvas
#FFFFFFLight page canvas and elevated surfaces
Light Surface
#FAFAFAQuiet alternate sections and light cards
Light Border
#EAEAEAHairline structure on light backgrounds
Light Text
#1D1D1FPrimary copy on light surfaces
Link Blue
#0070F3Links, focus, and active navigation only
Ready Green
#17C964Healthy deployment and success states
Attention Amber
#F5A623Warnings and pending operational states
Failure Red
#EE0000Destructive actions and failed states
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 76px | 400 | 0.96 | -0.065em |
| Hero mobile | 38px | 400 | 1.02 | -0.05em |
| Section heading | 48px | 450 | 1.04 | -0.055em |
| Product heading | 24px | 600 | 1.2 | -0.025em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface label | 14px | 500 | 1.4 | -0.01em |
| Metadata | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Iconography
Use SVG with currentColor, square optical bounds, rounded joins, and labels for unfamiliar actions. Filled icons are reserved for status dots and the triangular product mark.
System metrics
Radius
Spacing
Motion
Elevation
Floating menu
0 12px 36px rgba(0, 0, 0, 0.18)Command palettes, account menus, and contextual popovers
Modal overlay
0 24px 80px rgba(0, 0, 0, 0.32)Dialog surfaces above the product shell
Focus glow
0 0 0 3px rgba(50, 145, 255, 0.28)Keyboard focus around interactive controls
Surfaces & shape
Dark canvas
#000000Marketing hero and dark product background
Dark panel
#0A0A0ACards, terminal frames, and operational panels
Light canvas
#FFFFFFDocumentation and light marketing sections
Light panel
#FAFAFAQuiet feature groups and secondary content
Guidelines
Imagery
Product-first compositions use real interface frames, terminal output, deployment graphs, and precise technical diagrams. Screenshots stay sharp, top-aligned, and contained by a quiet border; avoid lifestyle photography and decorative mockups that do not explain the product.
Layout
Center content in a 1200px rail with 24px desktop and 16px mobile gutters. Marketing sections use visible horizontal rules and occasional 48px grid lines. Split heroes collapse below 900px, dense grids step from four columns to two and one, and code surfaces scroll instead of compressing.
Assigned collection
40 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.
