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

# BYD · Design System

> Monochrome structure, cinematic electric-car imagery

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

BYD’s homepage pairs restrained monochrome navigation and content with cinematic, full-bleed vehicle photography. Spacious product and mission sections lead into a practical contact form and a compact dark footer.

## North star

Keep the interface monochrome and spacious so large, cinematic vehicle photography remains the page’s focal point.

## Overview

The page uses a restrained monochrome system so the vehicles and their environments carry the strongest colour. A nearly black header frames the white BYD mark and navigation; below it, a full-width hero photograph fills the viewport, with centered white model text and subtle carousel controls. The canvas is white, with pale blue-gray gradients behind isolated vehicle imagery and a clean, editorial mission split further down. Montserrat is used throughout, combining centered, medium-weight model headings with compact navigation, small utility links, and light form labels. The layout alternates between immersive full-bleed imagery and broad white content areas: a centered car showcase, a two-column mission feature, then a two-column contact form and lifestyle image. Comfortable section spacing and thin gray input rules keep the page open rather than card-heavy. Buttons are small, rectangular outlines or solid black controls, while the footer reverses to charcoal with muted links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light content areas, white logo and text over dark photography. |
| Graphite Ink | `#252728` | `--color-graphite-ink` | neutral | Primary text and charcoal footer or section surfaces. |
| Header Black | `#000000` | `--color-header-black` | surface | Dark navigation bands and other inverse surfaces. |
| Soft Ash | `#999999` | `--color-soft-ash` | neutral | Muted navigation and secondary text. |
| Cool Rule | `#c2c8d3` | `--color-cool-rule` | semantic | Thin input and interface borders. |
| Mist Blue | `#d9dee6` | `--color-mist-blue` | surface | Upper tone of the pale blue-gray section gradient behind product content. |
| Cloud Tint | `#f5f7fa` | `--color-cloud-tint` | surface | Lower tone of the pale product-section gradient; use as a subtle backdrop. |
| Footer Silver | `#e9e9e9` | `--color-footer-silver` | neutral | Small footer links and muted text on dark surfaces. |
| Mid Gray | `#7f7f7f` | `--color-mid-gray` | neutral | Secondary text captured in page details; keep subordinate to primary copy. |
| Midnight Slate | `#1a1d25` | `--color-midnight-slate` | neutral | Outlined secondary action text and borders. |
| Border Charcoal | `#4c4c4c` | `--color-border-charcoal` | neutral | Low-emphasis border detail; not a defining brand surface. |
| Pale Steel | `#c9cdd4` | `--color-pale-steel` | neutral | Subtle interface detail and borders. |
| Quiet Gray | `#a1a6af` | `--color-quiet-gray` | neutral | Low-contrast secondary text. |
| Button Black | `#0d0d0d` | `--color-button-black` | surface | Solid form submission button. |
| Slate Text | `#5c606a` | `--color-slate-text` | neutral | Muted supporting text and minor interface copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Header Black) · `--color-surface-2` → `#252728` (Graphite Ink) · `--color-text` → `#252728` (Graphite Ink) · `--color-text-muted` → `#999999` (Soft Ash) · `--color-text-subtle` → `#e9e9e9` (Footer Silver) · `--color-border` → `#c2c8d3` (Cool Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252728` | `#ffffff` | 15.01:1 | AAA |
| `#252728` | `#000000` | 1.4:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#252728` | 5.27:1 | AA |
| `#e9e9e9` | `#ffffff` | 1.21:1 | fail |
| `#e9e9e9` | `#000000` | 17.3:1 | AAA |
| `#e9e9e9` | `#252728` | 12.36:1 | AAA |

### Gradients

- `linear-gradient(180.57deg, rgb(217, 222, 230) 0.517%, rgb(245, 247, 250) 99.012%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montserrat | `--font-body` | webfont | 500, 400, 600, 700 | All page typography, including model headings, navigation, body copy, form controls, buttons, and footer links. | Montserrat |

- **Montserrat:** Use measured weights from 400 to 700. Keep tracking neutral; headings are mixed case, while navigation and utility text stay compact.

### Type scale — Minor Third (ratio ≈ 1.225, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 500 | 1.11 | 0 | — | Montserrat | Centered model name over the full-bleed hero image. |
| h2 | 32px | 600 | 1.22 | 0 | — | Montserrat | Major brand mission or feature heading. |
| h3 | 28px | 500 | 1.4 | 0 | — | Montserrat | Supporting section and product headings. |
| h4 | 20px | 600 | 1.3 | 0 | — | Montserrat | Compact subsection and form-area headings. |
| body | 16px | 500 | 1.38 | 0 | — | Montserrat | Mission copy, product descriptions, and form text. |
| caption | 14px | 500 | 1 | 0 | — | Montserrat | Small labels and supporting media text. |
| button | 13px | 400 | 1.69 | 0 | — | Montserrat | Short action labels on outlined and solid buttons. |
| nav | 14px | 500 | 1 | 0 | — | Montserrat | Primary header navigation and site-level links. |
| link | 12px | 400 | normal | -0.017em | — | Montserrat | Compact footer and legal links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 21, 24, 25, 30, 32, 40, 48, 50, 60 px.
- Section rhythm 60px · element gap 8px · card padding — · max content width 1312px.

A wide, comfortable-density page uses a measured maximum content width of 1312px, with the first vehicle carousel running full bleed. The header places the logo at left, navigation centrally, and global controls at right. Below the hero, a centered product display transitions to a two-column mission feature, then a two-column contact area. Sections are separated by generous vertical breathing room rather than cards; the footer returns to a three-column dark layout.

## Shape & elevation

- Radius: button `4px` · media `12px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat, with no measured shadow system. Use thin gray input rules, simple outlined controls, and clean section boundaries. Layer white model text and subtle carousel controls over hero photography; reserve the strongest surface contrast for the dark header and footer.

## Imagery

Photography is the primary visual expression: full-width vehicle scenes in the hero, a clean isolated sedan in the product showcase, and a lifestyle image beside the contact form. Keep images large and crisp, with natural environments and restrained overlays. Product photography supplies the page’s vivid blues and greens; the interface itself remains monochrome.

## Components

### Header navigation

Dark horizontal bar with the white BYD mark, centered primary links, and compact global controls aligned at the right.

### Hero carousel

Full-bleed vehicle photography with centered white model naming, discreet previous/next controls, and a small slide indicator.

### Product showcase

Centered BYD HAN imagery on a pale blue-gray gradient, paired with a restrained outlined Explore action.

### Mission feature

Two-column layout with a mission image on one side and heading, short copy, and an outlined Learn More action on the other.

### Contact form

Two-column contact area with compact labels and thin gray input rules beside a large lifestyle photograph; submit uses a solid near-black button.

### Footer

Charcoal three-column link area with muted legal and company links and a subtle copyright line.

### Measured component styles

- **Primary button** (“Submit”): background #0d0d0d · text #ffffff · radius 4px · padding 13px 32px · 500 14px Montserrat
- **Secondary button** (“Explore more”): transparent background · text #ffffff · border 1px solid #ffffff · radius 4px · padding 10px 32px · 400 13px Montserrat
- **Link** (“Privacy & Legal”): transparent background · text #e9e9e9 · radius 0px · padding 0px · 400 12px Montserrat
- **Input** (“Phone”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Montserrat
- **Navigation item** (“Models EV BYD HAN Explore About BYD News”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Montserrat

## Do

- Keep vehicle photography large and visually dominant.
- Use monochrome navigation and content surfaces.
- Set all interface typography in Montserrat.
- Use pale blue-gray gradients only behind product content.
- Keep controls simple, compact, and rectangular.
- Use generous whitespace between major sections.

## Don't

- Do not introduce a bright interface accent colour.
- Do not turn content sections into a dense card grid.
- Do not add heavy shadows or decorative effects.
- Do not compete with photography using oversized copy.
- Do not make footer links as prominent as primary navigation.
- Do not apply the pale gradient across every section.

## Agent prompt

Build a new BYD-style automotive page with a restrained monochrome interface and cinematic vehicle photography. Use Gallery White (#ffffff) as the main canvas, Header Black (#000000) and Graphite Ink (#252728) for dark navigation and footer surfaces, and Cool Rule (#c2c8d3) for fine form borders. Set all text in Montserrat, with compact navigation and medium-weight headings. Create a full-bleed image hero with centered white model text, then alternate a centered product display, a spacious two-column mission feature, and a contact form paired with lifestyle photography. Use Mist Blue (#d9dee6) and Cloud Tint (#f5f7fa) only for a subtle product backdrop. Keep buttons small and rectangular, prefer outlined actions with a solid near-black submit, avoid cards and shadows, and finish with a compact charcoal footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed vehicle carousel beneath a dark header, with centered model text. | Previous and next slide controls, Slide position indicator | Full-width car photography, White centered title, Dark navigation band |
| 2 | product-showcase | Single centered vehicle on a pale gradient with a compact action. | Explore product link | Isolated sedan image, Pale blue-gray gradient, Centered composition |
| 3 | feature-split | Two-column mission image and copy with a secondary action. | Learn More link | Editorial image-and-copy split, White canvas, Short supporting text |
| 4 | contact | Two-column form and lifestyle image, with the form on the left. | Contact preference selection, Region and topic fields, Privacy consent, Submit action | Thin input rules, Compact form labels, Solid dark submit button, Large lifestyle photograph |
| 5 | footer | Dark three-column link area above a subdued copyright line. | Company and model navigation, Legal links, Social links | Charcoal background, Muted light links, Subtle divider |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--el-border-radius-base: 4px;
--el-border-radius-circle: 100%;
--el-border-radius-round: 20px;
--el-border-radius-small: 2px;
--el-color-black: #000;
--el-color-danger-rgb: 245,108,108;
--el-color-error-rgb: 245,108,108;
--el-color-info-rgb: 144,147,153;
--el-color-primary-rgb: 64,158,255;
--el-color-success-rgb: 103,194,58;
--el-color-warning-rgb: 230,162,60;
--el-color-white: #fff;
--el-font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
--el-font-line-height-primary: 24px;
--el-font-size-base: 14px;
--el-font-size-extra-large: 20px;
--el-font-size-extra-small: 12px;
--el-font-size-large: 18px;
--el-font-size-medium: 16px;
--el-font-size-small: 13px;
--el-font-weight-primary: 500;
--el-transition-border: border-color .2s cubic-bezier(.645, .045, .355, 1);
--el-transition-box-shadow: box-shadow .2s cubic-bezier(.645, .045, .355, 1);
--el-transition-color: color .2s cubic-bezier(.645, .045, .355, 1);
--el-transition-duration: .3s;
--el-transition-duration-fast: .2s;
--el-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);
--el-bg-color: #fff;
--el-bg-color-overlay: #fff;
--el-bg-color-page: #f2f3f5;
--el-border: 1px solid #dcdfe6;
--el-border-color: #dcdfe6;
--el-border-color-dark: #d4d7de;
--el-border-color-darker: #cdd0d6;
--el-border-color-extra-light: #f2f6fc;
--el-border-color-hover: #c0c4cc;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-style: solid;
```

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