# Wandelmaier · Design system migration spec

> Source: http://wandelmaier.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of refined, typographic portfolio design, using massive scale and a restrained dark palette to create a premium feel.

## 1. Identity DNA

Wandelmaier functions as a portfolio with the deliberate restraint of a minimalist architectural studio. Every element is placed with strategic intent, serving the professional narrative of a product design strategist. The system is built on a foundation of human-centered craft and refined, professional presentation.

**One-liner:** A refined, high-contrast portfolio for a product design strategist
**Keywords:** professional · human-centered · strategic · creative
**Analogy:** A minimalist architectural studio's portfolio

## 2. Color

The palette is built on a deep, warm off-black foundation that provides maximum contrast for crisp white primary text. A muted gray serves for secondary information, while three bold accent shapes—green, pink, and coral—appear as isolated, sculptural forms rather than recurring UI elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#191816` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#A9A9A9` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

**Color principle:** High-contrast dark theme with a muted neutral text color

The core principle is high-contrast focus: the dark void makes content and sparse, bold color the sole actors.

## 3. Typography

Typography employs a dual-voice system. A humanist sans-serif handles UI and body text with a clean, functional presence, while a transitional serif carries expressive display headlines at very light weights, creating a refined, editorial distinction.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 187px | 0.9 | 300 | -2px | Main headline text |
| heading | 50px | 1.1 | 300 | -1px | Subheadings and project titles |
| body | 24px | 1.4 | 300 | 0px | Body text and UI labels |
| caption | 16px | 1.4 | 300 | 0px | Secondary text and captions |

## 4. Spacing

A generous vertical rhythm, built on 32-pixel base increments, governs the pacing of all content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm with 32px base increments

## 5. Surfaces

Depth is implied through composition and scale, not through applied shadows. Surfaces are flat and borderless, allowing content imagery and typography to define structure.

- **Radius:** sm 4px · md 48px · lg 72px · pill 9999px
- **Borders:** No visible borders on most elements

## 6. Layout

The skeleton centers large content blocks within a field of generous whitespace. A grid of massive, image-led cards forms the primary project showcase, creating a spacious and vertical reading path.

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

**Skeleton:** Large, centered content blocks with generous whitespace

## 7. Motion & Interaction

Motion is minimal and purposeful, intended to confirm interaction rather than decorate. Durations are calibrated from micro (220ms) to medium (800ms), using a standard ease-out curve for smooth, immediate feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`

- **Hover:** Subtle background-color transitions on interactive elements
- **Click:** Immediate visual feedback
- **Transition:** 0.5s background-color transition observed
- **Keyboard:** Standard browser focus management

## 8. Voice & Don'ts

The editorial voice is professional, concise, and direct. Headlines adopt a minimalist, lowercase, and highly stylized treatment, while calls to action remain simple text or icon-based.

- **Tone:** Professional, concise, and direct
- **Headline style:** Lowercase, minimalist, and highly stylized
- **CTA style:** Simple text or icon-based calls to action
- **Avoid:** Excessive jargon / Cluttered layouts / Vague descriptions

### Don'ts
- ❌ Don't use multiple competing accent colors — the screenshot shows three distinct, bold accent shapes that are used sparingly and never together as UI chrome
- ❌ Don't center all text content — the screenshot shows clear left-aligned body text and descriptions
- ❌ Don't use complex card borders or shadows — the screenshot shows flat, borderless image cards
- ❌ Don't use small, tight typography — the screenshot shows extremely large, airy display type
- ❌ Don't use a light theme — the screenshot shows a consistent, deep dark background
- ❌ Don't use uppercase for headlines — the screenshot shows lowercase for the main hero text

The system deliberately avoids light themes, multiple competing accents, centered body text, and the use of uppercase in headlines.

## System Prompt (paste into AI tool)

```
This is a personal portfolio for a product design strategist. Positioning is professional, refined, and focused on high-end craft. Key colors are a deep, warm off-black background (#191816) with crisp white text (#FFFFFF) and muted gray (#A9A9A9) for secondary information. The palette is punctuated by three bold, solid-color shapes: a vibrant green (#34A847), a soft pink (#FBCBCB), and a warm coral (#F27851). Typography uses a humanist sans-serif (PolySans) for UI and a transitional serif (Canela) for expressive display text, both at very light weights. Critical donts: Don't use small, dense text; don't use multiple competing accent colors simultaneously; don't use heavy shadows or borders on cards; don't use uppercase for headlines; don't use a light color scheme; don't use complex, cluttered layouts.
```