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

# NIU · Design System

> Electric mobility with a bold, red pulse

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

NIU’s homepage pairs a restrained navigation and editorial structure with dramatic, full-bleed riding photography. Signal red, condensed display headlines, and alternating light and dark sections create a confident, performance-led identity.

## North star

Let bold riding photography and condensed headlines lead, using NIU red as a precise accent across clean, alternating light and dark sections.

## Overview

The page uses white as its main canvas, letting large riding and product photographs carry much of the visual impact. NIU red (#df001f) is the signature cue: it marks the top brand strip, primary buttons, eyebrow labels, and the blog band, rather than covering every section. Dark service and footer areas provide contrast, while pale gray bands separate finder and app content. DIN supplies the readable navigation and body copy; DIN Condensed gives the uppercase display headlines their fast, athletic character. Layout alternates centered, full-bleed hero imagery with split feature blocks, compact forms, stats, and a card-led content feed. Spacing feels open around major messages, but information-heavy forms and footer links stay compact. Borders are subdued hairlines; the visual hierarchy comes from photography, color blocks, and typographic scale rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light cards, form fields, and reversed text on dark or red areas. |
| NIU Signal | `#df001f` | `--color-niu-signal` | brand | Brand strip, primary CTAs, blog background, and small section labels. |
| Soft Signal | `#f5b3bc` | `--color-soft-signal` | semantic | Measured faint button-related tint; keep limited to subtle control states, not a dominant brand color. |
| Carbon Ink | `#242424` | `--color-carbon-ink` | neutral | Primary dark text and charcoal inverse sections, including service content and footer areas. |
| Steel Line | `#979797` | `--color-steel-line` | neutral | Input and navigation hairlines, plus muted footer and interface details. |
| Mist Gray | `#ececec` | `--color-mist-gray` | surface | Soft neutral section band, notably behind the NIU Finder content. |
| Rider Black | `#000000` | `--color-rider-black` | neutral | Deep inverse surfaces and occasional white-on-black links, buttons, or text. |
| Graphite Copy | `#4a4a4a` | `--color-graphite-copy` | neutral | Secondary text where softer contrast is needed against light surfaces. |
| Pale Type | `#d8d8d8` | `--color-pale-type` | neutral | Low-emphasis text detail; use sparingly for subdued supporting information. |
| Night Panel | `#1a1a1a` | `--color-night-panel` | surface | Near-black feature cards, including service and rider-benefit panels. |
| Quiet Gray | `#cdcdcd` | `--color-quiet-gray` | neutral | Low-priority text detail within dense secondary content. |
| Footer Slate | `#444444` | `--color-footer-slate` | neutral | Subtle footer dividers and borders on dark surfaces. |
| Cool Alloy | `#a4a9ad` | `--color-cool-alloy` | neutral | Muted secondary copy and small interface details. |
| Navigation Charcoal | `#333333` | `--color-navigation-charcoal` | neutral | Primary navigation text and dark headline details on white. |
| Deep Blue Steel | `#1a2530` | `--color-deep-blue-steel` | semantic | Measured isolated non-core detail; not a defining page surface or brand color. |
| Ash Copy | `#6b6b6b` | `--color-ash-copy` | neutral | Occasional subdued supporting text on light areas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ececec` (Mist Gray) · `--color-surface-2` → `#000000` (Rider Black) · `--color-surface-3` → `#242424` (Carbon Ink) · `--color-surface-4` → `#1a1a1a` (Night Panel) · `--color-text` → `#242424` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#4a4a4a` (Graphite Copy) · `--color-border` → `#979797` (Steel Line) · `--color-accent` → `#df001f` (NIU Signal) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242424` | `#ffffff` | 15.52:1 | AAA |
| `#242424` | `#ececec` | 13.14:1 | AAA |
| `#242424` | `#000000` | 1.35:1 | fail |
| `#ffffff` | `#ececec` | 1.18:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#242424` | 15.52:1 | AAA |
| `#4a4a4a` | `#ffffff` | 8.86:1 | AAA |
| `#4a4a4a` | `#ececec` | 7.5:1 | AAA |
| `#4a4a4a` | `#000000` | 2.37:1 | fail |
| `#4a4a4a` | `#242424` | 1.75:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| din | `--font-body` | webfont | 400, 700, 500, 300, 600 | Navigation, body copy, buttons, forms, and general interface text. | Barlow |
| din-condensed | `--font-display` | webfont | 700, 600, 400 | Display headlines and emphatic section titles. | Roboto Condensed |
| Roboto | `--font-roboto` | webfont | 400, 700 | Form input text and small field details. | Roboto |

- **din:** Workhorse sans with regular-to-bold weights; sentence case for copy and labels, medium-weight controls.
- **din-condensed:** Bold condensed forms, frequently uppercase; creates the page’s athletic editorial voice.
- **Roboto:** Regular and bold weights; restrained use within form controls.

### Type scale — Perfect Fourth (ratio ≈ 1.362, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 75px | 600 | 1 | 0 | uppercase | din-condensed | Large uppercase campaign statements and hero display copy. |
| h1 | 60px | 700 | 1.02 | 0.005em | uppercase | din-condensed | Primary uppercase hero or major section headline. |
| h2 | 40px | 400 | 1.05 | 0.005em | — | din-condensed | Section headings with a less forceful display treatment. |
| h3 | 37.5px | 700 | 1.02 | 0.005em | uppercase | din-condensed | Uppercase feature and content-section headlines. |
| h4 | 22px | 700 | 1.15 | 0 | — | din | Bold card titles and secondary headings. |
| body | 16px | 400 | 1.55 | 0 | — | din | Paragraphs, explanatory copy, and general page text. |
| caption | 12px | 400 | 1.2 | 0 | — | din | Small dates, fine print, and image or content metadata. |
| button | 16px | 500 | 1 | 0 | — | din | Primary action labels, including red CTA buttons. |
| nav | 16px | 500 | 3.25 | 0 | — | din | Header links and primary navigation labels. |
| eyebrow | 12px | 700 | 1.2 | 0.125em | uppercase | din | Compact uppercase section identifiers above headlines. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 12, 14, 16, 17, 18, 20, 22, 23, 24, 28 px.
- Section rhythm 56px · element gap 16px · card padding 30px · max content width 600px.

A long, single-page layout uses full-width section bands with content arranged in centered containers and two-column splits. The measured content maximum is 600px; the screenshots show wider visual compositions around that content, especially for full-bleed photography and multi-column sections. Sections alternate between open white space, pale gray, red, and dark backgrounds. The page moves from a centered hero to a narrow form, finder cards, feature splits, stats, and a horizontal content feed. Comfortable section spacing contrasts with dense form controls and footer navigation.

## Shape & elevation

- Radius: button `4px` · card `14px` · media `14px` · nav `50%` · link `8px` · xs `4px` · sm `5px` · md `7px` · lg `8px` · xl `14px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with no measured shadows. Separation comes from alternating white, pale gray, red, and dark section backgrounds. Cards use restrained borders or simple fills, with measured rounded card and media corners; form fields rely on thin gray outlines rather than raised surfaces.

## Imagery

Photography defines the page: action shots of riders, scooters, and urban or off-road settings appear as large, cinematic panels and split-section images. The hero is full-bleed, with campaign text and CTA over the image. Product and app imagery is presented clearly within lighter sections. Small icons and brand marks support statistics and service claims; they are secondary to the photography.

## Components

### Primary CTA

NIU red (#df001f) fill with white text; DIN medium or bold label and compact rounded corners. Examples include Find out more and Connect Now.

### Header navigation

White horizontal navigation with dark DIN links, a red brand strip, and understated spacing between utility links.

### Hero campaign

Full-bleed rider image with centered condensed uppercase headline and a red CTA overlaid near the top-center.

### Finder cards

Pale gray section with image-and-copy category cards, dark text, small red labels, and red View Models actions.

### Benefit panel

Near-black service and warranty cards with red icon accents, white headings, and compact supporting copy.

### Newsletter form

Narrow single-column signup form with stacked labeled fields, gray hairline borders, and a red submit action.

### Blog feed

Red content band featuring a horizontal row of white image-led article cards with dates and compact read actions.

### Measured component styles

- **Primary button** (“Find out more”): background #df001f · text #ffffff · radius 5px · padding 17.2px 24px · 500 16px din
- **Link** (“SEPTEMBER 28, 2026 Electric Moped Incent”): background #ffffff · text #242424 · radius 8px · padding 0px · 400 16px din
- **Input**: transparent background · text #142341 · border 1px solid #979797 · radius 0px · padding 16px · 400 14px Roboto
- **Card** (“Service Network 2000+ authorized worksho”): background #1a1a1a · text #ffffff · radius 14px · padding 28px 32px · 400 16px din
- **Navigation item** (“Vehicles Offroad Explore your wild side ”): transparent background · text #333333 · radius 0px · padding 0px · 400 16px din

## Do

- Use NIU red (#df001f) for prominent actions and selective brand accents.
- Let high-quality rider and product photography dominate hero and feature areas.
- Use DIN for interface and body text, and DIN Condensed for emphatic headlines.
- Alternate light, gray, red, and dark section bands to structure the long page.
- Keep headlines bold, uppercase, and concise in campaign-led sections.
- Use flat cards and thin borders instead of decorative shadows.

## Don't

- Do not spread red across every section or use it as a constant background.
- Do not replace the photographic hero with a small decorative illustration.
- Do not use rounded, playful typography in place of the condensed headline style.
- Do not add prominent shadows or glossy gradients.
- Do not crowd major headlines with dense body copy.
- Do not treat measured incidental colors in photos as core brand colors.

## Agent prompt

Build a new NIU-style page around Gallery White (#ffffff), with NIU Signal (#df001f) reserved for the brand strip, key CTAs, and selective labels. Use Carbon Ink (#242424) or Night Panel (#1a1a1a) for high-contrast feature areas, and Mist Gray (#ececec) for quiet section breaks. Set navigation and body copy in DIN or a close sans substitute; use bold condensed uppercase headlines for campaign moments. Lead with dramatic rider or product photography, then alternate clean split layouts, compact cards, and spacious content bands. Keep controls simple, with Steel Line (#979797) hairlines, minimal rounding, and no shadow-heavy elevation. Maintain clear hierarchy, readable supporting copy, and a deliberate rhythm between full-width imagery and concise editorial sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign imagery with centered headline and CTA. | campaign CTA, multiple campaign messages | full-bleed photography, condensed headline, red button |
| 2 | newsletter | Narrow, single-column form centered within a white section. | email signup, interest selection, consent capture | stacked inputs, hairline field borders, red submit button |
| 3 | category-nav | Pale gray band with two side-by-side image-and-copy category cards. | model discovery, category browsing | paired image cards, red category labels, View Models actions |
| 4 | feature-grid | Dark two-column section with large feature image and stacked benefit panels. | service reassurance, warranty information | near-black background, red icons, compact benefit cards |
| 5 | stats | White two-column stats layout with paired rows and icon labels. | impact metrics, quick scanning | red line icons, large figures, muted captions |
| 6 | content-feed | Red full-width band with a horizontal row of article cards. | article discovery, carousel browsing | white image cards, date labels, compact read buttons |
| 7 | feature-split | Two-column white section pairing a wide community image with dark copy panel. | community invitation, membership CTA | rider collage, dark text card, red action button |
| 8 | feature-split | Light gray split section with app-and-vehicle imagery opposite copy. | app feature explanation, learn more CTA | product mockup, condensed headline, red button |
| 9 | footer | Dense, dark multi-column footer with service highlights, social links, and product navigation. | dealer discovery, product navigation, social follow | dark footer, small links, brand and social marks |

## Source CSS custom properties (selected)

```css
--color--black: #000;
--color--primary: #df001f;
--color--primary--dark: #ab160f;
--color--darker-grey: #333;
--color--dark-grey: #2e2d2d;
--color--medium-grey: #a4a9ad;
--colour-medium-grey-alt: #999;
--color--light-grey: #d1d3d3;
--color--lighter-grey: #f0efee;
--color--white: #fff;
--color--text: #333;
--section-gap: 7.5rem;
```

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