# Nuxtlabs · Design system migration spec

> Source: https://nuxtlabs.com  ·  Curated by OpenDesign  ·  en

> A prime example of a developer-focused, content-first design that prioritizes readability and trust over visual flair.

## 1. Identity DNA

The design system functions as a quiet, confident announcement blog post for a developer audience. Like a well-drafted technical memo, it prioritizes clarity and directness, using a minimalist dark-mode interface to frame the acquisition of Nuxtlabs by Vercel with focused readability.

**One-liner:** A minimalist, dark-mode developer blog post announcing the acquisition of NuxtLabs by Vercel.
**Keywords:** Open Source · Developer · Acquisition · Community · Framework
**Analogy:** A quiet, confident announcement blog post for a developer audience.

## 2. Color

The palette is a high-contrast dark mode with cool blue undertones, built on a deep navy background and populated by cool gray and white text. This chromatic strategy deliberately avoids vibrant accent colors to maintain focus and ensure readability of dense content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0f1225` | main background |
| `--bg-soft` | `#1a2035` | card background |
| `--ink` | `#e3e8ef` | body text |
| `--ink-soft` | `#b4bcd0` | secondary text |
| `--muted` | `#6b7394` | placeholder |
| `--line` | `rgba(107, 115, 148, 0.4)` | divider |

**Color principle:** High-contrast dark mode with cool blue undertones, prioritizing readability and focus.

The underlying principle is functional contrast over decorative color, making the information itself the primary visual element.

## 3. Typography

The type system relies exclusively on the Geist sans-serif family for both display and body text, establishing a clean, technical voice. Generous paragraph line-height and minimal bold weight usage ensure the typographic rhythm remains steady and readable against the dark background.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.2 | 500 | -0.02em | Headings and main titles |
| body | 16px | 1.6 | 400 | 0 | Main paragraph text |

**Type rules:**
- Geist is used for both display and body text, maintaining a consistent technical aesthetic.
- Paragraphs have generous line-height (1.6) to ensure readability of dense text on a dark background.
- Bold weight (700) is used sparingly for emphasis within paragraphs.

## 4. Spacing

A consistent vertical rhythm is established through deliberate paragraph spacing and list item gaps, creating a measured reading pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is established through consistent paragraph spacing and list item gaps.

## 5. Surfaces

Surfaces are defined by a flat, matte dark ground with no shadows or glass effects. Minimal borders are reserved for subtle separation, ensuring the content remains the sole focus of depth.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal borders, primarily used for subtle separation or list item markers.

## 6. Layout

The layout skeleton is a single column of centered text with generous margins, a structure borrowed from long-form editorial. This generous framing allows the content to breathe and guides the eye down a single, focused reading path.

- **Container max:** 720px
- **Paragraph max:** 680px
- **Grid:** 1 columns, gutter 24px
- **Breakpoints:** 768 px

**Skeleton:** Single-column centered text layout with generous margins for maximum readability.

## 7. Motion & Interaction

Motion is handled with restraint, applied only to smooth, functional transitions on interactive elements like link hovers. The philosophy is to provide subtle feedback without introducing visual noise or complex animation that would distract from the content.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color and text-decoration transitions on interactive elements.

- **Hover:** Subtle color transition on hover for interactive elements.
- **Click:** Standard click behavior.
- **Transition:** Smooth transitions for color, background-color, border-color, and text-decoration.
- **Keyboard:** Standard keyboard navigation.

## 8. Voice & Don'ts

The editorial voice is professional, sincere, and community-focused, using direct, declarative headlines and informative in-text links. It explicitly avoids salesy language, jargon-heavy explanations, and any aggressive calls to action.

- **Tone:** Professional, sincere, and community-focused.
- **Headline style:** Direct, declarative, and celebratory.
- **CTA style:** Informative links within the text.
- **Avoid:** Salesy language / Jargon-heavy technical explanations / Aggressive calls to action

### Don'ts
- ❌ Don't use a white background — screenshot shows a dark navy/blue-black background.
- ❌ Don't use a serif font for body text — screenshot shows a clean sans-serif (Geist) throughout.
- ❌ Don't add colorful accents or bright buttons — screenshot relies on monochromatic white/gray text on dark.
- ❌ Don't use a multi-column grid layout — screenshot shows a single-column centered text layout.
- ❌ Don't add heavy drop shadows or glassmorphism effects — screenshot uses a flat, matte surface.
- ❌ Don't use a justified text alignment — screenshot uses left-aligned text.

The system deliberately omits complex components, decorative elements, and multi-column layouts to uphold its core commitment to a content-first, readable experience.

## System Prompt (paste into AI tool)

```
This is a minimalist, dark-mode developer blog post announcing the acquisition of NuxtLabs by Vercel. The design prioritizes readability and focus with a centered single-column layout. Key colors are a deep navy background (#0f1225) and cool gray/white text (#e3e8ef). The typography uses the Geist sans-serif family for all text, creating a clean, technical aesthetic. The system should avoid colorful accents, complex layouts, or any non-sans-serif typography. Critical don'ts: don't use a white background, don't use serif fonts, don't add colorful accents or buttons, don't use multi-column layouts, don't use heavy shadows, and don't use justified text.
```