# Wemakethings De · Design system migration spec

> Source: https://wemakethings.de  ·  Curated by OpenDesign  ·  en

> A masterclass in typographic-driven design where massive, outlined background text acts as the primary visual anchor.

## 1. Identity DNA

The system operates with the logic of an industrial blueprint: every element is placed with exacting purpose on a strict, monochrome grid. This is design as technical drawing, where massive typographic statements are anchored by the rigid precision of 1px borders.

**One-liner:** Bold typographic statements backed by strict monochrome grids.
**Keywords:** Precision · Craftsmanship · German Engineering · Minimalism · Clarity
**Analogy:** An industrial blueprint

## 2. Color

The palette is reduced to its most elemental state: pure black on white. This binary approach eliminates chromatic distraction, making contrast and form the sole carriers of visual information.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Pure monochrome binary system using absolute black and white.

The principle is absolute clarity through chromatic restraint, ensuring the structure and content remain the focal point.

## 3. Typography

A single geometric sans-serif category is used exclusively, its voice varying from massive, outlined watermark characters to precise, uppercase navigation links. Typography is not merely text but the primary structural element of the entire layout.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 864px | 0.83 | 400 | -1px | Massive watermark background text |
| heading | 80px | 1.0 | 500 | 0px | Primary hero copy |
| body | 24px | 1.33 | 400 | 0px | Primary readable content |
| nav | 16px | 1.0 | 500 | 0px | Navigation links |

**Type rules:**
- Typography is the primary structural and expressive element
- Huge background text must always be outlined and non-interactive
- Navigation links are uppercase geometric sans

## 4. Spacing

A strict grid rhythm with generous padding establishes the foundational cadence for all content placement.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict grid with generous padding

## 5. Surfaces

Depth is communicated solely through the strategic use of thin, 1px solid black borders. These lines define grid cells, outline components, and create visual hierarchy without any shadows or gradients.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin 1px solid black lines used to define grid boundaries and underline active states

## 6. Layout

The layout skeleton is a series of full-width sections intersected by the defining 1px black borders. This creates a technical, blueprint-like grid where content, especially the massive background text, is systematically organized.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width sections intersected by 1px black borders, creating a technical blueprint grid

## 7. Motion & Interaction

Motion is engineered for precision, using smooth page transitions and scroll effects that respect the grid's structure. The philosophy is to reinforce a sense of mechanical accuracy rather than to decorate.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth page transitions
  - Sticky grid-based scroll effects

- **Hover:** Subtle underline or color inversion within defined grid cells
- **Click:** Immediate state change with no excessive feedback
- **Transition:** 0.6s cubic-bezier(0.22, 1, 0.36, 1) for page transitions
- **Keyboard:** Standard tab focus on navigation links

## 8. Voice & Don'ts

The editorial voice is confident, direct, and authoritative, mirroring the system's minimal aesthetic. It favors concise, all-caps headlines and direct calls to action, avoiding any extraneous or soft language.

- **Tone:** Confident, Direct, Authoritative, Minimal
- **Headline style:** ALL CAPS, bold, concise, large-scale geometric sans-serif
- **CTA style:** Uppercase text with minimal arrow indicators, integrated into the grid
- **Avoid:** Exclamation marks / Fluffy marketing speak / Soft rounded UI elements / Gradient fills

### Don'ts
- ❌ don't use gradients or complex shadows — screenshot shows flat monochrome surfaces
- ❌ don't use rounded corners — screenshot shows strict 0px radius on all elements
- ❌ don't use multiple font families — screenshot shows exclusive use of geometric sans-serif
- ❌ don't use bright accent colors — screenshot shows strictly black and white palette
- ❌ don't use small, cramped typography — screenshot shows massive, expansive display text
- ❌ don't use standard card layouts — screenshot shows text directly overlaid on giant outlined background type

The system deliberately omits rounded corners, gradient fills, complex shadows, and any bright accent colors.

## System Prompt (paste into AI tool)

```
This design system serves a premium bicycle and lifestyle brand, positioning itself through absolute monochrome restraint and massive, confident typography. The palette is strictly binary: white backgrounds (#FFFFFF) and absolute black text (#000000), with no secondary or accent colors. The typography category is exclusively geometric-sans, used across all scales from tiny navigation links to massive 864px background watermarks. The layout is defined by a strict grid of thin 1px black borders, resembling a technical blueprint. Critical constraints: never use rounded corners (radius is always 0px), never introduce color (the design is strictly monochrome), and never use soft shadows or gradients. The interaction model is subtle, relying on sharp, precise transitions and clear visual hierarchy within a rigid structural framework.
```