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

# Zeekr · Design System

> Quiet luxury, framed around electric mobility

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

Zeekr’s global homepage pairs cinematic automotive imagery with restrained typography and generous negative space. Alternating white, warm stone, and near-black sections keep the vehicle range and brand story in focus.

## North star

Let cinematic vehicle photography lead, and keep the surrounding interface quiet, spacious, and strictly neutral.

## Overview

The page uses a restrained palette to let full-bleed vehicle imagery carry most of the visual energy. Near-black hero and footer sections frame the experience, while white and warm stone-gray bands distinguish the brand introduction, model showcase, and news feed. Typography is clean and unembellished: ZeekrHeadline gives large headings a refined editorial feel, while ZeekrText handles navigation, body copy, and controls. The first viewport centers a large, pale headline over dramatic photography; subsequent sections shift to quieter, more open layouts. A broad warm-gray model area groups large vehicle images with concise names and pill-shaped black Learn More buttons. News appears as a three-column card row on white. The layout favors wide content, generous section breaks, and simple alignment over decorative UI. Borders are subtle, shadows are minimal, and color beyond the measured neutrals primarily comes from photography rather than interface accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary text, black CTA fills, and thin button outlines. |
| Warm Stone | `#ebe8e3` | `--color-warm-stone` | surface | Broad model showcase band and warm-toned news card surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, introduction section, and news-feed background. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted supporting text, especially in the footer. |
| Night Charcoal | `#0f0f0f` | `--color-night-charcoal` | surface | Hero and footer section backgrounds. |
| Ivory Glow | `#fff4e2` | `--color-ivory-glow` | neutral | Light navigation and text on dark surfaces; also used on the consent CTA. |
| Silver Haze | `#939393` | `--color-silver-haze` | neutral | Low-emphasis footer detail; a supporting neutral, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ebe8e3` (Warm Stone) · `--color-surface-2` → `#0f0f0f` (Night Charcoal) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#fff4e2` (Ivory Glow) · `--color-border` → `#000000` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ebe8e3` | 17.18:1 | AAA |
| `#000000` | `#0f0f0f` | 1.1:1 | fail |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#ebe8e3` | 4.7:1 | AA |
| `#666666` | `#0f0f0f` | 3.34:1 | AA-large |
| `#fff4e2` | `#ffffff` | 1.09:1 | fail |
| `#fff4e2` | `#ebe8e3` | 1.12:1 | fail |
| `#fff4e2` | `#0f0f0f` | 17.61:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ZeekrText | `--font-body` | webfont | 400 | Navigation, body copy, links, card copy, and buttons. | Inter |
| ZeekrHeadline | `--font-display` | webfont | 400 | Display, page headings, and editorial headlines. | DM Sans |

- **ZeekrText:** Regular weight; understated sentence case for interface copy, with no measured tracking or uppercase treatment.
- **ZeekrHeadline:** Regular weight with open, clean forms; use larger scale for the centered hero and restrained title styling elsewhere.

### Type scale — Custom (ratio ≈ 1.803, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82px | 400 | 1.1 | 0 | — | ZeekrHeadline | Oversized centered hero statement over full-bleed imagery. |
| h1 | 48px | 400 | 1.1 | 0 | — | ZeekrHeadline | Primary page-level headline where a section needs strong emphasis. |
| h2 | 24px | 400 | 1.4 | 0 | — | ZeekrHeadline | Section headings such as the model introduction and latest news. |
| body | 14px | 400 | 1.4 | 0 | — | ZeekrText | Supporting copy, model descriptions, dates, and footer text. |
| nav | 16px | 400 | 1.4 | 0 | — | ZeekrText | Header links and language selector. |
| link | 16px | 400 | 1.4 | 0 | — | ZeekrText | Text links and calls to action within news and model content. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 8, 12, 16, 20, 24, 32, 40, 48, 60, 120 px.
- Section rhythm 120px · element gap 12px · card padding — · max content width 1392px.

Use a wide, spacious canvas with measured page max width of 1392px and a single-column flow for the major bands. The hero is full bleed, with centered headline placement; the model showcase shifts into a broad image-led grid, and news resolves into three columns. Keep text alignment simple and section transitions clear. The measured section gap is 120px, with a 12px element gap and a 4px base spacing unit; maintain a low-density rhythm rather than crowding content.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.043) 0px 2px 0px 0px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0.016) 0px 2px 0px 0px`
- Shadow `xl` (section): `rgba(0, 0, 0, 0.08) 0px -6px 16px -8px, rgba(0, 0, 0, 0.05) 0px -9px 28px 0px, rgba(0, 0, 0, 0.03) 0px -12px 48px 16px`
- Motion: standard transition `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The interface is predominantly flat, with section color and photography providing depth instead of layered cards. Buttons use subtle hairline shadows and thin dark outlines. Model cards have no measured radius or shadow, while the hero image itself supplies the strongest contrast and layering. Reserve the larger shadow treatment for section transitions only when needed.

## Imagery

Use large, high-quality automotive photography as the main visual material: cinematic hero framing, outdoor vehicle scenes, architectural backdrops, and close model views. Images are broad and rectangular, with little visible decoration or framing. The page's blue, sky, landscape, and vehicle tones come from photography, not interface accents. Avoid illustrative or decorative graphics as substitutes for the photographic vehicle focus.

## Components

### Global navigation

Light navigation sits over the dark hero image, with compact links at the left, centered Zeekr wordmark, and language control at the right.

### Cinematic hero

Full-bleed dark automotive image with a large centered pale headline; preserve image contrast behind the text.

### Model showcase

Warm Stone (#ebe8e3) band presenting vehicle imagery in a spacious grid with concise model labels and black pill-shaped Learn More buttons.

### News cards

Three-column editorial feed on Gallery White (#ffffff), combining date, vehicle image, headline, and a small text link.

### Pill CTA

Black-filled, thin black-outlined button with white or ivory text, ZeekrText at 16px, and a fully rounded 9999px radius.

### Dark footer

Night Charcoal (#0f0f0f) footer with vehicle and company link groups, contact information, and low-emphasis legal copy.

### Measured component styles

- **Primary button** (“Learn More”): background #000000 · text #ffffff · border 1px solid #000000 · radius 48px · padding 11.8px 24px · 400 16px ZeekrText · shadow rgba(0, 0, 0, 0.043) 0px 2px 0px 0px
- **Secondary button** (“Reject All”): transparent background · text #000000 · border 1px solid #000000 · radius 48px · padding 11.8px 24px · 400 16px ZeekrText · shadow rgba(0, 0, 0, 0.016) 0px 2px 0px 0px
- **Link** (“Learn More”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px ZeekrText
- **Card** (“July 8th, 2026 Zeekr 7GT Achieves 5* Rat”): background #ebe8e3 · text #000000 · radius 0px · padding 0px · 400 16px ZeekrText
- **Navigation item** (“Models About Us News Global/English”): transparent background · text #fff4e2 · radius 0px · padding 0px · 400 16px ZeekrText

## Do

- Use measured neutral colors for interface surfaces and text.
- Let full-bleed automotive photography anchor the hero.
- Keep the hero headline centered and visually dominant.
- Give section bands generous separation and breathing room.
- Use ZeekrHeadline for display and editorial headings.
- Keep buttons fully rounded and visually simple.

## Don't

- Do not introduce bright interface accent colors.
- Do not add gradients or decorative UI treatments absent from the page.
- Do not crowd vehicle imagery with dense copy.
- Do not give model cards unmeasured radii or shadows.
- Do not treat colors found in photography as brand palette accents.
- Do not use heavy typography or bold display styling.

## Agent prompt

Build a new Zeekr-style page with a spacious, editorial automotive feel. Use Gallery White (#ffffff), Warm Stone (#ebe8e3), and Night Charcoal (#0f0f0f) as the principal section surfaces; use Carbon Ink (#000000) for body text and primary buttons, and Ivory Glow (#fff4e2) for text on dark imagery. Keep the interface neutral and allow vehicle photography to supply color and atmosphere. Use ZeekrHeadline or a close editorial sans substitute for prominent headings, and ZeekrText or Inter for navigation, copy, and controls. Favor wide image-led sections, simple grids, generous separation, and clear alignment. Keep card treatment flat and use thin borders and fully rounded pill CTAs. Avoid invented accent colors, ornamental gradients, and crowded layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark automotive image with overlay navigation and centered headline. | Global navigation, Centered brand statement | Light text over dark imagery, Full-bleed photography |
| 2 | other | Single-column white introduction with restrained text and generous open space. | Brand positioning | White canvas, Minimal text block |
| 3 | product-showcase | Warm stone section with a centered heading leading into the vehicle showcase. | Section introduction | Warm neutral surface, Centered heading |
| 4 | product-grid | Large lead vehicle image followed by smaller two-column vehicle imagery. | Browse vehicle range, Model-level actions | Image-led model cards, Pill-shaped black CTAs |
| 5 | product-showcase | Single-column model details and CTA continuing the warm-gray showcase band. | Model details, Learn more action | Compact model copy, Black pill CTA |
| 6 | content-feed | White news section with three editorial cards and a centered follow-up action. | Browse recent news, Read more links | Three-column cards, Date and image, Centered CTA |
| 7 | footer | Dark footer split into vehicle links, company links, contact, and legal information. | Secondary navigation, Contact access, Legal links | Near-black surface, Compact link groups, Muted legal copy |

## Source CSS custom properties (selected)

```css
--antd-wave-shadow-color: #24292b;
--zk-primary-color: #24292b;
--zk-primary-color-hover: #353738;
--zk-primary-color-active: #040505;
--zk-primary-color-outline: rgba(36,41,43,.2);
--zk-primary-1: #656a6b;
--zk-primary-2: #595e5e;
--zk-primary-3: #4d5152;
--zk-primary-4: #414445;
--zk-primary-5: #353738;
--zk-primary-6: #24292b;
--zk-primary-7: #040505;
--zk-primary-color-deprecated-l-35: #76868c;
--zk-primary-color-deprecated-l-20: #525e63;
--zk-primary-color-deprecated-t-20: #505455;
--zk-primary-color-deprecated-t-50: #929495;
--zk-primary-color-deprecated-f-12: rgba(36,41,43,.12);
--zk-primary-color-active-deprecated-f-30: hsla(190,3%,41%,.3);
--zk-primary-color-active-deprecated-d-02: #606566;
--zk-success-color: #65c466;
--zk-success-color-hover: #73d13d;
--zk-success-color-active: #389e0d;
--zk-success-color-outline: rgba(82,196,26,.2);
--zk-success-color-deprecated-bg: #f6ffed;
--zk-success-color-deprecated-border: #b7eb8f;
--zk-error-color: #d2211e;
--zk-error-color-hover: #ff7875;
--zk-error-color-active: #d9363e;
--zk-error-color-outline: rgba(255,77,79,.2);
--zk-error-color-deprecated-bg: #fff2f0;
--zk-error-color-deprecated-border: #ffccc7;
--zk-warning-color: #faad14;
--zk-warning-color-hover: #ffc53d;
--zk-warning-color-active: #d48806;
--zk-warning-color-outline: rgba(250,173,20,.2);
--zk-warning-color-deprecated-bg: #fffbe6;
--zk-warning-color-deprecated-border: #ffe58f;
--zk-info-color: #24292b;
--zk-info-color-deprecated-bg: #656a6b;
--zk-info-color-deprecated-border: #4d5152;
```

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