{ "id": "vercel-inspired", "name": "Vercel Inspired", "version": "1.0", "tagline": "Swiss minimalism for the frontend cloud.", "description": "An inspired-by interpretation of Vercel's Geist design system: monochrome-first identity, open-source Geist Sans/Mono, layered Background-1/2 surfaces, and 10-step color scales for every accent.", "inspired_by": { "name": "Vercel / Geist", "url": "https://vercel.com/geist" }, "vibe_tags": ["minimal", "monochrome", "swiss", "geometric", "developer-tool", "hosting"], "domain_hint": "developer tool / cloud platform", "identity": { "logomark": { "shape": "triangle", "description": "Black triangle ▲ (U+25B2)", "import": "VercelMark from geist/logos" }, "wordmark": { "text": "Vercel", "font": "Geist Sans", "case": "title", "import": "VercelWordmark from geist/logos", "safety_area": "height of the triangle symbol" } }, "voice": { "principles": ["Minimal, Swiss-modern, developer-direct", "Imperatives and short clauses", "We design systems and systemize designs"], "avoid": ["marketing fluff", "feature listicles"], "sample_headlines": [ "The Frontend Cloud.", "Build, scale, and secure a faster, personalized web with Vercel.", "Made for building consistent and delightful web experiences.", "We design systems and systemize designs.", "What will you ship next?" ], "sample_lead": "Geist embodies our design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement.", "sample_metrics": [["Deploy timestamp", "APR 26 15:54:21.12 /dashboard/overview", null], ["Tiers", "Hobby · Pro · Enterprise", null]], "sample_code_lang": "typescript", "sample_code": "import { GeistSans } from 'geist/font/sans'\nimport { GeistMono } from 'geist/font/mono'\n\nexport default function RootLayout({ children }) {\n return {children}\n}", "sample_terminal_prompt": "$", "sample_terminal_session": "$ npx create-next-app@latest\n✓ Ready in 1.2s" }, "design_principles": [ "Black and white do the heavy lifting — color is functional.", "Background-1 (default) and Background-2 (subtle) instead of card vs page.", "10-step color scales for every accent — 1-3 surfaces, 4-6 borders, 7-8 emphasis, 9-10 text.", "Open-source typography (Geist Sans / Mono / Pixel)." ], "color": { "primary": { "name": "monochrome", "hex": "#000000", "inverse": "#FFFFFF", "notes": "Brand-primary is black/white. Geist's accent scales (Blue/Red/Amber/Green/Teal/Purple/Pink) are 10-step ramps; exact hexes live in the `geist` npm package CSS variables (--ds-gray-100..1000, --ds-blue-100.., etc.) — extract those for production." }, "scale_structure": { "neutrals": ["Gray 1-10 (solid)", "Gray Alpha 1-10 (transparent over Background-1/2)"], "accents": ["Blue", "Red", "Amber", "Green", "Teal", "Purple", "Pink"], "steps_per_scale": 10, "step_roles": { "1": "default background", "2": "hover background", "3": "active background", "4": "default border", "5": "hover border", "6": "active border", "7": "high-contrast background", "8": "alt high-contrast bg", "9": "secondary text", "10": "primary text" } }, "semantic": { "success": "scale.Green", "warning": "scale.Amber", "danger": "scale.Red", "info": "scale.Blue" }, "backgrounds": { "primary": "Background 1", "secondary": "Background 2 (subtle differentiation)" }, "p3_variants": true, "mode": "dark-first (system/light/dark themes shipped)" }, "typography": { "fonts": { "sans": { "family": "Geist Sans", "fallback": "-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", "license": "OFL (open-source)", "google": true, "weights": [100, 200, 300, 400, 500, 600, 700, 800, 900], "variable": true }, "mono": { "family": "Geist Mono", "fallback": "ui-monospace, SF Mono, Menlo, monospace", "license": "OFL", "weights": [100, 200, 300, 400, 500, 600, 700, 800, 900] }, "pixel": { "family": "Geist Pixel", "variants": ["Square", "Grid", "Circle", "Triangle", "Line"], "license": "OFL" } }, "scale_classes": { "headings": ["text-heading-72", "text-heading-64", "text-heading-56", "text-heading-48", "text-heading-40", "text-heading-32", "text-heading-24", "text-heading-20", "text-heading-16", "text-heading-14"], "buttons": ["text-button-16", "text-button-14", "text-button-12"], "labels": ["text-label-20", "text-label-18", "text-label-16", "text-label-14", "text-label-14-mono", "text-label-13", "text-label-13-mono", "text-label-12", "text-label-12-mono"], "copy": ["text-copy-24", "text-copy-20", "text-copy-18", "text-copy-16", "text-copy-14", "text-copy-13", "text-copy-13-mono"] }, "scale": { "display": { "size_px": 72, "line": 1.05, "tracking": "-0.02em", "weight": 600 }, "h1": { "size_px": 48, "line": 1.10, "tracking": "-0.02em", "weight": 600 }, "h2": { "size_px": 32, "line": 1.20, "tracking": "-0.01em", "weight": 600 }, "h3": { "size_px": 20, "line": 1.30, "tracking": "0", "weight": 600 }, "body": { "size_px": 16, "line": 1.50, "tracking": "0", "weight": 400 }, "caption": { "size_px": 13, "line": 1.40, "tracking": "0", "weight": 400 }, "mono": { "size_px": 13, "line": 1.50, "tracking": "0", "weight": 400, "font": "mono" } } }, "tokens": { "spacing_px": [4, 8, 12, 16, 24, 32, 48, 64, 96, 128], "radius_px": { "sm": 4, "md": 6, "lg": 8, "pill": 9999 }, "shadow": { "notes": "Geist exposes a shadow prop on Button used with rounded marketing variant; raw shadow values not published" }, "motion": { "notes": "Not published in Geist foundations" } }, "components": { "button": { "sizes": ["small", "medium", "large"], "shapes": ["default", "rounded"], "variants": ["primary", "secondary", "tertiary", "error", "warning"], "features": ["prefix icon", "suffix icon", "loading", "disabled", "svgOnly (icon-only requires aria-label)", "shadow prop on rounded"], "link_variant": "ButtonLink" }, "card": { "bg": "Background-1 or Background-2", "border": "Color step 4" }, "badge": { "shape": "rounded", "bg": "Color step 2 or 3", "pill_variant": true } }, "do": [ "Use Geist Sans / Mono — they're open-source (OFL).", "Use Background-2 instead of card shadows for subtle differentiation.", "Use the same scale step-role contract everywhere (1-3 surfaces, 9-10 text)." ], "dont": [ "Don't fabricate Geist hex values — install the `geist` npm package and read its CSS variables.", "Don't reach for color when type-weight or spacing will do.", "Don't add gratuitous shadows — Geist is famously flat." ], "provenance": { "scanned_from": [ "https://vercel.com/geist/colors", "https://vercel.com/geist/typography", "https://vercel.com/geist/brands", "https://vercel.com/font", "https://github.com/vercel/geist-font", "https://vercel.com/geist/button" ], "scanned_at": "2026-05-25", "confidence": "medium-high", "notes": "Structure/typography/voice: HIGH. Exact hex values for Geist scales not extractable from rendered HTML (right-click-to-copy swatches only) — recommend pulling from the geist npm package's CSS custom properties (--ds-gray-100..1000, etc.) to populate the scale objects authoritatively." } }