What problem does it solve? Building interfaces that match Vercel's visual identity requires knowing the exact Geist design tokens, type scale, materials, and trademark rules, which are otherwise scattered across documentation. ## Core Features & Use Cases - Design Token Reference: Complete --ds-* CSS variable system covering gray scales, semantic status colors, alpha variants, and dual light/dark mode backgrounds. - Typography Presets: Geist Sans/Mono font usage with the full heading, label, copy, and button type scale classes. - Materials & Components: Surface elevation materials with defined border radii and a catalog of 50+ Geist components. - Brand Compliance: Vercel trademark rules, product naming conventions (Next.js, Turborepo, v0, AI SDK), and required attribution text. - Use Case: When building a dashboard or landing page that should look like a Vercel product, apply the correct var(--ds-gray-100) backgrounds, text-heading-48 titles, and 12px card radii without guessing values. ## Quick Start Apply the Geist design system to style my Next.js dashboard component using the correct color tokens, typography classes, and material surfaces.
