---
title: "Nuxt design system"
variant: extended
source: https://nuxt.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/nuxt-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Nuxt · Design System

> Dark developer canvas, lit by Nuxt green.

**Theme:** dark · **Industry:** devtools · **Source:** https://nuxt.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Nuxt presents its Vue framework through a near-black interface, crisp typography, and restrained green highlights. Product UI previews, compact feature cards, community imagery, and sponsor grids give the long homepage a clear developer-focused rhythm.

## North star

Keep a near-black, sharply structured developer interface and reserve vivid Nuxt green for decisive emphasis.

## Overview

The page is built on a near-black canvas (#0a0a0a), with slightly lighter charcoal surfaces separating cards, media, and testimonial bands. White titles carry the main hierarchy; muted gray supports navigation and body copy, while Nuxt green marks the hero phrase, primary actions, small icons, and selected links. Inter handles most interface and reading text, paired with Outfit for the large hero display. The opening section uses a left-aligned message and CTA beside a dark code-editor preview, with a soft green atmospheric glow behind them. Below, the page alternates centered statements with compact grids, proof points, community portraits, and sponsor logos. Thin charcoal borders define boundaries without making cards feel heavy. Spacing is generous between major sections but dense within feature and sponsor grids, keeping the long page scannable and distinctly technical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#0a0a0a` | `--color-carbon-canvas` | neutral | Primary page background and the darkest code and command surfaces. |
| Graphite Surface | `#111111` | `--color-graphite-surface` | surface | Elevated card and testimonial band background against the main canvas. |
| Quiet Gray | `#a1a1a1` | `--color-quiet-gray` | neutral | Muted navigation, supporting copy, secondary links, and low-emphasis labels. |
| Border Charcoal | `#262626` | `--color-border-charcoal` | neutral | Fine card, section, media, and control outlines on dark surfaces. |
| Soft White | `#e5e5e5` | `--color-soft-white` | neutral | Secondary body text, badges, and labels that need more contrast than muted gray. |
| Display White | `#ffffff` | `--color-display-white` | neutral | Primary headings, selected interface text, and high-contrast command input text. |
| Nuxt Green | `#00dc82` | `--color-nuxt-green` | brand | Primary CTA fill, hero emphasis, brand mark, small icons, and highlighted navigation details. |
| Coral Link | `#fb848e` | `--color-coral-link` | accent | A sparse accent link colour; keep usage secondary to Nuxt green. |
| Vue Green | `#42b883` | `--color-vue-green` | accent | Occasional framework link accent, supporting Nuxt's Vue ecosystem identity. |
| Violet Link | `#a156fe` | `--color-violet-link` | accent | Rare link accent; do not treat as a dominant page colour. |
| Elevated Charcoal | `#171717` | `--color-elevated-charcoal` | surface | Badges, inset control details, and dark text placed on the green CTA. |
| Pale Gray | `#d4d4d4` | `--color-pale-gray` | neutral | Occasional supporting text, with limited visibility compared with the core text palette. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Carbon Canvas) · `--color-surface` → `#111111` (Graphite Surface) · `--color-surface-2` → `#171717` (Elevated Charcoal) · `--color-text` → `#ffffff` (Display White) · `--color-text-muted` → `#a1a1a1` (Quiet Gray) · `--color-text-subtle` → `#e5e5e5` (Soft White) · `--color-border` → `#262626` (Border Charcoal) · `--color-accent` → `#00dc82` (Nuxt Green) · `--color-accent-2` → `#fb848e` (Coral Link) · `--color-accent-3` → `#42b883` (Vue Green) · `--color-on-accent` → `#171717` (Elevated Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0a0a` | 19.8:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#a1a1a1` | `#0a0a0a` | 7.66:1 | AAA |
| `#a1a1a1` | `#111111` | 7.31:1 | AAA |
| `#a1a1a1` | `#171717` | 6.94:1 | AA |
| `#e5e5e5` | `#0a0a0a` | 15.72:1 | AAA |
| `#e5e5e5` | `#111111` | 14.99:1 | AAA |
| `#e5e5e5` | `#171717` | 14.23:1 | AAA |
| `#00dc82` | `#0a0a0a` | 10.9:1 | AAA |

### Gradients

- `linear-gradient(oklab(0.205 0 0 / 0.4) 0%, oklch(0.145 0 none) 100%)`
- `linear-gradient(to right bottom, oklab(0.625407 0.118768 -0.205557 / 0.1) 5%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right bottom, oklab(0.702529 -0.124301 0.044324 / 0.1) 5%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right bottom, oklab(0.74819 0.139298 0.0397298 / 0.1) 5%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Body copy, navigation, controls, links, and most interface text. | Inter |
| Outfit | `--font-display` | webfont | 500 | Large hero display and primary headline styling. | Outfit |
| ui-monospace | `--font-mono` | system | 400 | Code samples, install commands, and developer-oriented snippets. | JetBrains Mono |

- **Inter:** Use clean sans-serif forms, mostly regular to medium weights; keep case natural and tracking neutral.
- **Outfit:** Medium weight, tight negative tracking on display headlines; sentence case, with green emphasis on key words.
- **ui-monospace:** Use monospaced text at a readable compact scale; preserve code syntax colour and natural casing.

### Type scale — Custom (ratio ≈ 1.687, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | -0.025em | — | Outfit | Hero display headline, with tight tracking and a green-highlighted phrase. |
| h1 | 48px | 500 | 1 | -0.025em | — | Outfit | Large page or section heading, chiefly the hero title. |
| h2 | 20px | 400 | 1.6 | 0 | — | Inter | Supporting section headings and explanatory statements. |
| body | 15px | 400 | 1.5 | 0 | — | Inter | Feature descriptions, testimonials, and general explanatory copy. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter | Compact metadata, card details, labels, and secondary notes. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | Inter | Top-level navigation links. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline links and text-based calls to action. |
| code | 14px | 400 | 1.71 | 0 | — | ui-monospace | Install commands and code-editor examples. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 24, 32, 64, 72, 128 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1376px.

The homepage uses a broad centered content area with a measured maximum width of 1376px. Its opening hero is a two-column split: copy and actions on the left, a code-interface preview on the right. Later sections shift between centered headings, multi-column feature and proof grids, and image-led split layouts. Major sections have generous breathing room, while cards, sponsor tiles, and feature descriptions are compact. Thin horizontal boundaries and alternating charcoal bands create rhythm without introducing bright backgrounds.

## Shape & elevation

- Radius: button `6px` · input `6px` · card `8px` · media `8px` · badge `6px` · nav `4px` · link `6px` · xs `4px` · sm `6px` · md `8px` · lg `12px`
- Shadow `hairline` (card, section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.269 0 none) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (button, badge, input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.371 0 none) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.269 0 none) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-2` (button, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.786145 -0.174855 0.0792278 / 0.25) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page relies on flat dark surfaces and fine outlines rather than pronounced drop shadows. Cards and media are separated with charcoal hairlines; inset control edges add subtle definition. Layer the hero preview and atmospheric green glow over the canvas without creating a glossy or heavily raised effect.

## Imagery

The hero pairs its text with a framed code-editor interface, not a lifestyle photograph. Later imagery includes developer portraits, product-site screenshots, sponsor marks, and a subtle deployment illustration. Keep screenshots and logos inside dark, bounded frames; use portrait thumbnails as a consistent grid. Green glows and gradients are atmospheric accents behind the interface, while colourful partner assets remain confined to their own images.

## Components

### Hero actions

Pair a Nuxt Green primary button with a dark outlined secondary action and a compact install-command control.

### Code preview

Frame a dark editor mockup with a tab strip, file tree, and syntax-coloured code on a charcoal surface.

### Feature cards

Use compact, text-led cards with small green icons, bright titles, muted descriptions, and subtle boundaries.

### Proof points

Present download, star, and community metrics in dark tiles with concise labels and restrained icon accents.

### Module cards

Show package identity, short descriptions, ecosystem metrics, and small actions in a dense card grid.

### Sponsor tiles

Arrange partner marks in bordered dark cells grouped under compact sponsor-tier labels.

### Footer columns

Use muted link groups, a newsletter field, and a low-contrast legal and social row.

### Measured component styles

- **Primary button** (“Get started”): background #00dc82 · text #171717 · radius 6px · padding 8px 12px · 500 16px Inter
- **Secondary button** (“Copy command to install ui”): background #0a0a0a · text #e5e5e5 · radius 6px · padding 4px 8px · 500 12px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“2.8M”): transparent background · text #a1a1a1 · radius 0px · padding 0px · 400 16px Inter
- **Input** (“npm create nuxt@latest”): transparent background · text #ffffff · radius 6px · padding 8px 44px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“9.9M Monthly downloads”): background #111111 · text #e5e5e5 · radius 8px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Diamond Sponsors”): background #171717 · text #e5e5e5 · radius 6px · padding 4px 8px · 500 12px Inter · capitalize · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Docs”): transparent background · text #a1a1a1 · radius 0px · padding 0px · 500 14px Inter

## Do

- Use #0a0a0a as the dominant canvas.
- Reserve #00dc82 for primary actions and focused brand emphasis.
- Set major display headlines in Outfit and interface copy in Inter.
- Use charcoal surfaces and fine borders to distinguish cards.
- Keep explanatory text muted and easy to scan.
- Use dark-framed product imagery and compact logo grids.

## Don't

- Do not introduce large bright section backgrounds.
- Do not use green as the default colour for all text.
- Do not add heavy shadows or glossy card effects.
- Do not let partner artwork dictate the page palette.
- Do not use decorative display type for long body copy.
- Do not crowd major sections together.

## Agent prompt

Build a new Nuxt-style developer page on a #0a0a0a Carbon Canvas. Use #111111 Graphite Surface for cards and testimonial bands, and #262626 Border Charcoal for restrained outlines. Set display headlines in Outfit with tight tracking; use Inter for navigation, body copy, and controls, plus a monospace face for code. Apply #ffffff Display White to key headings and #a1a1a1 Quiet Gray to secondary copy. Reserve #00dc82 Nuxt Green for the primary CTA, brand details, and selected headline emphasis; use other accent colours sparingly. Structure content as a wide hero split with a dark product-interface preview, followed by scannable grids, proof points, image-led sections, and a quiet footer. Keep spacing generous between sections and compact inside cards. Prefer flat surfaces, hairlines, and crisp alignment over shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned copy and actions beside a code-editor preview. | Release announcement link, Primary and secondary CTA, Copyable install command | Green headline emphasis, Dark editor mockup, Soft green background glow |
| 2 | feature-grid | Company logos and a four-column feature grid on the dark canvas. | Scan feature summaries, Browse capability links | Compact icon-led items, Muted descriptions, Dark canvas |
| 3 | testimonials | Single centered testimonial in a subtly lighter full-width band. | Read endorsement, Identify attributed speaker | Quote styling, Small avatar, Fine horizontal boundaries |
| 4 | integrations | Centered introduction above three equal-width bordered cards. | Compare core technologies, Follow tool links | Logo-led cards, Subtle border, Small coloured link accents |
| 5 | stats | Centered heading with a three-part proof area and compact metric tiles. | Scan adoption metrics, Open-source contribution CTA | Dark metric cards, Icon and value pairing, Centered section heading |
| 6 | product-grid | Left-aligned introduction followed by a horizontally arranged module-card carousel. | Browse all modules, Page through module cards | Compact package cards, Green brand marks, Small pagination indicators |
| 7 | feature-split | Copy and deployment action on one side, technical illustration on the other. | Read deployment promise, Open deployment guide | Dark illustration field, Compact CTA, Minimal copy |
| 8 | team | Portrait grid paired with a left-aligned community message and social links. | Join the community, Visit social channels | Square portrait tiles, Two-column split, Compact social controls |
| 9 | gallery | Centered showcase heading above a horizontal gallery of website previews. | Browse featured sites, View all websites, Navigate gallery | Large framed screenshots, Side preview cards, Dark gallery surround |
| 10 | other | Centered introduction and actions above tiered grids of sponsor logo tiles. | Become a sponsor, View all sponsors | Tier labels, Outlined logo cells, Dense multi-column grid |
| 11 | footer | Three link columns beside a newsletter signup, followed by a compact legal and social row. | Explore site links, Subscribe to newsletter, Open social profiles | Muted text links, Compact input and button, Low-contrast footer divider |

## Source CSS custom properties (selected)

```css
--ui-bg: oklch(14.5% 0 none);
--ui-bg-muted: oklch(20.5% 0 none);
--ui-bg-elevated: oklch(20.5% 0 none);
--ui-bg-accented: oklch(26.9% 0 none);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/nuxt-com