BYD DESIGN.md

Design System Inspiration of BYD

Overview

Visual Theme & Atmosphere

BYD makes new-energy vehicles, with the Chinese passenger-car offering organised into the Dynasty (王朝) and Ocean (海洋) series and both hybrid and battery-electric technology routes. Its current corporate history dates its beginnings as a rechargeable-battery producer in Shenzhen to 18 November 1994 and its entry into the automotive industry to 2003. The automotive brand timeline records Dragon Face family design in 2017 and a new identity for the domestic passenger-car market in 2021. Corporate history, automotive brand timeline.

Its official automotive design writing connects its vehicles to Eastern aesthetics and balancing materials with craft. The measured website expresses the product through large vehicle photography, a white BYD wordmark, compact navigation over the image, and spacious light sections for model families and owner communities. These web observations describe this captured surface; the vehicle-design writing supplies the brand context. Design aesthetics.

The brand's evolution remains centred on its technology: the current timeline moves from ending combustion-only vehicle production in 2022 to the Super e-Platform in 2025 and second-generation Blade Battery and flash-charging technology in 2026. This gives a reference builder a concrete subject for the visual emphasis: show vehicles and their technology clearly, then give visitors direct routes to explore and arrange a test drive. Current timeline.

The measured homepage is the mainland Chinese edition (byd.com/cn), returned without a regional redirect and with HTML lang="zh-CN".

Brand Narrative

The official corporate page states a mission of meeting aspirations for a better life through technological innovation, a vision of cooling the Earth by one degree, and the proposition “科技、绿色、明天”. The automotive brand page adds Eastern aesthetics to that technology story. Keep those statements tied to their sources; the measured neutral web controls provide practical support for the vehicle imagery. Corporate mission and proposition, automotive design writing.

Principles

• Documented brand foundation: technology and innovation are named in BYD's corporate development philosophy. Corporate page.
• Guidance from the captured interface: use vehicle imagery for the large visual statements, precise labels for actions, and borders or underlines for measured interaction feedback.

Personas

No user-research or persona documentation was verified.

Colors

The captured interface uses restrained neutrals around colourful vehicle imagery. These are live surface values, not an official corporate colour specification.

The reference's primary colour is the observed action fill #1a1d25; it does not establish BYD's corporate logo colour.

Keep alpha values intact. Header text is rgba(255, 255, 255, 0.85) and the test-drive border is rgba(255, 255, 255, 0.55). Hover makes that button's background and border #ffffff and its text rgba(0, 0, 0, 0.95). Footer links in the survey use rgba(255, 255, 255, 0.55).

The most frequent paragraph foreground is rgba(0, 0, 0, 0.55) (three paragraphs); one further paragraph uses #9ba1af. The paragraph foreground remains in prose because its dominant value has alpha. No opaque replacement is chosen.

The census contains Element Plus's default blue --el-color-primary: #409eff and Swiper's --swiper-theme-color: #007aff. Both are excluded from this palette. Their presence does not document a BYD brand accent.

Typography

Official product use: no first-party typography guideline naming the website's product face was verified.

Live-loaded: PoppinsZN normal 400 and 500 appear in the survey's loaded-face census. The body and sampled button declare PoppinsZN first. Navigation and the header test-drive label are 13px/500 with 20px line-height. The two 48px action links have 16px/400 visible labels. The community link has a 14px/400 visible child label inside a 16px/400 anchor; use the child metric for its text.

Official distributed assets: the website's @font-face declarations point to same-origin OTF files under /static_material/byd/cn/fonts/: PoppinsZN-Regular.otf, PoppinsZN-Medium.otf, PoppinsZN-SemiBold.otf, and PoppinsZN-Bold.otf. This is evidence of first-party webfont serving. No redistribution licence was verified, and the drafting worker did not retrieve font binaries separately.

Declared-only: PoppinsZN 600 and 700 are declared but absent from the loaded-face list, so no specimen is assigned to either weight. The declared swiper-icons and VideoJS faces belong to UI libraries and are also absent from that loaded list. The raw fallback stack is preserved in the verification notes without promoting its entries to brand faces.

Unresolved: glyph coverage, the provenance of the PoppinsZN name, and any relationship to another font family were not established. The survey has no sampled h1 face. Substitute: none chosen.

Layout

At the measured 1440×1000 viewport, the header places the logo centrally, navigation to the left, and search/region/account/test-drive utilities to the right over the hero image. The page then presents model-family entries, live-event content, owner-community stories and an app area before the footer. The full-page capture is 1440×5837px.

The root computes --header-height: 56px and --gutter: 64px. The Dynasty and Ocean image links each measure 602.5px wide in the survey. Community sections pair a text column with large imagery. Use these observed structures and the measured control padding; no global spacing scale or mobile breakpoint is established here.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile layout and breakpoints are unverified.

Elevation & Depth

The six measured controls all have box-shadow: none at rest. The action links rely on a border and a changing pseudo-element fill, and the two text links reveal a thin underline. No elevation scale was verified.

Motion & Easing

The header test-drive button and both 48px action links compute transition: all 0.3s ease 0s. The navigation link, community link and image-card anchors compute all 0s ease 0s on the element itself; their pseudo-elements and descendants are separate measurement subjects. The raw transition strings and the observed underline transforms are preserved in the verification notes. No authored cubic-bezier curve or carousel timing is promoted to a brand token.

Components

All six controls were inspected on the desktop homepage. Five show an authored hover/pressed change and are included in the structured components.

The image-only Dynasty card is a separate /cn/dynasty-home link: 602.5×521.9px, zero radius/padding, transparent on white, no border or shadow. Its computed 16px/400 and #000000 foreground are inherited values rather than a visible label. It remains a prose observation because hover and pressed had no measured change and focus supplied only a browser ring. The hover crop shows a circular arrow cursor whose DOM source was not identified, so the computed result does not establish absence of all visual feedback.

No visible search input was present in the survey's interactive list.

States

Hover was confirmed by :hover=true for all six targets, and pressed by :active=true. Every pressed comparison matched its hover result without an additional settled change.

• Test drive: transparent → #ffffff background; 85% white → 95% black text; 0.5px 55% white → solid white border. Real keyboard focus at Tab 5 had no computed change within self, pseudo-elements and three ancestor levels.
• Live more / Dynasty entry: the anchor stays transparent. Its ::before changes from transparent with a 1px black border to #1a1d25 fill and border. The visible child label changes from #1a1d25 to #ffffff.
• Live navigation: text becomes fully white and a white 26×1px ::after underline scales horizontally from zero to full width.
• Community link: text remains #000000; a black 108×1px ::after underline scales horizontally from zero to full width.
• Dynasty image card: no hover/pressed change across self, pseudo-elements, eight descendants including two images, and three ancestor levels. This statement is limited to computed styles and recorded DOM attributes; it does not cover siblings, canvas, video pixels or external sprite contents.

The five anchors acquire outline-style: auto under keyboard focus; this is the browser's own indication. No brand focus token is created. No disabled variant was measured.

Do's and Don'ts

• Give vehicle imagery substantial space and use compact navigation over the hero.
• Use the measured 4px radius and padding for the 33px header button and 48px content actions.
• Preserve the alpha of white header labels and borders over imagery.
• Reproduce the action links' ::before layer and their visible child-label colour changes.
• Keep framework palette defaults out of the brand palette, and browser auto outlines out of brand focus tokens.
• Use only the verified loaded weights for a live font specimen. Substitute: none chosen.

Voice & Tone

The homepage uses direct action labels: “预约试驾” (book a test drive), “查看更多” (view more), and “了解更多信息” (learn more). Its community copy invites visitors to join shared journeys. These are observed copy patterns from this page, not a verified editorial style guide.

Agent Prompt Guide

“Build a mainland-Chinese BYD-style automotive landing page around a large vehicle hero and a centred white wordmark. Use the measured 56px header and 64px gutter variables, a white canvas, and #fbfbfb for the live-review surface. Use verified PoppinsZN 400/500 only where available; leave an unavailable face unresolved. Make the content action a transparent 48px-high link with 4px radius, 12px 36px padding and #1a1d25 text. Put its 1px black border on ::before; on hover and press, fill that layer #1a1d25 and make the visible label #ffffff.”