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

# WE MAKE THINGS · Design System

> Bold type, open space, bicycle culture

**Theme:** light · **Industry:** other · **Source:** https://wemakethings.de/ · **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._

A monochrome company homepage introducing WE MAKE THINGS and its portfolio of bicycle brands. Oversized typography, a numbered brand index, and restrained rules make the page feel like a printed editorial laid out on the web.

## North star

Build every section from black typography, white space, oversized type, and precise hairline rules—not colour or decoration.

## Overview

The page uses a strictly monochrome palette: white is the continuous canvas, while black carries headlines, navigation, body copy, links, and fine outlines. There are no accent colours or coloured section bands; contrast comes from scale, weight, and linework. Maison Neue supplies the functional typographic voice, with uppercase display copy and compact supporting text. An extremely large, thin outlined word sits behind the hero statement, creating depth without colour or shadow. The main headline is uppercase and left aligned, while the brand portfolio becomes a sequence of tall, narrow numbered columns with vertical names and sparse dividers. A spacious careers section follows, then a compact information grid forms the footer. Sections remain flat and largely full-width, with generous vertical breathing room and restrained borders. The visual identity is defined by type, whitespace, and modular structure rather than photography or decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Continuous page canvas and the background for the hero, brand index, careers content, and footer. |
| Print Black | `#000000` | `--color-print-black` | neutral | Headlines, navigation, body copy, links, brand names, and the crisp outlines and dividers that structure the page. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Print Black) · `--color-border` → `#000000` (Print Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Maison Neue | `--font-body` | webfont | 400, 500 | Navigation, headings, body copy, brand labels, and links | DM Sans |

- **Maison Neue:** Use regular and medium weights; headlines and navigation often appear uppercase. Keep tracking neutral and rely on scale and line breaks for emphasis.

### Type scale — Custom (ratio ≈ 2.181, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 864px | 400 | 0.83 | 0 | — | BASEBLOOM | Oversized outlined background word behind the hero statement. |
| h1 | 65px | 500 | 1.11 | 0 | uppercase | Maison Neue | Large uppercase hero introduction and primary statements. |
| h2 | 57.5px | 400 | normal | 0 | — | Unzyale | Secondary display-style headline treatment. |
| h3 | 43px | 500 | normal | 0 | uppercase | Maison Neue | Uppercase section or brand headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | Maison Neue | Supporting subheadings and compact informational headings. |
| body | 17.5px | 400 | normal | 0 | uppercase | Maison Neue | Company descriptions and supporting paragraphs, often uppercase. |
| nav | 24px | 400 | 2.5 | 0 | uppercase | Maison Neue | Top navigation links and prominent navigation labels. |
| link | 24px | 400 | 2.5 | 0 | uppercase | Maison Neue | Brand destinations and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 14, 16, 20, 32, 40, 80 px.
- Section rhythm 80px · element gap — · card padding — · max content width 864px.

The page is organized as broad horizontal sections on a white canvas, with the measured page max width at 864px and a comfortable density. The hero aligns its large statement and supporting paragraph to the left, layered over the oversized outlined display word. A ten-column brand index divides the portfolio into narrow vertical cells, with numbered labels above vertically oriented brand names. Careers returns to a single left-aligned text block; the footer uses a compact multi-column information grid. Section rhythm is open, with measured section gaps of 80px.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The interface is flat, with no measured shadows, gradients, or rounded corners. Thin black rules separate navigation, brand-index columns, and footer cells; the hero's outlined display lettering provides the main layered effect. Preserve crisp edges and use whitespace rather than cards or elevation to distinguish content.

## Imagery

The first viewport and the scaled full-page reference are driven by typography and layout rather than photography. The hero's giant outlined lettering is a typographic graphic, not a photographic backdrop. The brand index uses names and numerals instead of product images. A small logo appears in the footer; keep any marks monochrome, restrained, and subordinate to the text.

## Components

### Top navigation

A slim header with a small logo at left and uppercase About, Brands, Career, and Contact links aligned to the right; a fine rule runs beneath it.

### Hero statement

A large uppercase company introduction aligned left, layered over an oversized outlined display word, with a smaller supporting paragraph and a subtle downward cue.

### Brand index

Ten narrow numbered columns separated by thin vertical rules; brand names are displayed vertically with small WE MAKE labels.

### Careers callout

A prominent uppercase invitation and inline arrow lead into a short supporting paragraph, all on the white canvas.

### Information footer

A compact grid combines the logo, company and address details, contact information, social links, and legal links using black text and fine dividers.

### Measured component styles

- **Link** (“WETHEPEOPLEBMX.DE”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px 20px · 400 24px Maison Neue · uppercase
- **Navigation item** (“ABOUT BRANDS CAREER CONTACT”): transparent background · text #000000 · radius 0px · padding 0px · 400 24px Maison Neue

## Do

- Keep the page canvas white and the primary ink black.
- Use typography as the main visual asset.
- Set major statements in uppercase Maison Neue-style sans serif.
- Make display lettering oversized and outlined rather than filled.
- Use thin rules to organize columns and footer information.
- Leave generous open space between major content blocks.

## Don't

- Do not introduce accent colours, gradients, or tinted section bands.
- Do not add shadows, rounded cards, or elevated surfaces.
- Do not replace the brand index with image-heavy product cards.
- Do not center every text block; preserve the left-aligned editorial voice.
- Do not use decorative imagery that competes with the hero typography.
- Do not make dividers heavy or visually dominant.

## Agent prompt

Build a new page in the WE MAKE THINGS visual style. Use Gallery White (#ffffff) as the uninterrupted canvas and Print Black (#000000) for copy, navigation, links, and rules. Keep the design editorial and flat: no shadows, gradients, rounded cards, or extra colours. Use a clean sans-serif similar to Maison Neue, with uppercase, left-aligned statements and clear differences in type scale. Create one oversized outlined display word as a background layer where useful, ensuring foreground copy stays legible. Organize content with open vertical spacing, narrow modular columns, and thin black dividers. Use a compact top navigation and a structured footer; let typography and whitespace do the visual work. Avoid decorative photography unless the content specifically requires it.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned oversized uppercase statement over outlined display lettering, followed by supporting copy. | scroll cue, layered headline | white canvas, black typography, outlined display text, thin header rule |
| 2 | logo-cloud | Ten narrow numbered columns in a ruled horizontal grid with vertical brand names. | numbered index, linked brand names | thin column dividers, vertical labels, uppercase wordmarks |
| 3 | cta | Single left-aligned text block with a prominent invitation followed by supporting copy. | careers link, inline arrow | uppercase headline, black text on white, generous whitespace |
| 4 | footer | Compact multi-column information grid with divided cells and a logo block. | legal links, social links, contact details | thin grid rules, monochrome logo, compact text |

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