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

# VanMoof · Design System

> Precision bikes, bold imagery, and calm modernist design

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.vanmoof.com/en-NL · **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._

VanMoof’s homepage pairs oversized e-bike photography with a restrained monochrome interface and concise editorial messaging. Full-bleed campaign scenes alternate with pale product-information panels and compact routes to shopping, service, and brand content.

## North star

Let cinematic bicycle imagery lead, while a quiet monochrome interface keeps product information clear and effortless to scan.

## Overview

The visual strategy is deliberately restrained around dramatic product imagery. White and near-white surfaces give the page a clean retail canvas, while charcoal text and dark image overlays preserve legibility without adding decorative colour. The campaign banner’s vivid yellow is an exception: it functions as a temporary promotional signal, not the core interface palette. Large, lightweight Unica77LLWeb headings establish an editorial tone; compact body copy and navigation stay quiet and practical. A mono face appears sparingly for technical or uppercase-style details. Layout alternates full-bleed video or photography with inset pale panels, creating a measured rhythm between emotional storytelling and product explanation. Spacious margins surround feature content, while footer links and utility controls remain dense. Thin borders, restrained corner rounding, and almost no shadow keep cards crisp and visually subordinate to the bikes.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Header, footer, text on dark campaign imagery, and the cleanest product-information surfaces. |
| Cloud Canvas | `#f7f7f7` | `--color-cloud-canvas` | surface | Main pale page canvas and section background separating campaign media from content. |
| Carbon Ink | `#222222` | `--color-carbon-ink` | brand | Primary interface text, navigation, dark CTA fills, and fine outlines. |
| Graphite | `#313131` | `--color-graphite` | neutral | Muted footer and supporting copy; also used on a dark partner-link tile. |
| Fade Silver | `#cdcdcd` | `--color-fade-silver` | neutral | Measured gradient transition tone; treat as subtle image or section shading, not a defining interface colour. |
| Mist Panel | `#eeeeee` | `--color-mist-panel` | surface | Soft grey app-information panel and pale card or link surfaces. |
| Hairline Grey | `#e0e0e0` | `--color-hairline-grey` | semantic | Thin card and footer separators; preserve as a low-contrast structural border. |
| True Black | `#000000` | `--color-true-black` | neutral | Sparse measured text and dark media details; not a broad brand fill. |
| Soft Pewter | `#c5c5c5` | `--color-soft-pewter` | neutral | Minor measured gradient or media detail; use only for subtle tonal shading. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Cloud Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#eeeeee` (Mist Panel) · `--color-text` → `#222222` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#313131` (Graphite) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#f7f7f7` | 14.85:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#eeeeee` | 13.71:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#313131` | `#f7f7f7` | 12.14:1 | AAA |
| `#313131` | `#ffffff` | 13.01:1 | AAA |
| `#313131` | `#eeeeee` | 11.21:1 | AAA |

### Gradients

- `linear-gradient(rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.2) 100%)`
- `linear-gradient(135deg, rgba(34, 34, 34, 0.5) 9.74%, rgba(34, 34, 34, 0.3) 90.26%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Unica77LLWeb | `--font-body` | webfont | 400, 600, 700 | Primary face for display and headings, body copy, navigation, and buttons. | Inter |
| Unica77Mono | `--font-mono` | webfont | 400 | Sparing monospace treatment for compact technical or coded details. | IBM Plex Mono |

- **Unica77LLWeb:** Use a clean sans-serif with regular-weight, unforced forms; measured styles use regular, semibold, and bold, with no tracking or case transformations.
- **Unica77Mono:** Regular weight with uppercase treatment in the measured code role; keep usage limited and functional.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 280px | 400 | 1 | 0 | — | Unica77LLWeb | Oversized campaign lettering, such as the S6 hero model name. |
| h1 | 80px | 400 | 1 | 0 | — | Unica77LLWeb | Primary campaign and major section headlines. |
| h2 | 48px | 400 | 1.1 | 0 | — | Unica77LLWeb | Secondary section titles and broad product-story headlines. |
| h3 | 32px | 400 | 1.1 | 0 | — | Unica77LLWeb | Feature-panel and content-card headings. |
| h4 | 24px | 400 | 1.1 | 0 | — | Unica77LLWeb | Smaller subsection headings and supporting feature titles. |
| body | 14px | 400 | 1.43 | 0 | — | Unica77LLWeb | Product explanations, card copy, and editorial descriptions. |
| caption | 12px | 400 | 1.33 | 0 | — | Unica77LLWeb | Compact labels, image notes, and secondary metadata. |
| button | 12px | 400 | 1.33 | 0 | — | Unica77LLWeb | Short CTA labels and utility actions. |
| nav | 14px | 400 | 1.43 | 0 | — | Unica77LLWeb | Header navigation and footer category links. |
| code | 12px | 400 | 1.2 | 0 | uppercase | Unica77Mono | Occasional uppercase technical or promotional detail. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 12, 13, 14, 16, 24, 32, 40, 48, 64, 80 px.
- Section rhythm 32px · element gap 8px · card padding 20px · max content width 1424px.

The page uses a broad, centered desktop canvas with a measured maximum width of 1424px. Campaign media spans nearly the full available width, while informational panels sit inset within the pale background. Content alternates between full-width storytelling and more structured card or feature arrangements. Headings align to the left edge of their content; feature text stays close to relevant imagery. Section gaps are measured at 32px, with compact internal spacing and a relatively dense footer. Preserve the contrast between spacious campaign panels and concise utility areas.

## Shape & elevation

- Radius: button `2px` · card `8px` · media `4px` · nav `4px` · link `4px` · xs `2px` · sm `4px` · md `8px`
- No box shadows measured: the page is flat.

The interface is mostly flat, with no measured shadows. Separate cards and content using pale surface changes or fine borders, including the measured #e0e0e0 hairline. Use restrained rounding on select cards and media; keep hero imagery and most text panels visually flush rather than floating.

## Imagery

Photography and video dominate: close-up bicycle product shots, cinematic dark hero scenes, and lifestyle riding footage. Images are often full-bleed with text placed over open, low-detail portions of the frame; subtle dark gradients support contrast. The app feature uses a pale information panel paired with a large handlebar-display product image. Avoid illustration-led or decorative graphic treatments.

## Components

### Country selector notice

A narrow white utility strip with compact copy, a dark Select country button, and a separate close control.

### Promotion banner

A vivid yellow-green horizontal offer strip with small uppercase monospace-style copy and a close icon.

### Overlay navigation

A centered, dark translucent navigation capsule over the hero, with menu and bag icons framing the VanMoof wordmark.

### Campaign hero

Full-bleed video or photography with oversized white model lettering, concise supporting copy, and a small outlined arrow CTA.

### App feature panel

A pale #eeeeee product-information card with centered title and CTA, a row of compact feature explanations, and a large device image.

### Editorial link cards

Image-led service and test-ride tiles with white headings, short descriptions, subtle dark overlays, and outlined arrow controls.

### Footer link columns

A clean white footer with newsletter signup, compact product and support link groups, social links, and legal utilities.

### Measured component styles

- **Primary button** (“Select country”): background #222222 · text #ffffff · radius 4px · padding 0px · 400 16px Unica77LLWeb
- **Secondary button** (“Sign up”): transparent background · text #222222 · border 1px solid #222222 · radius 4px · padding 0px · 400 16px Unica77LLWeb
- **Link** (“Test rides Head to a sales partner for y”): background #eeeeee · text #000000 · radius 8px · padding 0px · 400 16px Unica77LLWeb
- **Card** (“Track your rides Enable your VanMoof to ”): transparent background · text #222222 · border 1px solid #e0e0e0 · radius 0px · padding 32px 24px 0px 24px · 400 16px Unica77LLWeb
- **Navigation item** (“Bikes”): transparent background · text #222222 · radius 0px · padding 0px · 400 14px Unica77LLWeb

## Do

- Let product photography carry the strongest visual impact.
- Keep core interface surfaces white, near-white, or charcoal.
- Use large, lightweight headings against concise supporting copy.
- Place text over image areas with clear contrast and restrained overlays.
- Alternate cinematic media with calm informational panels.
- Keep buttons and card borders thin and understated.

## Don't

- Do not make promotional yellow the default interface colour.
- Do not add shadows or floating-card effects.
- Do not crowd full-bleed imagery with extra copy.
- Do not use decorative gradients as a dominant page background.
- Do not overuse monospace typography.
- Do not substitute illustrations for the product photography-led approach.

## Agent prompt

Build a new VanMoof-style ecommerce page with a quiet monochrome interface and cinematic bicycle imagery. Use Gallery White (#ffffff), Cloud Canvas (#f7f7f7), Carbon Ink (#222222), and Mist Panel (#eeeeee) for the core surfaces and text; reserve Graphite (#313131) and Hairline Grey (#e0e0e0) for supporting copy and subtle structure. Set headings in a clean, lightweight sans-serif similar to Unica77LLWeb, with restrained compact body copy; use a mono face only for occasional technical labels. Organize the page as full-bleed campaign media alternating with inset product-information panels and image-led service cards. Keep CTAs concise and lightly outlined or dark-filled. Favor flat surfaces, fine separators, generous breathing room around stories, and dense utility links only in the footer. Treat any bright campaign colour as a temporary promotional banner, not the brand foundation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign hero beneath utility and promotion strips; centered overlay navigation with left-aligned model title and a right-side CTA. | country confirmation, dismissible promotion, hero explore link, availability cue | full-bleed dark product video, oversized white model name, floating dark navigation capsule, high-contrast promo strip |

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