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

# NIO · Design System

> Quiet editorial design, led by cinematic electric-vehicle imagery

**Theme:** light · **Industry:** automotive · **Source:** https://www.nio.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._

NIO’s homepage pairs restrained, spacious typography with immersive photography of vehicles, services, and community spaces. A mostly white and pale-sage interface gives way to a deep black community feature and a compact, information-rich footer.

## North star

Let cinematic photography carry the emotion while a quiet, spacious interface keeps vehicle and service information clear.

## Overview

The visual system balances a quiet interface with image-led storytelling. White is the primary canvas for the vehicle hero, specifications, and service features; pale sage (#f2f3ed) marks the sustainability and brand-discovery sections. Black (#000000) creates a distinct, immersive band for NIO House and lifestyle content, while text and navigation reverse to white on dark imagery. BlueSkyStandard is used throughout in a clean sans-serif voice, with light-weight headings, compact navigation, and restrained body copy. Full-bleed vehicle photography opens the page, followed by a centered model showcase and broad image panels. Later features alternate generous white space with structured image-and-copy layouts. Buttons are understated, square-cornered outlines rather than filled promotional blocks. Hairline borders and minimal elevation preserve the editorial feel; spacing is generous between major stories but denser in the specification area and footer. Warm desert tones in the hero and other photographic colors belong to media, not the interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and reversed text on dark hero imagery and outlined calls to action. |
| Night Ink | `#000000` | `--color-night-ink` | neutral | Main text and the full-width dark NIO House and lifestyle sections. |
| Sage Mist | `#f2f3ed` | `--color-sage-mist` | surface | Soft background band behind Blue Sky Coming and the brand-discovery gallery. |
| Quiet Gray | `#7d7d7d` | `--color-quiet-gray` | semantic | Muted supporting copy and secondary text. |
| Silver Veil | `#a3a4a6` | `--color-silver-veil` | accent | Gradient stop used in section media treatment, not a defining interface color. |
| Cloud Silver | `#e8e9ec` | `--color-cloud-silver` | accent | Pale gradient stop in section media treatment, not a defining interface color. |
| Soft Charcoal | `#111111` | `--color-soft-charcoal` | semantic | Thin dark outline on light buttons and a small amount of dark interface detailing. |
| Footer Slate | `#5a5a5a` | `--color-footer-slate` | semantic | Secondary footer text against the light footer canvas. |
| Border Haze | `#939799` | `--color-border-haze` | semantic | Subtle border detail; use sparingly where a quiet divider is needed. |
| Caption Gray | `#8e8e8e` | `--color-caption-gray` | semantic | Low-emphasis supporting text and captions. |
| Deep Teal Ink | `#000f16` | `--color-deep-teal-ink` | semantic | Rare dark button detail; not a prominent brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f3ed` (Sage Mist) · `--color-surface-2` → `#000000` (Night Ink) · `--color-text` → `#000000` (Night Ink) · `--color-text-muted` → `#7d7d7d` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#111111` (Soft Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f3ed` | 18.82:1 | AAA |
| `#7d7d7d` | `#ffffff` | 4.12:1 | AA-large |
| `#7d7d7d` | `#f2f3ed` | 3.69:1 | AA-large |
| `#7d7d7d` | `#000000` | 5.1:1 | AA |
| `#ffffff` | `#f2f3ed` | 1.12:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(245.64deg, rgba(101, 103, 107, 0.6) 0%, rgba(179, 182, 191, 0.3) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BlueSkyStandard | `--font-body` | webfont | 400, 700, 300, 440, 420 | Site-wide navigation, headings, body copy, captions, and buttons. | Inter |

- **BlueSkyStandard:** Neutral sans-serif with regular body text, light secondary headings, bold small subheads, and compact navigation; no measured tracking or uppercase requirement.

### Type scale — Major Third (ratio ≈ 1.26, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 400 | 1.3 | 0 | — | BlueSkyStandard | Primary page or story heading, often paired with a large image. |
| h2 | 20px | 300 | 1.3 | 0 | — | BlueSkyStandard | Section headings and prominent story titles. |
| h3 | 18px | 700 | 1.6 | 0 | — | BlueSkyStandard | Subheads within service and feature content. |
| body | 14px | 400 | 1.3 | 0 | — | BlueSkyStandard | Supporting descriptions and explanatory copy. |
| caption | 12px | 400 | 1.58 | 0 | — | BlueSkyStandard | Small image captions and secondary details. |
| button | 14px | 400 | 1.43 | 0 | — | BlueSkyStandard | Short action labels in understated outlined controls. |
| nav | 12px | 400 | 3.67 | 0 | — | BlueSkyStandard | Compact top navigation labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 11, 12, 14, 16, 18, 20, 22, 36, 40, 60, 80 px.
- Section rhythm 80px · element gap 12px · card padding — · max content width 1280px.

The page alternates full-bleed media and contained content. The measured page max width is 1280px, with a 12-column model showcase and later two- and three-column feature arrangements. Centered headings introduce the model and brand-discovery areas; service stories align copy beside imagery. Major sections have generous vertical separation, while model specifications and the five-column footer are comparatively dense. Keep image blocks broad and let text sit in calm, uncluttered zones.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-out` on interactive elements.

The measured interface is mostly flat, with no defined shadow system or radius scale. Outlined buttons and restrained hairline borders provide the main component edges. Use image placement and the transition between white, sage, and black section bands for depth; avoid adding card shadows or decorative effects.

## Imagery

Photography and video dominate: cinematic electric vehicles in landscape settings open the page, while later images show cars, charging infrastructure, service facilities, and NIO Houses. Use broad, landscape-oriented crops, full-bleed media where the story calls for immersion, and contained paired imagery in feature sections. The warm desert palette in the hero and vivid colors in promotional artwork are photographic content, not interface colors.

## Components

### Top navigation

Compact BlueSkyStandard navigation over the hero image, using white labels and restrained spacing.

### Vehicle hero

Full-bleed vehicle media with white model lockup, a small outlined Learn more control, and thin slide indicators.

### Vehicle selector

Centered model-exploration section with specifications, seating options, and navigation controls in a dense grid.

### Outline CTA

Square-cornered, unfilled action control with a thin white or #111111 border depending on its background.

### Brand story panel

Image-led panel on #f2f3ed, pairing centered messaging with a broad landscape image.

### Service feature

Open white layout with copy and a large adjacent photograph; content is separated by whitespace rather than card elevation.

### Community feature

Black section with a large NIO House image, centered white copy, and minimal outlined action.

### Footer navigation

White, multi-column link directory with compact text, region and language selection, and small utility links.

### Measured component styles

- **Primary button** (“5 Seater”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px 14px · 440 12px BlueSkyStandard
- **Link** (“ES9 Flagship Executive SUV”): transparent background · text #000000 · radius 0px · padding 0px · 400 51.2px BlueSkyStandard
- **Card** (“Living Café Savor drinks, and enjoy your”): background #f2f3ed · text #000000 · radius 0px · padding 0px · 400 51.2px BlueSkyStandard
- **Navigation item** (“Products”): transparent background · text #ffffff · radius 0px · padding 0px 20px · 400 12px BlueSkyStandard

## Do

- Use #ffffff as the dominant canvas and preserve generous breathing room.
- Reserve #f2f3ed for soft brand-story and discovery bands.
- Use #000000 for the community feature and high-contrast text.
- Let full-width automotive photography lead major stories.
- Keep headings, navigation, and captions restrained and sans-serif.
- Use thin square-cornered outline buttons instead of filled promotional CTAs.

## Don't

- Do not treat warm hero-image colors as interface palette colors.
- Do not add shadows or rounded card styling absent from the measured system.
- Do not fill every section with copy or decorative UI.
- Do not make buttons visually heavier than the photography.
- Do not carry the black community treatment across the entire page.
- Do not use oversized, dense navigation or excessive text decoration.

## Agent prompt

Build a new NIO-style page with cinematic electric-vehicle photography and a calm editorial interface. Use Gallery White (#ffffff) as the main canvas, Sage Mist (#f2f3ed) for selected story bands, and Night Ink (#000000) for text and a distinct dark community section. Keep the interface flat: no invented shadows or rounded cards. Use BlueSkyStandard or a close sans-serif substitute, restrained headings, compact navigation, and short supporting copy. Structure content with broad image-led sections, paired copy-and-photo features, and generous whitespace; use contained grids for specifications and directories. Buttons should be small, square-cornered outlines in white or #111111 as contrast requires. Treat warm landscape hues and promotional artwork colors as image content, not brand UI colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed vehicle media with overlaid top navigation, model identity, and actions. | hero carousel, learn-more action, slide indicators | white overlay navigation, cinematic photography, outlined button |
| 2 | product-showcase | Centered heading above a dense, multi-column model and specification area. | previous and next controls, seating options, vehicle specifications | light canvas, contained grid, compact labels |
| 3 | feature-split | Pale-sage band with a centered wide image and centered supporting text. | brand story, learn-more action | #f2f3ed background, wide landscape image, centered copy |
| 4 | gallery | Centered introduction followed by an asymmetrical two-column image gallery. | story links, editorial browsing | pale-sage band, mixed image proportions, short captions |
| 5 | feature-grid | Three-column service presentation with copy and image-led content on white. | service exploration, learn-more action | white canvas, vehicle and charging imagery, open spacing |
| 6 | feature-grid | Three-column service presentation pairing concise copy with large photographs. | service exploration, learn-more action | white canvas, image-and-copy modules, generous whitespace |
| 7 | gallery | Black full-width band with large location photography arranged in a multi-column sequence. | browse locations, community discovery | black background, full-bleed photographs, reversed text |
| 8 | feature-grid | Black section with a two-column image-led content arrangement and centered story copy. | lifestyle exploration, community content | black canvas, large lifestyle imagery, white type |
| 9 | footer | White footer with five link columns, region selector, and compact utility row. | category navigation, region and language selection | white background, small muted links, multi-column directory |

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