Nuxt Design System

Nuxt's homepage opens with a typographic statement that most framework brands avoid: it names the underlying technology in the headline and highlights that word in the brand color. "The Full-Stack Vue Framework" runs at 72px, Public Sans, weight 700, tight -1.8px tracking — white text on a deep blue-black canvas — with only "Vue" rendered in electric green (#00dc82). The rest of the headline, the subheading, and every body paragraph on the page are white or cool-gray on dark. The electric green never appears as a canvas or section fill; it surfaces only as text color, border accent, and the sole CTA button fill ("Get started"). Where React-ecosystem frameworks (Next.js, Remix) design around framework-neutral palettes, Nuxt signals its Vue provenance directly through the color of one word.

The DESIGN.md file packages the system as machine-readable tokens for React and AI tools. Inside: 16 color tokens anchored on the near-midnight canvas, a full 10-step green ramp wired as CSS custom properties (--ui-color-primary-50 through -950), and a monospace tier from the system stack; 14 typography tokens spanning Public Sans at 72px display through 10px micro-labels, all in a single typeface; 5 radius values centered on 6–8px; and 18 component definitions covering the green CTA, the white-text hero, the feature card grid, the module showcase, and the deploy-anywhere section.

Feed this file to Claude or Cursor and it reproduces Nuxt's specific moves: deep blue-black canvas, electric-green voltage appearing only as text or border accents and one CTA fill, Public Sans across all tiers including display, small 6–8px card radius rather than pill shapes, and the typographic single-word highlight technique. The one distinctive move worth studying: aliasing the brand color to the UI success semantic (--ui-success === --ui-primary === #00dc82) means any success indicator — a checkmark, a "done" badge, a validation state — carries the brand's authority automatically, without a second color decision.