--- version: alpha name: Nuxt description: "Dark-first developer authority — a near-black navy canvas (`#010518`) and the luminous Nuxt green (`#00dc82`) strike a balance between technical precision and forward-leaning modernity, with Public Sans's geometric neutrality making every line of code feel inevitable." colors: # Surface / canvas — dark navy system background: "#010518" # logo background; deepest page canvas surface: "#0f172b" # oklch(0.208 0.042 265.755) — raised panels, header fill surface-elevated: "#1d293d" # oklch(0.279 0.041 260.031) — cards, code blocks, tab backgrounds surface-deep: "#020618" # oklch(0.129 0.042 264.695) — code editor interior, deepest wells # Ink / text ink: "#e2e8f0" # oklch(0.929 0.013 255.508) — primary text on dark canvas ink-secondary: "#90a1b9" # oklch(0.704 0.040 256.788) — nav links, secondary copy ink-on-light: "#0f172b" # dark text for use on green/light button surfaces # Brand accent — the signature Nuxt green primary: "#00dc82" # --ui-color-primary; the unmistakable Nuxt green primary-hover: "#00bb6f" # live hover state from extraction primary-container: "#075132" # dark tinted green for badge/tag backgrounds, approx on-primary: "#0f172b" # dark navy on bright green (high contrast) # Partner accents — Vue-sourced ecosystem colors accent-vue: "#42b883" # Vue's green; used in ecosystem/compatibility signals accent-purple: "#a156fe" # modules/ecosystem tag — purple contrast accent accent-rose: "#fb848e" # community/warmth accent — salmon-rose # Interactive states focus-ring: "#00dc82" # green focus ring matching primary accent text-hover: "#e2e8f0" # oklch white shift on nav link hover # Semantic success: "#00dc82" # green = success; same as primary success-light: "#d9fbe8" # --ui-color-success-100; tinted success bg error: "#d45656" # --twoslash-error-color from extraction # Borders border: "#1d293d" # oklch(0.279 0.041 260.031) — primary dividers, card edges border-mid: "#314158" # oklch(0.372 0.044 257.287) — inset/inner ring borders # Shadow tints shadow-soft: "#000000" # rgba(0,0,0,0.05) — subtle drop shadow base typography: display-hero: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif" fontSize: 72px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.8px display: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.2px heading-section: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.3px heading-sub: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0px body-large: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px body: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px code: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.71 letterSpacing: 0px label-sm: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0px caption: fontFamily: "'Public Sans', 'Public Sans Fallback', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px 5xl: 128px rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 8px 12px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 8px 12px borderColor: "{colors.border-mid}" borderWidth: 1px button-secondary-hover: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 6px 10px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-white: backgroundColor: "#ffffff" textColor: "{colors.ink-on-light}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 8px 12px card: backgroundColor: "{colors.surface-elevated}" borderColor: "{colors.border}" borderWidth: 1px rounded: "{rounded.lg}" padding: 24px card-hover: backgroundColor: "{colors.surface}" borderColor: "{colors.border-mid}" input: backgroundColor: "{colors.surface-deep}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 8px 44px borderColor: "{colors.border-mid}" borderWidth: 1px input-focus: borderColor: "{colors.primary}" outlineColor: "{colors.focus-ring}" outlineWidth: 2px badge-green: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-purple: backgroundColor: "#2a1c4a" # dark purple tint, approx on dark canvas textColor: "{colors.accent-purple}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-neutral: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 8px code-block: backgroundColor: "{colors.surface-deep}" textColor: "{colors.ink}" typography: "{typography.code}" rounded: "{rounded.md}" padding: 16px 20px borderColor: "{colors.border}" borderWidth: 1px tab-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label-sm}" rounded: "{rounded.sm}" padding: 6px 12px tab-inactive: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.label-sm}" padding: 6px 12px nav-bar: backgroundColor: "{colors.background}" borderBottom: 1px solid {colors.border} height: 72px padding: 0px 24px --- # Nuxt Design System ## Overview Nuxt's visual identity is built on a fundamental inversion of developer tool convention. Where competitors default to light canvases, Nuxt commits to darkness: the homepage opens on `{colors.background}`, a near-black deep navy that reads less as void and more as depth — the infinite space of a late-night terminal session, made beautiful. Against this canvas, the signature `{colors.primary}` green strikes with extraordinary luminosity, a single calibrated frequency of light that functions simultaneously as brand identifier, interactive anchor, and promise of forward momentum. The typographic backbone is Public Sans, a geometric sans-serif born from US government web standards but adopted here for its clean neutrality and excellent screen rendering at small sizes. Used at tight negative tracking for display text and comfortably open for body copy, it signals precision without pretension — the voice of a framework that takes craftsmanship seriously but doesn't lecture about it. Code blocks rendered in system monospace complement it, grounding the documentation aesthetic in the terminal vernacular developers already know. What elevates Nuxt's design beyond the typical developer dark-mode aesthetic is its restraint with color. The `{colors.primary}` green earns every pixel it occupies: CTAs, active tab states, syntax highlighting for framework-specific tags, the logo itself. A secondary palette of `{colors.accent-vue}` (Vue's green, signaling ecosystem kinship), `{colors.accent-purple}`, and `{colors.accent-rose}` appears as connector tissue for modules and community signals, never competing with the primary accent for hierarchy. Everything lives in service of legibility and trust. **Key Characteristics:** - Dark navy canvas (`{colors.background}`) as the default — not a color-scheme preference but a design stance - Single luminous accent (`{colors.primary}`) with extraordinary contrast ratio against the dark ground (~9:1) - Public Sans at 700 weight and negative tracking (`-1.8px` for display-hero) creates confident, tightly-wound headlines - Three-tier surface system: `{colors.background}` (page) → `{colors.surface}` (panels/header) → `{colors.surface-elevated}` (cards) → `{colors.surface-deep}` (code wells) - Border system uses subtle `{colors.border}` lines rather than shadows for depth separation - `{rounded.sm}` (6px) is the dominant radius — applied to buttons, inputs, tabs, and code blocks - Inset box-shadow rings replace traditional CSS borders for focus/active states, preserving layout integrity - Motion is snappy: 150ms with `cubic-bezier(0.4, 0, 0.2, 1)` on all interactive color transitions - Three ecosystem accents (`{colors.accent-vue}`, `{colors.accent-purple}`, `{colors.accent-rose}`) function as category signals, not UI chrome - Monospace code blocks (`{typography.code}`) are first-class UI citizens, not afterthoughts - `{colors.ink}` is a warm blue-white rather than pure white — softer on dark backgrounds during long reading sessions - Status badges carry semantic color from the same accent palette, maintaining coherence across content types ## Colors ### Primary Canvas - **Background** (`{colors.background}`): The deepest layer — the page itself. Near-black navy rather than true black; reads as refined depth rather than absence of light. - **Surface** (`{colors.surface}`): Raised panels, sticky header, interactive hover fills. Lifted ~10% luminance from background. - **Surface Elevated** (`{colors.surface-elevated}`): Cards, dropdown panels, tab backgrounds. The mid-layer that gives cards their volume. - **Surface Deep** (`{colors.surface-deep}`): Code editor interiors, the deepest inset wells. Slightly darker than background for embedded content areas. ### Ink / Text - **Ink** (`{colors.ink}`): Primary text. A warm blue-white at `oklch(0.929 0.013 255.508)` — the slight blue cast keeps it readable on dark navy without the eye-strain of pure `#ffffff`. - **Ink Secondary** (`{colors.ink-secondary}`): Navigation links, secondary copy, metadata. At ~70% luminance relative to ink, creates a clear hierarchy without harsh contrast stepping. - **Ink on Light** (`{colors.ink-on-light}`): Text on the green primary button surface. Deep navy provides maximum contrast on the bright green. ### Brand Accent - **Primary** (`{colors.primary}`): The Nuxt green. Applied to CTAs ("Get started"), active tab indicators, the logo mark, syntax-highlighted `` tags, and focus rings. The single brightest element on any page. - **Primary Hover** (`{colors.primary-hover}`): Darkened green for button hover states — enough shift to signal affordance, maintaining recognizable green identity. - **Primary Container** (`{colors.primary-container}`): Dark-tinted green background for green badges and success states — carries the accent's hue without its full brightness. ### Ecosystem Accents - **Vue Green** (`{colors.accent-vue}`): Inherited from Vue.js; used in ecosystem compatibility signals and focus outlines for Vue-mode contexts. - **Purple** (`{colors.accent-purple}`): Module and plugin tagging — distinguishes community packages from core. - **Rose** (`{colors.accent-rose}`): Community and warmth signals — softer than error red, warmer than neutral. ### Semantic & Interactive - **Focus Ring** (`{colors.focus-ring}`): Green 2px outline on keyboard-focused interactive elements — consistent with brand accent. - **Error** (`{colors.error}`): TypeScript error color from extraction; warm red-orange for type annotations and validation. - **Success Light** (`{colors.success-light}`): Pale green background for success banners — high-contrast with dark body text. - **Border** (`{colors.border}`): Primary dividing line between surface layers. - **Border Mid** (`{colors.border-mid}`): Inset shadow rings on buttons/inputs; slightly lighter for inner-ring hierarchy. ## Typography ### Font Family - **Primary**: `Public Sans`, with fallbacks: `Public Sans Fallback, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans` - **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` — system stack, no web font loaded for code - **OpenType Features**: No explicit `font-feature-settings` or variable axes detected; Public Sans is loaded as a static subset. The self-hosted fallback family (`Public Sans Fallback: Segoe UI`) suggests the font is loaded via a custom font-face stack tuned for FOIT prevention. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | Homepage H1 — "The Full-Stack Vue Framework". 72px/700 weight at -1.8px tracking. | | `display` | Section heroes and major feature headers. 48px/700. | | `heading-section` | H2-level content section titles in docs and landing pages. 28px/600. | | `heading-sub` | H3-level card titles and feature callout headings. 20px/600. | | `body-large` | Marketing copy paragraphs and doc lede text. 20px/400. | | `body` | Standard documentation prose and UI copy. 16px/400. | | `body-medium` | Emphasized body text — feature descriptions, module summaries. 16px/500. | | `nav-link` | Primary navigation anchors in header and sidebar. 16px/400. | | `button-ui` | All button labels, tab labels, interactive control labels. 16px/500. | | `code` | Inline and block code; system monospace at 14px/400. | | `label-sm` | Metadata labels, file tree paths, small UI annotations. 14px/500. | | `caption` | Status badges, tags, category chips. 12px/600 uppercase-ready. | ### Principles - Tight negative tracking at display sizes (`-1.8px` for 72px text) creates compact, high-authority headlines without requiring extra boldness - Weight climbs from 400 (body) to 500 (UI elements, medium emphasis) to 600/700 (headings) — a three-stop scale, never overly bold - Monospace code is a first-class typographic voice alongside sans-serif prose — the two weights share visual harmony via similar cap heights - No italic usage detected — emphasis is expressed through weight and color, not oblique variants - Leading at 1.5–1.6 for body text and 1.0 for display text creates dense, confident layouts without crowding prose ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Nuxt's spacing is generous at the macro level — section padding in the `{spacing.5xl}` (128px) range creates the breathing room that makes the dark canvas feel like designed space rather than missing content. At the micro level (4px, 6px, 8px), spacing in buttons and badges is compact, keeping UI elements dense and control-like. ### Grid & Container - Max content width: approximately 1280px - Single breakpoint detected at 1024px separating mobile from desktop layouts - Two-column hero layout: text-left, interactive demo/code pane right - Feature sections use CSS grid with 3–4 columns at desktop, stacking to single column on mobile - Doc pages follow a three-pane layout: sidebar navigation, main content area, on-page outline ### Whitespace Philosophy - Dark canvases demand generous whitespace — tight spacing would read as cramped and dense rather than efficient - Section-level vertical rhythm at `{spacing.5xl}`–`{spacing.4xl}` (96–128px) creates clear breathing space between thematic areas - Inter-component gaps default to `{spacing.lg}`–`{spacing.xl}` (24–32px), providing room without wasting the canvas ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Body text, inline UI, nav links | | Border Layer (Level 1) | `1px solid {colors.border}` | Cards, panels, dividers — structural separation | | Inset Ring (Level 2) | `box-shadow: {colors.border-mid} 0 0 0 1px inset` | Button resting state, input resting state | | Elevated (Level 3) | `1px solid {colors.border-mid}` + `{colors.surface-elevated}` bg | Dropdown menus, active card hover | | Focus Ring | `2px outline {colors.focus-ring}` with `2px offset` | Keyboard focus indicator, green accent ring | **Shadow Philosophy**: Nuxt eschews traditional box-shadow drop shadows almost entirely — depth is communicated through surface color steps, not light simulation. The dominant "elevation" pattern is an inset box-shadow ring (a 1px inner border) that defines button and input boundaries without disturbing the dark-canvas aesthetic. Where shadow would normally appear on light-background sites, Nuxt instead uses a slightly lighter surface (`{colors.surface-elevated}`) as the card background, letting the background-to-surface color step do the depth-signaling work. This keeps the design flat and structural rather than skeuomorphic. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Code blocks in some contexts, structural dividers | | `xs` | 4px | Small chips, tiny badges, inline tokens | | `sm` | 6px | Buttons, inputs, search bar, navigation icons, tab pills — the dominant radius | | `md` | 8px | Tab groups, search form container, tablist wrapper | | `lg` | 12px | Feature cards, module cards, screenshot frames, logo cards | | `pill` | 9999px | Tag badges, version chips, fully rounded indicators | The system uses `{rounded.sm}` (6px) as its default interactive radius — consistently applied across buttons, inputs, search, icon containers, and dropdown items. This is softer than a sharp square but avoids the bubbly quality of pill-everything systems. Cards step up to `{rounded.lg}` (12px) for more visual warmth. The pill shape is reserved for small status/version badges where the enclosed shape signals "this is a label, not a control." ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button Variants - **`button-primary`** — `{colors.primary}` green fill with `{colors.on-primary}` navy text at `{rounded.sm}`. The primary CTA. Used for "Get started," module installs, key conversion points. Its brightness immediately draws the eye against the dark canvas. - **`button-secondary`** — `{colors.surface}` navy fill with `{colors.border-mid}` inset ring, `{colors.ink}` text. Used for secondary actions like "Nuxt in 100 seconds" alongside the primary. Matches the surface elevation rather than floating above it. - **`button-ghost`** — Transparent background, `{colors.ink-secondary}` text, no border. Applied to toolbar icon buttons and low-hierarchy actions. Gains a `{colors.surface}` background on hover. - **`button-white`** — White fill with `{colors.ink-on-light}` text. Appears in dark-section contexts where the inverted-color CTA needs light anchoring (e.g., module listing sections with alternate backgrounds). ### Cards Feature cards and module cards use `{colors.surface-elevated}` background with `1px solid {colors.border}` edges and `{rounded.lg}` radius. On hover, background shifts to `{colors.surface}` and border lightens to `{colors.border-mid}`, using color alone for hover feedback without transform or shadow. ### Inputs The search input uses `{colors.surface-deep}` background with an inset box-shadow ring (`{colors.border-mid}`) that defines edges without a traditional border property. Text is `{colors.ink}`. On focus, the ring transitions to `{colors.focus-ring}` green — a clear, accessible focus signal consistent with the brand accent. ### Badges / Tags Green badges use `{colors.primary-container}` background with `{colors.primary}` text, signaling success or "included." Purple badges at `{colors.accent-purple}` signal third-party module context. Neutral badges use `{colors.surface}` background with `{colors.ink-secondary}` text for version numbers and platform labels. Version pills (e.g., "v4.4.7" in the nav) use `{rounded.sm}` to match the button language. ### Navigation Top navigation bar sits on `{colors.background}` with a `1px solid {colors.border}` bottom edge separating it from the page. Height is 72px. Nav links default to `{colors.ink-secondary}` and shift to `{colors.ink}` on hover via a 150ms color transition. The logo wordmark embeds the `{colors.primary}` green mark. The GitHub star count badge uses the secondary button treatment. ### Code Blocks Code blocks occupy `{colors.surface-deep}` wells with monospace text, `{rounded.md}` corners, and `1px solid {colors.border}` edges. Nuxt-specific syntax tags (``, ``) are highlighted in `{colors.accent-vue}` — deliberately using Vue's green rather than Nuxt's primary to maintain semantic color separation between framework ownership and brand identity. ## Do's and Don'ts ### Do - Use `{colors.primary}` for exactly one primary CTA per view — preserve its stamp quality by never applying it to more than one button - Apply `{rounded.sm}` (6px) to all interactive controls (buttons, inputs, search, icon buttons) for visual consistency - Use the three-tier surface stack (`{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}`) to communicate depth without shadows - Render all code and terminal content in the system monospace stack at `{typography.code}` — never use a sans-serif font for code - Use `{colors.ink-secondary}` for secondary text and let `{colors.primary}` green serve as the inline link color in doc prose - Apply `{colors.focus-ring}` as the keyboard focus indicator — 2px solid outline with 2px offset, matching the brand accent - Use `{colors.accent-vue}`, `{colors.accent-purple}`, and `{colors.accent-rose}` as category signals in module/ecosystem contexts only - Set display headlines at `-1.8px` to `-1.2px` letter-spacing to achieve the tight, confident heading feel at large sizes ### Don't - Don't use `{colors.primary}` as a background fill for large areas — it's an accent, not a canvas color - Don't introduce border-radius values outside the defined scale — in particular, don't use 16px+ radius on interactive controls - Don't add drop shadows to cards or panels — elevation is communicated through surface color steps, not light simulation - Don't render UI text in the monospace stack — code and prose are distinct voices; mixing them flattens hierarchy - Don't use pure white (`#ffffff`) for body text on dark backgrounds — `{colors.ink}` with its slight blue cast is significantly easier to read over long sessions - Don't override `{colors.accent-purple}` or `{colors.accent-rose}` into primary actions — they belong to the ecosystem signal layer only - Don't use the `{rounded.pill}` shape on buttons — pill buttons don't exist in this system; only badges and version chips get fully rounded treatment - Don't apply font-weight 300 or lighter — the lightest used weight is 400; the system skews medium-to-bold throughout --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Single-column layout; hero text stacks above code pane; nav collapses to hamburger; font sizes step down ~20% | | Tablet | 768–1023px | Narrow two-column available for some feature sections; sidebar navigation collapsed behind toggle | | Desktop | 1024px+ | Full two-column hero; three-column feature grids; persistent sidebar in docs | | Large Desktop | >1280px | Content width caps at ~1280px; margins grow symmetrically; code demo pane expands further | ### Touch Targets - Interactive controls (buttons, nav items, icon buttons) maintain minimum 40px height at all breakpoints - The hamburger menu toggle and icon bar items use 44px tap targets on mobile - Card tap areas cover the full card surface, not just the title ### Collapsing Strategy - Hero: text column stacks above the interactive code demo pane; demo pane collapses to a static tab at the smallest breakpoint - Navigation: top nav links collapse into a full-screen mobile menu; logo and icon cluster remain visible in header - Feature grids: 3-column → 2-column → 1-column at the single 1024px breakpoint - Code blocks: maintain full horizontal scroll rather than wrapping; no responsive reflow inside code content ### Image Behavior - Partner logos (Louis Vuitton, Vans, Blizzard etc.) in the social proof strip scale with viewport via `max-width: 100%` - The file-tree / code-editor demo panel is viewport-constrained on mobile; horizontal scrolling rather than truncation --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Brand accent: `{colors.primary}` - Surface: `{colors.surface}` - Elevated surface: `{colors.surface-elevated}` - Border: `{colors.border}` - Focus ring: `{colors.focus-ring}` ### Example Component Prompts - "Build a Nuxt-style hero section: dark navy background `{colors.background}`, white headline 72px/700 weight with `{typography.display-hero}` spec at -1.8px tracking. Left-aligned text block with tagline in `{colors.ink-secondary}`. Two buttons: primary in `{colors.primary}` with `{colors.on-primary}` text at `{rounded.sm}`; secondary with `{colors.surface}` fill and `1px solid {colors.border-mid}` inset ring. Below buttons, a terminal-style install block: `{colors.surface-deep}` background, `{typography.code}`, monospace text at `{colors.ink}`, `{rounded.sm}` radius, 8px 16px padding." - "Create a Nuxt module card: `{colors.surface-elevated}` background, `1px solid {colors.border}` edge, `{rounded.lg}` radius, 24px padding. Card title in `{typography.heading-sub}` at `{colors.ink}`. Description in `{typography.body}` at `{colors.ink-secondary}`. Bottom row: a purple badge using `{colors.accent-purple}` text on dark-purple tint background, `{rounded.pill}` shape, 4px 10px padding, `{typography.caption}` size. On hover: background shifts to `{colors.surface}`, border to `{colors.border-mid}`." - "Render a Nuxt-style primary button: `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` size/weight, `{rounded.sm}` radius, 8px 12px padding. Hover state: background `{colors.primary-hover}`. Focus state: 2px solid `{colors.focus-ring}` outline with 2px offset. Transition: `color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)`." - "Build a Nuxt documentation navigation bar: `{colors.background}` background, 72px height, `1px solid {colors.border}` bottom edge, 24px horizontal padding. Logo wordmark with `{colors.primary}` green icon mark. Nav links in `{typography.nav-link}` at `{colors.ink-secondary}`, shifting to `{colors.ink}` on hover via 150ms color transition. Right cluster: search button (magnifier icon), theme toggle, GitHub star counter as a ghost button." - "Create a Nuxt code block: `{colors.surface-deep}` background, `{rounded.md}` radius, `1px solid {colors.border}` edge, 16px 20px padding. Monospace text at `{typography.code}` and `{colors.ink}`. Framework-specific tags (``, `