---
name: Nuxtlabs
description: "A prime example of a developer-focused, content-first design that prioritizes readability and trust over visual flair."
version: alpha

colors:
  background: "#0f1225"
  primary: "#e3e8ef"
  secondary: "#b4bcd0"
  neutral: "#6b7394"
  bg-soft: "#1a2035"
  line: "rgba(107, 115, 148, 0.4)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.02em"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist, dark-mode developer blog post announcing the acquisition of NuxtLabs by Vercel.

*A quiet, confident announcement blog post for a developer audience.*

## Colors

High-contrast dark mode with cool blue undertones, prioritizing readability and focus.

- **Background (`#0f1225`)** — uses `bg` token
- **Primary text (`#e3e8ef`)** — uses `ink` token
- **Secondary text (`#b4bcd0`)** — uses `ink-soft` token
- **Muted (`#6b7394`)** — uses `muted` token
- **Borders (`rgba(107, 115, 148, 0.4)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Vertical rhythm is established through consistent paragraph spacing and list item gaps.

## Elevation & Depth

- Borders: Minimal borders, primarily used for subtle separation or list item markers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** No buttons visible.
- **card:** No cards visible.
- **chip:** No chips visible.
- **input:** No inputs visible.
- **hero:** Text-based hero with large grainy logo marks, a prominent heading, and introductory paragraphs.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```