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

# Yadea · Design System

> Electric mobility, framed with cinematic restraint

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

Yadea’s homepage pairs cinematic electric-motorcycle imagery with a restrained white-and-black interface and vivid orange brand accents. Product discovery, sustainability figures, and company news unfold in broad, media-led sections.

## North star

Let cinematic vehicle photography lead, and keep the surrounding interface quiet, sharp, and mostly monochrome.

## Overview

The visual strategy contrasts a clean, mostly white interface with immersive, full-bleed motorcycle photography. Near-black text carries the navigation, product labels, and editorial content, while Yadea orange is reserved for the logo and small brand signals rather than broad colour fields. Montserrat supplies a consistent geometric sans-serif voice: bold, compact headings establish hierarchy, while medium-weight body copy and small links keep supporting information quiet. The layout alternates cinematic product imagery with open white intervals, a sustainability story, and a pale-gray news band. Images do most of the expressive work, with riders and vehicles framed in motion or against scenic landscapes. Content sections feel spacious and restrained, while the footer shifts to a dark surface and dense, clearly grouped link columns. Borders and controls are flat and rectangular, keeping attention on the photography rather than decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and open product areas; also supports clean card backgrounds and light navigation elements. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary headings, body copy, and links on light sections; anchors the restrained interface. |
| Mist Gray | `#f6f6f6` | `--color-mist-gray` | surface | News and events background band, gently separating editorial cards from the white canvas. |
| Quiet Gray | `#8c8c8c` | `--color-quiet-gray` | semantic | Muted supporting text and secondary details where black would compete with primary content. |
| Yadea Orange | `#ff5f00` | `--color-yadea-orange` | brand | Brand signature in the logo and small link or border details; keep it an accent, not a large field. |
| Night Graphite | `#1f1f1f` | `--color-night-graphite` | surface | Footer surface, creating a strong closing contrast for grouped links and subscription controls. |
| Slate Copy | `#565656` | `--color-slate-copy` | semantic | Occasional subdued text; secondary measured shade, not a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Mist Gray) · `--color-surface-2` → `#1f1f1f` (Night Graphite) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#8c8c8c` (Quiet Gray) · `--color-border` → `#ff5f00` (Yadea Orange) · `--color-accent` → `#ff5f00` (Yadea Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6f6` | 19.43:1 | AAA |
| `#000000` | `#1f1f1f` | 1.27:1 | fail |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#1f1f1f` | 16.48:1 | AAA |
| `#8c8c8c` | `#ffffff` | 3.36:1 | AA-large |
| `#8c8c8c` | `#f6f6f6` | 3.11:1 | AA-large |
| `#8c8c8c` | `#1f1f1f` | 4.9:1 | AA |
| `#ff5f00` | `#ffffff` | 3.05:1 | AA-large |
| `#ff5f00` | `#f6f6f6` | 2.82:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montserrat | `--font-body` | webfont | 400, 500, 700, 600 | Primary interface and editorial type across navigation, headings, body copy, and links. | Montserrat |
| Montserrat-Medium | `--font-montserrat-medium` | webfont | 500 | Medium-weight display or product text where the measured page uses this separately named face. | Montserrat |

- **Montserrat:** Use measured regular, medium, semibold, and bold weights; headings are clean and untransformed, with no added tracking.
- **Montserrat-Medium:** Preserve a medium weight and compact heading line-height; avoid artificial letter spacing or uppercase transformation.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 600 | 1.22 | 0 | — | Montserrat | Hero product name and principal display headline. |
| h2 | 30px | 700 | 1.23 | 0 | — | Montserrat | Major section headings, including News & Events. |
| h3 | 29px | 500 | 1.02 | 0 | — | Montserrat-Medium | Product-feature titles and secondary display headings. |
| h4 | 22.5px | 700 | 1.23 | 0 | — | Montserrat | Supporting section or card headings. |
| body | 15px | 500 | 1.7 | 0 | — | Montserrat | Explanatory copy and supporting product or sustainability text. |
| caption | 12px | 400 | 2 | 0 | — | Montserrat | News dates, image notes, and fine-print details. |
| link | 12px | 500 | 1.25 | 0 | — | Montserrat | Compact navigation, calls to action, and editorial links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 8, 9, 11, 16, 18, 27, 28, 30, 32, 38, 56, 57, 75 px.
- Section rhythm 90px · element gap 11px · card padding — · max content width 720px.

Use a broad, media-first page structure with full-bleed hero and product imagery alternating with centered content and open white sections. The measured page max-width is 720px for constrained content; keep smaller editorial and footer groupings aligned consistently within their wider bands. Section rhythm is spacious, with clear transitions between product storytelling, sustainability, news, and footer. The news area uses a three-column card presentation; the footer organizes links into multiple columns. Keep the overall density comfortable and let blank space separate stories rather than relying on boxes.

## Shape & elevation

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

The interface is predominantly flat: measured cards have no shadow and no rounded corners, and the card treatment relies on spacing and background contrast. Use thin, rectangular outlines for outlined calls to action. Layer navigation and hero copy directly over photography with sufficient contrast; use the dark footer as a distinct closing plane rather than adding ornamental elevation.

## Imagery

Use high-quality, cinematic photography of electric motorcycles and riders, often captured in motion or against roads and natural landscapes. The hero is full-bleed with dark tonal treatment that keeps white navigation and copy legible. Product panels also use isolated vehicle photography against white, while sustainability content pairs scenic landscapes with simple data graphics. The measured palette’s cinematic darks largely come from photography, not interface colours.

## Components

### Overlay navigation

Place the logo and compact navigation over the full-bleed hero; use light navigation text and restrained icon controls.

### Hero call to action

Pair a product title and short supporting line with a compact, rectangular outlined link; measured CTA text is bold Montserrat.

### Product showcase

Alternate large riding imagery with isolated vehicle views on white, supported by concise product labels and learn-more links.

### Sustainability figures

Present three prominent impact metrics with simple orange line icons and short explanatory captions on a light background.

### News cards

Use a pale-gray section band and a three-column editorial card row with image, date, headline, and small category text.

### Multi-column footer

Use a #1f1f1f surface for grouped product and support links, social icons, and a compact email subscription control.

### Measured component styles

- **Link** (“Product”): transparent background · text #ffffff · radius 0px · padding 0px · 500 12px Montserrat
- **Input**: transparent background · text #eeeeee · radius 0px · padding 0px 0px 0px 7.5px · 400 10.5px Montserrat-Regular
- **Card** (“Sep . 14 , 2026 YADEA Partners with Spir”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 12px Montserrat

## Do

- Lead with a full-bleed, cinematic electric-motorcycle image.
- Keep interface surfaces predominantly white and typography black.
- Reserve Yadea Orange for small, high-signal brand details.
- Use Montserrat with clear weight-based hierarchy.
- Alternate immersive photography with calm, open content sections.
- Use pale gray to distinguish the news band and dark graphite for the footer.

## Don't

- Do not add gradients or decorative shadows to flat components.
- Do not make orange the dominant page background.
- Do not box every section or card with heavy borders.
- Do not compete with product photography using dense interface decoration.
- Do not round rectangular controls or cards without measured evidence.
- Do not use saturated colours as interface accents beyond the measured palette.

## Agent prompt

Build a new Yadea-style page around cinematic electric-mobility photography and a restrained interface. Use Gallery White (#ffffff) as the main canvas, Carbon Ink (#000000) for primary text, Mist Gray (#f6f6f6) for a quiet editorial band, and Night Graphite (#1f1f1f) for the footer. Treat Yadea Orange (#ff5f00) as a small logo or link accent, not a large colour block. Set type in Montserrat, using weight and scale for hierarchy rather than tracking or decorative effects. Give the hero and product stories room to breathe; alternate full-width imagery with clean content areas. Use simple rectangular outlined calls to action, flat news cards, and an organized multi-column footer. Keep the overall rhythm spacious and let photography carry the emotion.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed motorcycle photography with overlaid navigation, product copy, and slide controls. | hero carousel, overlay navigation, discover CTA | light text over dark image, brand logo, outlined rectangular CTA |
| 2 | other | Open, single-column introduction with generous white space. | section introduction | centered text, white canvas |
| 3 | product-showcase | Product-category navigation above a wide motorcycle image and product views. | category selection, learn-more link | full-width photography, isolated vehicle imagery, light background |
| 4 | feature-split | Two-part product feature presenting a motorcycle and concise performance copy. | feature explanation, learn-more link | product photography, white space, text-image pairing |
| 5 | other | Quiet single-column transition with no measured text or controls. | visual pause | open white space |
| 6 | stats | Three sustainability metrics arranged in a centered row. | impact statistics | orange line icons, large numerals, small captions |
| 7 | feature-split | Two-column sustainability story pairing a landscape image with supporting content. | sustainability narrative | scenic photography, fine-print note |
| 8 | content-feed | Centered section heading above a three-column news-card row on a pale-gray band. | editorial feed, learn-more link | image-led cards, date and category metadata, gray section background |
| 9 | footer | Dark full-width footer with link columns, subscription form, and social links. | site navigation, email subscription, social links | dark background, light link text, compact grouped columns |

## Source CSS custom properties (selected)

```css
--animate-duration: 1s;
--swiper-theme-color: #007aff;
--el-popup-modal-bg-color: #000;
--el-color-primary-rgb: 64,158,255;
--el-color-success-rgb: 103,194,58;
--el-color-warning-rgb: 230,162,60;
--el-color-danger-rgb: 245,108,108;
--el-color-error-rgb: 245,108,108;
--el-color-info-rgb: 144,147,153;
--el-font-size-extra-large: 20px;
--el-font-size-large: 18px;
--el-font-size-medium: 16px;
--el-font-size-base: 14px;
--el-font-size-small: 13px;
--el-font-size-extra-small: 12px;
--el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
--el-border-radius-base: 4px;
--el-border-radius-small: 2px;
--el-border-radius-round: 20px;
--el-border-radius-circle: 100%;
--el-transition-duration: .3s;
--el-transition-duration-fast: .2s;
--el-transition-function-ease-in-out-bezier: cubic-bezier(.645,.045,.355,1);
--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-color-white: #fff;
--el-color-black: #000;
--el-color-primary: #409eff;
--el-color-primary-light-3: #79bbff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;
--el-color-success: #67c23a;
--el-color-success-light-3: #95d475;
--el-color-success-light-5: #b3e19d;
```

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