XPeng DESIGN.md

Design System Inspiration of XPeng

Overview

Visual Theme & Atmosphere

XPeng builds intelligent electric vehicles and presents an expanding technology ecosystem around them. Its company timeline records its founding in August 2014. The company's 2021 brand renewal made exploration explicit: the sharpened X comes from the X in “eXplorer”, extends outward and also suggests spread wings. The announcement connects that mark with intelligence, quality, exploration, a contemporary attitude and sustainability. Company history, brand-renewal announcement.

That story has continued to evolve. In its September 2026 announcement, XPeng describes itself as an explorer of mobility in the physical-AI world and a global embodied-intelligence company, linking cars, Robotaxi and humanoid robots through a shared technology base. The measured homepage places AI cars, AI robots, flying cars, its AI chip and Robotaxi in the navigation. Current company positioning, live homepage.

The visual expression on this homepage combines expansive vehicle and landscape imagery, white and pale-grey sections, black outlined or filled actions, widely tracked action labels, and a yellow-green interaction accent, #a4ce4c. The X mark is white over the opening photograph. These are observations of the captured site, rather than additional corporate brand principles. The measured edition is the Chinese homepage at www.xiaopeng.com/; it did not redirect, although its HTML declares lang="en".

Primary tasks are to explore models, order a vehicle, book a test drive, and find charging, stores and after-sales information. Live homepage.

Brand Narrative

The company's own history connects a 2014 beginning with a 2021 exploration-led brand renewal. Its 2026 writing extends that exploration into physical AI and embodied intelligence. The outward-reaching X and the current mix of vehicles, robots and mobility technology give that continuity concrete expressions. The homepage's monochrome controls and small green signals are the measured web expression of this story. History, 2021 renewal, 2026 positioning.

Principles

The 2021 brand announcement explicitly identifies five core values: intelligence, quality, exploration, a contemporary/cool attitude, and sustainability. Treat these as the stated values of that renewal. The present reference's layout and interaction recipes come from the live homepage; the announcement does not prescribe their CSS. Brand announcement.

Personas

No user-persona research was opened; no persona is inferred from the capture.

Colors

The live census contains 58 computed root custom properties: 56 --xpm-* theme properties and two --swiper-* library properties. The XPM theme is deployed in a stylesheet on XPeng's asset host; upstream library authorship is unresolved. Swiper defaults are excluded from the reference palette. The action accent below is measured on controls, independently of the root theme's named primary colour. Deployed theme, action styles.

Keep alpha values intact. The theme's --xpm-color-primary is #000000e6, and --xpm-color-primary-icon / --xpm-color-success are #8cb654; neither is the measured action green. The Charging label becomes rgba(0, 0, 0, 0.6) on hover in the white header. Twelve census backgrounds are rgba(255, 255, 255, 0.3). These observations do not establish a universal semantic colour system.

Typography

Font-file declarations are visible in the global stylesheet; the display selector appears in the component stylesheet. A filename is retained as a filename, not used to rename the loaded alias. No specimen is supplied for HEHE85W or any unverified platform face. Substitute: none chosen.

Measured typography is precise even where the rendered family remains unresolved:

• L05 action links: 16px / 400, 24px line height, 2.56px letter spacing; padding 11px 32px.
• Header test-drive link: 16px / 400, 17.6px line height; padding 8px 16px.
• Charging navigation: 16px / 400, 35px line height, normal letter spacing.
• Phone field: 16px / 400, 24px line height, normal letter spacing.
• News card: outer anchor 12px / 400, 16.8px line height; visible h4 label 18px / 400.

The root XPM theme exposes font sizes 9–18px and line-height values 18, 20, 23, 24 and 26px. Those are live theme values; they are not evidence that every size is rendered in this viewport.

Layout

At 1440 × 1000, a 56px fixed header sits over the opening model image. The page then presents a model showcase, charging and after-sales information, a company-image section, news, stores, a test-drive form and an app-download section. The captured full-page height is 9094px. These are desktop homepage observations. Live homepage.

The three news anchors measure 418px wide at x positions 61, 511 and 961px, giving 32px gaps and 61px outer margins in this capture. Their loaded image area is 418 × 314px. Action spacing is carried by measured padding: 11px vertically / 32px horizontally, with the smaller header action using 8px / 16px. The exported spacing names describe those specific padding axes and the news-column gap; they do not define a general spacing ramp.

Responsive Behavior

Mobile rendering and interaction were not measured; the browser evidence is desktop 1440 × 1000 only.

Elevation & Depth

All six selected controls have computed box-shadow: none. The order action's black fill is an empty child layer, while the green hover fill is a pseudo-element; depth here comes from layered photography and fills rather than a measured control-shadow scale. The fixed header reports z-index 99. No broader elevation scale was verified.

Motion & Easing

The five links report the raw computed self transition opacity 0.2s ease-in-out 0s. The phone input reports all 0s ease 0s. The state probe recorded longest transitions of 300ms for the two L05 links and news card, 200ms for Charging, and 0ms for the input; its initial header-focus reading encountered 800ms while the later header pointer readings encountered 300ms. These are per-control settle observations, not a proposed motion scale.

The fetched action stylesheet separately declares transition:width .3s on the green pseudo-element and width:102% on hover. That is stylesheet evidence, not a separately captured raw computed pseudo-element transition. Action stylesheet.

Components

The measured action targets are links, including links nested inside button wrappers. The anchor carries the visible label, border and 4px radius; the wrapper's own radius is 0px.

The action arrow is a 16 × 16px background image in ::after. The raw probe records an image-URL change; the SVG's internal artwork was outside the state comparison. This reference does not infer an SVG path change.

XPM radius properties are 4px (s), 6px (sm), 8px (m) and 12px (l). The selected action links use 4px; the phone input and news-card anchor use 0px. No card-radius role is inferred from the other root values.

States

The five measured links have a keyboard-focus outline of rgb(0, 95, 204) auto 1px off 1px. It is browser-owned and generates no brand focus token. The news image also loads when scrolled into view during the Tab walk; its persistent opacity/source/size changes are lazy loading, not a focus treatment.

The phone field has an authored green bottom rule under Tab focus. After blur, its empty value triggers the red validation rule. The later hover/pressed samples change that already-invalid rule from rgb(236, 78, 57) to rgb(204, 204, 204); those are retained as raw observations and are omitted from the component's initial-state recipe.

Hover and press snapshots matched the corresponding pseudo-classes at sampling time. Every pointer crop subsequently reported that the state stopped matching during capture, so the raw computed snapshots carry those claims; the crops cannot independently establish the settled pointer appearance. Disabled states were not measured.

Do's and Don'ts

To reproduce this measured surface:

• Use large vehicle imagery, a restrained white/grey canvas and the measured green interaction accent.
• Preserve the 44px action height, 4px radius, tracked 16px labels and layered fill behaviour.
• Keep a news card's visible title typography separate from its smaller outer-anchor typography.
• Preserve the phone field's bottom-only focus rule.
• Do not use Swiper's blue default as XPeng's interaction accent, turn Chrome's auto outline into a brand token, or assign the display font to unresolved UI text.

These are implementation directions derived from the capture, not an official XPeng design manual.

Voice & Tone

The homepage pairs aspirational company language with short action labels: “未来出行探索者”, “了解L05”, “立即订购” and “预约试驾”. The company page uses exploration as its organising idea and states a mission of becoming an intelligent technology enterprise loved by users worldwide. This describes the opened copy, without claiming a separate tone-of-voice guide. Company page, homepage.

Agent Prompt Guide

“Build a desktop vehicle homepage with a 56px fixed navigation header, large photographic model presentation, white sections and pale #f9f9f9 app-download surface. Use #000000 ink, #666666 paragraph foreground and #a4ce4c for the measured interaction accent. Place 44px action links with 4px corners, 11px 32px padding and 16px/400 text at 24px line height with 2.56px tracking. Reproduce the green pseudo-element fill on hover and 0.8 link opacity when pressed. Use noto-sans only for the verified display role; the measured UI family remains unresolved. Give the empty phone field a 1px green bottom rule on keyboard focus.”