Nuxt Design System

Overview

Nuxt's marketing site concentrates the entire brand identity into one word. Single-word voltage. The hero headline reads "The Full-Stack Vue Framework" in white at 72px, Public Sans, weight 700 — and only the word "Vue" renders in electric green (#00dc82). The word-level highlight is not a gradient overlay or a box; it is the same typeface, the same weight, the same size, rendered in the brand color. Where Astro uses a gradient mesh to communicate energy and CrewAI uses a dramatic photograph for atmosphere, Nuxt uses typographic precision: the framework's entire identity claim is that it is the Vue answer, and the color anchors that claim to a single syllable.

The voltage aliasing is the system's second structural decision. Brand as semantic. The CSS variable --ui-primary and --ui-success both resolve to #00dc82 — electric green carries the brand role AND the success/confirmation role simultaneously. This is Nuxt UI's design: a component library where the primary action color and the success state color are defined as identical. Every <UCheckbox> checked state, every <UBadge variant="success">, every progress indicator in the "Nuxt gives you everything" section inherits the brand color without a separate decision. The convention is unusual — most systems keep brand and semantic separate — and worth documenting for teams who inherit a Nuxt UI codebase.

Typography is Public Sans across every tier — display through caption, heading through mono substitute. There is no second family. Public Sans at 72px / weight 700 / -1.8px letter-spacing for the hero h1 reads more compressed and authoritative than the same size in Inter or DM Sans; the slightly humanist construction keeps it from feeling industrial.

Key Characteristics:

• Electric green voltage ({colors.primary} — #00dc82) wired as both --ui-primary and --ui-success — brand and success semantic identical in the token system.
• Word-level typographic highlight: only "Vue" in the hero h1 renders in green; the rest is white.
• Pure Public Sans across all tiers — no secondary display family, no monospace heading.
• Deep navy-black canvas (themeColor #020420 — not pure black) carries a blue undertone that makes the green read as botanical rather than terminal.
• 6px dominant radius (73 occurrences) — the tightest-radius framework brand in this directory; nearest competitor is Cloudflare at 3–4px.
• Full 10-step green ramp in CSS custom properties (--ui-color-primary-50 through -950) — the entire brand palette is systematized.
• Syntax-color tier (sky blue, salmon, lilac, orange) used exclusively in code panels — borrowed from Material Theme palette conventions.
• Module ecosystem showcase: a dense grid of framework integration cards (authentication, CMS, database, deployment) styled as small dark bordered tiles.

Colors

Brand Green

• Primary ({colors.primary} — #00dc82): frequency 49. Used as text (17), background (15), border (17). Wired as --ui-primary, --ui-success, --ui-color-primary-400, --color-green-400. The single chromatic moment on the page — 100% of the brand's chromatic vocabulary resides in this one hex and its ramp.
• Primary Mid ({colors.primary-mid} — #00c16a): frequency 0 in rendered chrome (used as --vp-c-brand, --color-primary-500, --twoslash-matched-color, --twoslash-cursor-color). The hover variant for the primary CTA and the cursor-color in TwoSlash interactive code demos.
• Primary Dark ({colors.primary-dark} — #00a155): declared as --ui-color-primary-600. The one-step-darker green for active states.
• Primary Darkest ({colors.primary-darkest} — #007f45): declared as --ui-color-primary-700. The deep-green for high-contrast or dark-surface active treatments.
• Primary Light ({colors.primary-light} — #75edae): declared as --ui-color-primary-300. Light mint for hover-state highlights and success-area fills.
• Primary Pale ({colors.primary-pale} — #d9fbe8): declared as --ui-color-primary-100 and --ui-color-success-100. The near-white mint used as a very light success background tint.
• Primary Deep ({colors.primary-deep} — #052e16): declared as --ui-color-primary-950. The darkest green — near-black forest tone used for dark-mode success surface fills.

Surface

• Canvas ({colors.canvas} — #020420): the deep navy-black page floor. Resolved from themeColor #020420 — a near-midnight value with a blue cast (oklch hue ~264).
• Surface-1 ({colors.surface-1} — #0f1729): the elevated card surface — inferred from the dark card backgrounds visible in the feature grid. Cards sit noticeably lighter than the canvas.
• Hairline ({colors.hairline} — #1e293b): inferred from the --ui-border oklch value (27.9% chroma 0.041 hue 260) — the single border tone for card outlines, section dividers, and input field outlines.

Text

• Ink ({colors.ink} — #ffffff): frequency 145 — the dominant text color across all tiers. Pure white on the deep-navy canvas. Wired as --color-white and --ui-bg-inverted.
• Ink Muted ({colors.ink-muted} — #babed8): frequency 4. A cool-gray blue-tinted muted tone for secondary labels, subheadings in the stat section, and muted body copy. The slight blue cast echoes the canvas's navy undertone.

Syntax

• Syntax Blue ({colors.syntax-blue} — #89ddff): frequency 48 — the most common syntax color. Appears exclusively in code panels for keywords and references. A cool sky blue borrowed from Material Theme Palenight.
• Syntax Pink ({colors.syntax-pink} — #f07178): frequency 16. String and value tokens in code panels.
• Syntax Purple ({colors.syntax-purple} — #c792ea): frequency 8. Type and class tokens in code panels.
• Syntax Orange ({colors.syntax-orange} — #f78c6c): frequency 4. Function and method tokens in code panels.

Typography

Font Family

The system runs Public Sans exclusively — a free open-source humanist sans licensed under SIL OFL, declared as --font-sans and --default-font-family. The fallback stack walks through five system font aliases before reaching sans-serif. There is no separate display family, no proprietary typeface, no second voice. The monospace tier uses the system monospace stack (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas) for code panels only.

Unlike Astro (Obviously + system-ui) or CrewAI (Gellix + Interdisplay), Nuxt's single-family approach means every tone distinction — from the 72px hero to the 10px micro-label — is expressed through weight and size within Public Sans alone.

Hierarchy

Principles

The hero h1 at 72px / weight 700 / -1.8px tracking is the loudest typographic moment in the system — and the only place where the display size approaches the dramatic. Below the hero, headings drop immediately to 48px and then to 18–20px for card titles. There is no 30–44px intermediate tier (unlike CrewAI's Gellix scale). The absence of a mid-display tier means the page reads in two registers: hero display and working-scale body, with almost nothing in between.

Note on Font Substitutes

Public Sans is free and open-source. No substitution is needed — the exact typeface is available at Google Fonts (fonts.google.com/specimen/Public+Sans) and via npm (@fontsource/public-sans). It can be loaded in a Next.js project with next/font/google like any other Google Font.

Layout

Spacing System

• Base unit: 6px (71 occurrences — narrowly the most common single gap value) and 8px (56 occurrences), both essentially tied as the dominant module.
• Tokens: {spacing.xs} 4px · {spacing.sm} 6px · {spacing.md} 8px · {spacing.base} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 64px.
• Hero top padding: 72px above the h1 (the nav height is 64px plus 8px offset — 72px 0px 0px appears 24 times).
• Nav internal padding: 6×10px on links (32 occurrences of "6px 10px").
• Section padding: 64px vertical for major between-section gaps.

Grid & Container

• Max content width: ~90rem (1440px) declared as --ui-container.
• Hero: center-aligned single column, canvas-colored background.
• Feature grid ("Everything you need, nothing you don't"): 3–4 column grid of dark-bordered cards at desktop. 12 feature tiles visible in the captured screenshot.
• Module grid ("Extend Nuxt with plug & play modules"): dense multi-column grid of small module tiles — authentication, CMS, database, i18n, etc. — each rendered as a compact labeled chip.
• Stats section ("Trusted by developers worldwide"): 2-column large-number display with green accent marks.
• Logo wall ("Chosen by leading companies worldwide"): single row of company logos at equal size and white opacity.

Rhythm

The page moves through consistent dark-canvas bands without a light-surface break (unlike Astro's white interstitial). The only chromatic variation comes from the electric green highlights — the word "Vue" in the hero, the CTA button, the feature tag chips, and the stat-section green accents. The rhythm is monochromatic and steady, building density rather than alternating energy.

Elevation

The system has no shadow tier — all elevation comes from {colors.hairline} borders (#1e293b) separating the dark-surface cards from the deep-canvas floor. Cards and module tiles sit at {colors.surface-1} tonal lift, which provides a subtle but visible lightness step above the canvas. The --twoslash-popup-shadow CSS variable declares a very faint rgba(0,0,0,.08) pop-up shadow for the TwoSlash code tooltip, but this is product-surface tooling, not marketing chrome elevation.

Shapes

The radius scale is tight-small: 6px dominates the page.

• {rounded.none} 0px — hero, footer, section dividers.
• {rounded.xs} 4px — input field borders, small badge surfaces.
• {rounded.sm} 6px — the primary CTA button, feature cards, module tiles, and nav link hover states. 73 occurrences — the dominant radius. Wired as --ui-radius: .25rem (4px in the CSS token, but rendered at 6px on the captured elements).
• {rounded.md} 8px — larger cards, the newsletter input field, and section panels. 45 occurrences.
• {rounded.lg} 16px — one large card variant in the feature section. 1 occurrence.
• {rounded.full} 9999px — feature tag badges, logo chips, pill-style nav elements. 21 occurrences.

Nuxt's 6px default is the sharpest card corner among the three framework brands in this batch and stands in deliberate contrast to Astro's pill dominance. The small radius reads as precise engineering confidence rather than consumer-product warmth.

Components

button-primary — Electric green {colors.primary} fill, deep-canvas {colors.canvas} dark text, 6px radius, 8×12px padding, 40px height. "Get started" in the hero top-nav. The only component where the brand green fills a surface.

button-primary-hover — Shifts to {colors.primary-mid} (#00c16a) on hover — one step darker green.

button-secondary — Transparent fill, white text, 1px {colors.hairline} border, 6px radius, 8×12px padding. Used for secondary actions below the hero.

top-nav — Canvas-colored, 64px height, Public Sans 14px / 500. Houses the Nuxt logo (green wordmark), links (Docs / Integrations / Resources / Blog / Video), and the "Get started" CTA flush right.

nav-link — Transparent, white-ink text, 14px / 500, 6×10px padding, 32px height. The standard nav item.

hero-heading — White text, Public Sans 72px / weight 700 / -1.8px tracking.

hero-heading-accent — Electric green {colors.primary} text, same 72px / 700 / -1.8px. Applied to the single word "Vue" in the hero h1 — a component distinction, not a CSS class distinction.

section-heading — White text, Public Sans 48px / 700 / -1.2px. Used for "Everything you need, nothing you don't", "Built on proven tools", and similar section h2s.

body-paragraph — Default white body text at 16px / 400.

body-paragraph-muted — {colors.ink-muted} (#babed8) text at 15px / 400. Secondary body copy and feature card descriptions.

card-dark — {colors.surface-1} fill, 1px {colors.hairline} border, 8px radius, 16px padding. The standard feature card.

feature-tag — Transparent fill, electric green text and border, fully-rounded pill, 4×8px padding. Used for section category labels above section headings ("What is Nuxt?", "Best in Class Performance").

stat-block — Transparent, white display numerals at 48px / 700, with electric-green annotation labels below each stat.

text-input — Transparent fill, white text, 6px radius, 8×44px padding, 40px height, 1px {colors.hairline} border.

module-card — {colors.surface-1} fill, 1px hairline border, 8px radius. Used in the module ecosystem grid for integration tiles (auth, CMS, database, etc.).

code-block — {colors.surface-1} fill, 8px radius, 16px padding, monospace text with Material Theme Palenight-style syntax colors.

footer — Canvas fill, muted blue-gray text, 64×32px padding.

Do's and Don'ts

Do reserve electric green ({colors.primary} — #00dc82) for the primary CTA fill, typographic accents, and feature tag chips. The captured page uses it for one button fill, inline text highlights, and border accents — but never as a card background or section canvas.

Do wire the primary and success tokens to the same value if building within the Nuxt UI component system. The --ui-primary === --ui-success convention means every success indicator inherits brand authority; fighting this alias by using a different success color would break Nuxt UI's semantic coherence.

Do keep display headings at weight 700 with tight negative letter-spacing. The hero at 72px / -1.8px and the section h2 at 48px / -1.2px both require their tracking values — at these sizes, default letter-spacing makes Public Sans feel loose and lightweight, which undercuts the authority the system requires.

Do use 6px as the default card radius. The tight-small scale is intentional and distinguishes Nuxt's engineering-confidence visual identity from the pill-dominant consumer-product peers.

Don't use the syntax colors ({colors.syntax-blue}, {colors.syntax-pink}, {colors.syntax-purple}, {colors.syntax-orange}) outside code panels. All four appear exclusively as code-surface tokens in the captured page; placing them in cards, labels, or UI accents would read as a syntax-highlighting error, not as brand design.

Don't introduce a warm or amber secondary accent. The system is deliberately cool — the deep navy canvas, the cool blue tint in {colors.ink-muted}, and the botanical green combine into a temperature-consistent palette. A warm amber or orange secondary would disrupt the palette's cool coherence.

Don't apply {colors.primary} (#00dc82) to a full-width section background or card fill larger than the CTA button. The 49 captured occurrences include 15 as background fill, but all 15 are the 40px CTA button and small inline highlights — never a surface tile or section band.

Don't use {typography.display-xl} (72px) or {typography.display-md} (48px) anywhere except the hero h1 and section h2. The system has no mid-display tier (30–44px); attempting to add one pulls the page toward a more decorative typographic style that Public Sans's single-family constraint doesn't support.

Known Gaps

• Light mode: the captured marketing surfaces are entirely dark-canvas. Nuxt UI supports light mode (the CSS variable system includes --color-old-neutral-* light-tone scales), but the marketing homepage does not expose it.
• Full green ramp in practice: the 10-step green scale (primary-50 through -950) is declared in CSS custom properties but only steps -100, -300, -400, -500, -600, -700, -800, -950 are documented as named tokens here; the remaining steps should be treated as interpolation values, not primary tokens.
• Hover and focus states: documented for {component.button-primary-hover} only; the full matrix (focus rings, disabled tints, nav-link active states) is not captured.
• Form input validation states: {component.text-input} carries the resting state only; success, error, and focus states use the full green/red scale but are not captured in the static marketing surface.
• Responsive layout: all captured surfaces are desktop (1440px viewport). Mobile nav, single-column feature grid, and responsive hero sizing are not documented.
• Module ecosystem surface: the module integration marketplace (nuxt.com/modules) carries its own richer token set and filtering UI that is not represented here.
• Motion and transitions: the --default-transition-duration: .15s and --default-transition-timing-function: cubic-bezier(.4,0,.2,1) tokens are captured, but what they apply to (nav hover, CTA hover, card hover) is not fully documented.