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

# XPENG · Design System

> Cinematic motion, quiet precision

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

XPENG’s homepage pairs cinematic electric-vehicle imagery with a restrained, spacious editorial layout. Bright product-discovery sections give way to dark video moments, then return to a clean white canvas for brand stories and news.

## North star

Let cinematic automotive imagery create drama, while typography, color, and layout remain quiet and precisely controlled.

## Overview

The visual system balances crisp white space with immersive, full-bleed vehicle footage. The hero places large white messaging over a dark moving image, while the model selector uses a soft warm-gray band to distinguish product browsing from the surrounding white sections. Black and muted charcoal establish the primary text and inverse surfaces; restrained green appears as a sustainability link accent rather than a dominant brand wash. Figtree carries the page’s headings, body copy, and links, with compact, widely tracked uppercase button labels. Layouts alternate between centered editorial introductions, horizontal feature cards, image mosaics, and a three-column news feed. The measured page width is 1043px, with generous section gaps and low visual density. Thin pale borders and nearly square corners keep controls and cards precise; imagery, rather than gradients or decoration, supplies most of the atmosphere.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light-section backgrounds, and reversed hero text and controls. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary headings, navigation links, and dark section surfaces. |
| Warm Porcelain | `#f5f5f2` | `--color-warm-porcelain` | surface | Distinctive background band behind the model selector. |
| Stone Gray | `#63635c` | `--color-stone-gray` | semantic | Muted copy and secondary text on pale controls. |
| Leaf Signal | `#6d9427` | `--color-leaf-signal` | accent | Sparse accent for sustainability-related text and links. |
| Soft Divider | `#e6e6e1` | `--color-soft-divider` | neutral | Fine outlines on buttons, cards, and other restrained boundaries. |
| Graphite Gray | `#7f7f7f` | `--color-graphite-gray` | surface | Measured inverse surface tone; use sparingly for dark content areas. |
| Night Charcoal | `#0e0e0c` | `--color-night-charcoal` | neutral | Near-black button fills, outlines, and compact text details. |
| Midnight Blue | `#0a0a1a` | `--color-midnight-blue` | semantic | Minor measured text color; not a defining page-wide brand color. |
| Mist Gray | `#d9d9d9` | `--color-mist-gray` | neutral | Occasional subdued text detail. |
| Metal Silver | `#b5b6b8` | `--color-metal-silver` | semantic | Minor gray detail, including tones that may appear in imagery. |
| Road Gray | `#666666` | `--color-road-gray` | semantic | Sparse secondary text tone, not a principal surface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Carbon Ink) · `--color-surface-2` → `#f5f5f2` (Warm Porcelain) · `--color-surface-3` → `#7f7f7f` (Graphite Gray) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#63635c` (Stone Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e6e6e1` (Soft Divider) · `--color-accent` → `#6d9427` (Leaf Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f2` | 19.23:1 | AAA |
| `#000000` | `#7f7f7f` | 5.24:1 | AA |
| `#63635c` | `#ffffff` | 6.05:1 | AA |
| `#63635c` | `#000000` | 3.47:1 | AA-large |
| `#63635c` | `#f5f5f2` | 5.54:1 | AA |
| `#63635c` | `#7f7f7f` | 1.51:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f5f5f2` | 1.09:1 | fail |
| `#ffffff` | `#7f7f7f` | 4:1 | AA-large |

### Gradients

- `linear-gradient(rgba(30, 41, 49, 0), rgba(255, 255, 255, 0.5) 23%, rgb(255, 255, 255) 50%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree | `--font-body` | webfont | 400, 500, 600, 700, 650 | Primary typeface for display, headings, body copy, captions, links, and eyebrows. | Inter |

- **Figtree:** Mostly regular to semibold; display headings use tight negative tracking, while small eyebrows use tracked uppercase.

### Type scale — Perfect Fifth (ratio ≈ 1.467, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69.5px | 600 | 1.04 | -0.03em | — | Figtree | Large hero headline over full-bleed video. |
| h1 | 39.5px | 600 | 1.04 | -0.03em | — | Figtree | Primary section headings and prominent page titles. |
| h2 | 29px | 400 | 1.2 | 0 | — | Figtree | Secondary editorial and feature-section headings. |
| h3 | 23px | 400 | 1.4 | 0 | — | Figtree | Feature card and supporting content headings. |
| body | 15px | 400 | 1.55 | -0.01em | — | Figtree | Introductory copy, descriptions, and explanatory text. |
| caption | 11px | 400 | 1.55 | 0 | — | Figtree | Compact image, card, and supporting labels. |
| button | 9px | 400 | normal | 0.14em | uppercase | Arial | Small uppercase labels on compact controls. |
| link | 14px | 400 | 0.78 | 0 | — | Figtree | Navigation and inline content links. |
| eyebrow | 8px | 500 | 1.4 | 0.14em | uppercase | Figtree | Small tracked uppercase section or category labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 6, 7, 8, 9, 10, 12, 14, 16, 17, 19, 20, 23, 35, 46, 87, 108 px.
- Section rhythm 108px · element gap 10px · card padding — · max content width 1043px.

The measured content max width is 1043px, set within a spacious page that alternates full-bleed media with contained editorial content. The hero is left-aligned; the vehicle selector is centered in a warm-gray band. Feature cards flow horizontally, followed by a large media-led story area, centered brand storytelling, a three-column news feed, and a multi-column footer. Sections have generous vertical separation and low information density.

## Shape & elevation

- Radius: button `1px` · card `1px` · media `3px` · xs `1px` · sm `3px`
- Shadow `hairline` (button): `rgba(2, 4, 9, 0.67) 0px 2px 0px 0px`
- Shadow `lg` (section): `rgba(0, 0, 0, 0.12) 0px 7.24479px 25.3568px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Keep the interface mostly flat. Pale hairline borders define card and button edges, and controls have nearly square corners. A subtle shadow may support an elevated section or control, but imagery and dark overlays—not layered panels—provide depth. Avoid conspicuous gradients and heavy card shadows.

## Imagery

Use cinematic, photorealistic vehicle video and photography as the principal visual material. The opening footage fills the viewport, with dark overlays supporting white copy. Product and technology cards use wide image crops, while brand storytelling combines varied landscape and portrait-like tiles in an orderly mosaic. Some imagery depicts robotics and flying vehicles; these are page-specific story content, not a separate illustration style.

## Components

### Hero navigation

Compact navigation overlaid on the hero footage, with light logo and links plus small outlined utility actions.

### Full-bleed hero

Viewport-filling video with large white left-aligned display text and a fine outlined CTA.

### Model selector

Warm-gray product band with a centered title, compact model choices, and a prominent vehicle presentation.

### Feature cards

Horizontal image-led cards with pale 1px borders, restrained labels, and minimal framing.

### Story mosaic

Editorial image grid pairing a larger sustainability tile with smaller technology and experience stories.

### News feed

Three-column news cards with photographic thumbnails, compact summaries, and a restrained learn-more control.

### Footer links

Multi-column navigation on white, grouped by models, discovery, services, and contact.

### Measured component styles

- **Primary button** (“P7+”): background #ffffff · text #63635c · border 1px solid #e6e6e1 · radius 1.44896px · padding 7.2px 15.9px · 400 9.05599px Arial · uppercase
- **Secondary button** (“L03”): background #0e0e0c · text #ffffff · border 1px solid #0e0e0c · radius 1.44896px · padding 7.2px 15.9px · 400 9.05599px Arial · uppercase
- **Link** (“L03”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Figtree
- **Card** (“01 XPILOT ASSIST Intelligent driving ass”): transparent background · text #0e0e0c · border 1px solid #e6e6e1 · radius 1.44896px · padding 0px · 400 11.5917px Figtree

## Do

- Use full-bleed cinematic media for the hero.
- Keep primary content on white or warm-gray fields.
- Reserve green for occasional sustainability accents.
- Use Figtree for headings, copy, and links.
- Keep borders pale, thin, and understated.
- Give sections generous breathing room.

## Don't

- Do not use a saturated, colorful interface palette.
- Do not turn every section into a raised card.
- Do not crowd the spacious editorial layouts.
- Do not apply green as a dominant background.
- Do not add decorative gradients without a clear need.
- Do not let UI compete with vehicle photography.

## Agent prompt

Build a new automotive brand page with XPENG’s restrained, cinematic visual language. Use Gallery White (#ffffff) for the main canvas and Warm Porcelain (#f5f5f2) for a distinct product-selection band. Keep Carbon Ink (#000000) typography crisp, Stone Gray (#63635c) secondary, and Leaf Signal (#6d9427) limited to occasional sustainability accents. Use Figtree throughout, with compact tracked uppercase button labels. Anchor the page in full-bleed, darkened vehicle photography, then alternate spacious editorial sections, image-led feature cards, a story mosaic, and a compact news grid. Constrain reading content to the measured 1043px maximum width where appropriate, while allowing hero media to span the viewport. Prefer pale hairlines and flat surfaces over heavy shadows. Keep controls nearly square, content airy, and interface decoration subordinate to imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with compact overlaid navigation and left-aligned copy near the lower edge. | Hero CTA, Scroll cue | Dark media overlay, White display type, Outlined button |
| 2 | product-showcase | Single centered selector within a full-width warm-gray band. | Model selection, Drag to rotate | Muted background band, Compact model tabs, Centered vehicle display |
| 3 | feature-grid | Introductory copy beside a horizontal row of image-led feature cards. | Feature discovery, Card navigation | White canvas, Horizontal cards, Image-first tiles |
| 4 | video | Large media-led feature with a dark full-width video scene. | Immersive viewing | Dark video surface, Centered overlay title, Image cards below |
| 5 | gallery | Centered editorial heading above a structured multi-image mosaic. | Story browsing, Linked editorial tiles | White canvas, Asymmetric image grid, Small overlay labels |
| 6 | content-feed | Centered introduction above a three-column news-card row. | News browsing, Learn-more action | Three-column grid, Photo thumbnails, Simple outlined control |
| 7 | footer | Compact footer with multiple navigation columns and a narrow legal and social row. | Grouped navigation, Social links | White background, Small muted labels, Column link lists |

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