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

# Michael Wandelmaier · Design System

> Quiet dark canvas, expressive type, vivid work.

**Theme:** dark · **Industry:** portfolio · **Source:** https://wandelmaier.com/ · **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 dark, typography-led portfolio presents a designer’s practice through oversized headline lettering, capsule-shaped color accents, and a continuous stream of project photography. Editorial serif copy and restrained rules bring structure to a spacious, image-rich body of work.

## North star

Keep the warm near-black canvas quiet; let oversized type, selective capsule accents, and unoverdecorated project imagery provide all the emphasis.

## Overview

The page uses a near-black warm canvas (#191816) across every section, letting white typography and project imagery carry most of the contrast. The opening composition turns the words “everyday ideas” into oversized PolySans display lettering, interrupted by soft pink, orange, and green capsule forms. Those accents are sparse and purposeful rather than a general color system: they emphasize selected phrases, an arrow, and contact action. Canela Web adds an editorial, literary voice to section headings and longer statements, while PolySans handles the navigation, labels, and oversized sans-serif display. A spacious, single-page rhythm alternates the opening statement and a three-column image strip with long-form work galleries, paired project cards, and ruled client lists. Photography is shown as substantial rectangular evidence of the work, with small, quiet captions. Hairline separators and outlined pills provide structure without shadows or heavy card chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Charcoal | `#191816` | `--color-warm-charcoal` | brand | The uninterrupted page canvas behind the header, typography, project galleries, lists, and contact block. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary text and headings on the dark canvas; also used for fine outlined controls and separators. |
| Soft Ash | `#a9a9a9` | `--color-soft-ash` | neutral | Secondary text and restrained supporting details against the dark background. |
| Quiet Graphite | `#2f2f2d` | `--color-quiet-graphite` | neutral | Subtle hairlines and boundary details; keep separators low contrast against the canvas. |
| Deep Ink | `#000000` | `--color-deep-ink` | semantic | Dark lettering on the pink and orange capsule accents; occasional measured text, not a page background. |
| Signal Green | `#34a847` | `--color-signal-green` | accent | Green capsule behind the downward arrow, selected process node, and email contact action. |
| Blush Pink | `#fbcbcb` | `--color-blush-pink` | accent | Pale pink capsule highlighting the work-year label in the opening typographic composition. |
| Coral Orange | `#f27851` | `--color-coral-orange` | accent | Orange capsule behind the “product design” phrase in the opening composition. |

### Semantic aliases

`--color-canvas` → `#191816` (Warm Charcoal) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#a9a9a9` (Soft Ash) · `--color-border` → `#2f2f2d` (Quiet Graphite) · `--color-accent` → `#34a847` (Signal Green) · `--color-accent-2` → `#f27851` (Coral Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#191816` | 17.74:1 | AAA |
| `#a9a9a9` | `#191816` | 7.55:1 | AAA |
| `#34a847` | `#191816` | 5.78:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PolySans | `--font-body` | webfont | 100 | Display lettering, navigation, body text, labels, and contact UI. | Inter |
| Canela Web | `--font-display` | webfont | 100 | Editorial headings and reflective statement copy. | Cormorant Garamond |

- **PolySans:** Use light, airy sans-serif forms; oversized lowercase display and uppercase, letter-spaced eyebrow and caption labels.
- **Canela Web:** Use an elegant, light serif for expressive headings and longer narrative passages; keep it visually distinct from the sans.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 100 | 0.9 | 0 | — | PolySans | Oversized lowercase words forming the opening “everyday ideas” composition. |
| h1 | 80px | 100 | 1.2 | 0 | — | Canela Web | Main editorial-scale section or statement heading. |
| h2 | 50.5px | 100 | 1.3 | 0 | — | Canela Web | Secondary editorial headings in narrative and portfolio sections. |
| h3 | 40px | 100 | 2.4 | 0 | — | Canela Web | Smaller serif subheadings and supporting editorial statements. |
| h4 | 32px | 100 | 1 | 0 | — | PolySans | Sans-serif project or content titles. |
| body | 24px | 100 | 1.33 | 0 | — | PolySans | Introductory biography and longer supporting page copy. |
| caption | 12px | 100 | 2.67 | 0.2em | uppercase | PolySans | Compact uppercase project metadata and image captions. |
| nav | 24px | 100 | 1.33 | 0 | — | PolySans | Top-row name, discipline, and location labels. |
| eyebrow | 12px | 100 | 2.67 | 0.2em | uppercase | PolySans | Small uppercase section and project labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 16, 22, 29, 32, 43, 48, 58, 61, 64, 96 px.
- Section rhythm 96px · element gap 32px · card padding 16px · max content width 1310px.

A spacious single-column page uses a measured 1310px maximum width and 96px section rhythm. The top navigation aligns three text groups across the width; the hero is a deliberately irregular typographic arrangement rather than a conventional centered headline. Work imagery begins in a three-column strip, then shifts between full-width project images and paired cards. Later client lists use a two-column editorial layout with headings aligned against ruled rows. Large gaps keep transitions calm, while the overall content remains image-dense.

## Shape & elevation

- Radius: card `9999px` · media `50%` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: there are no measured shadows or gradients. Separate content with whitespace and subtle graphite hairlines, and use thin white outlines for selected pill controls. Capsule accents are solid-color shapes rather than elevated buttons. Project images provide their own visual depth through photographic content, not interface layering.

## Imagery

Use documentary and product-design photography as the main evidence of the portfolio: people at work, interface mockups, devices, and physical environments. Preserve the source image’s natural color and rectangular crop rather than applying a site-wide filter. The opening gallery is an edge-to-edge horizontal image sequence with varied framing; later projects alternate wide showcase images and balanced two-up cards, each with quiet metadata and captions.

## Components

### Three-part header

A restrained row places the designer name, discipline, and Vancouver location across the canvas in white PolySans.

### Typographic hero

Oversized lowercase “everyday ideas” lettering shares the opening composition with pink, orange, and green capsule forms.

### Capsule accent labels

Fully rounded solid-color pills hold short dark labels or a centered downward arrow; accents are reserved for specific emphasis.

### Work image sequence

A three-column opening strip leads into wide portfolio showcases and paired project images with small uppercase metadata and captions.

### Editorial statement

Light serif paragraphs describe the designer’s practice beside a compact vertical process diagram with outlined and green pill nodes.

### Client lists

Editorial serif section titles sit beside simple client rows, divided by fine horizontal rules and accompanied by subdued metadata.

### Contact actions

A large sans-serif invitation leads into a green email capsule and outlined social-link capsules.

### Measured component styles

- **Card** (“work — 2023”): background #fbcbcb · text #000000 · radius 10000px · padding 0px 32px · 400 16px sans-serif
- **Navigation item** (“Michael Wandelmaier Product Design & Str”): transparent background · text #000000 · radius 0px · padding 64px 0px 32px 0px · 400 16px sans-serif

## Do

- Use #191816 as the continuous page canvas.
- Make display typography the primary graphic element.
- Reserve #fbcbcb, #f27851, and #34a847 for selective capsule accents.
- Pair PolySans utility text with Canela Web editorial copy.
- Give project photography substantial space and natural color.
- Use quiet rules and whitespace to organize long sections.

## Don't

- Do not introduce unmeasured palette colors as interface colors.
- Do not add gradients, drop shadows, or glossy effects.
- Do not turn every project into a heavy bordered card.
- Do not use the bright accents as large continuous section backgrounds.
- Do not crowd captions or client rows with decorative UI.
- Do not replace the expressive hero with a generic centered banner.

## Agent prompt

Build a new portfolio page in this style using a continuous Warm Charcoal canvas (#191816), with Paper White (#ffffff) as the main text color and Soft Ash (#a9a9a9) for secondary copy. Create a spacious, typographic opening: pair oversized lowercase PolySans-like lettering with sparse rounded capsules in Blush Pink (#fbcbcb), Coral Orange (#f27851), and Signal Green (#34a847). Use a light editorial serif similar to Canela Web for reflective headings and narrative statements, and a clean sans-serif for navigation, captions, and interface text. Organize the page as a generous editorial scroll with documentary project photography, varied wide and paired image layouts, compact uppercase metadata, and subtle graphite dividers. Keep the surface flat: no shadows, gradients, or unnecessary card chrome. Make emphasis come from scale, whitespace, imagery, and a few precise color accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Three-part horizontal header on the dark canvas. | identity at a glance, location context | white sans-serif labels, distributed alignment |
| 2 | hero | Oversized words paired with a pink capsule label. | brand introduction, visual hierarchy | large sans-serif display, rounded color capsule |
| 3 | how-it-works | A second oversized phrase balanced by orange and green pills. | scroll invitation, thematic framing | orange label capsule, green arrow capsule |
| 4 | gallery | Three-column image sequence with varied image crops. | visual storytelling, portfolio preview | photo-led tiles, asymmetric framing |
| 5 | feature-split | Long-form serif statements alongside a compact vertical process diagram. | practice overview, process explanation | editorial serif copy, outlined and green nodes |
| 6 | product-showcase | Single wide project image followed by quiet metadata and caption. | case study preview, project context | full-width device imagery, small uppercase metadata |
| 7 | feature-grid | Two project cards side by side with images and captions. | project comparison, case study browsing | paired photography, compact captions |
| 8 | product-showcase | Single wide environmental project image with caption beneath. | case study preview, environmental context | wide photography, metadata caption |
| 9 | feature-grid | Two image-led project cards in a paired row. | portfolio browsing, project discovery | side-by-side imagery, small project labels |
| 10 | product-showcase | Wide project image followed by a concise caption. | case study preview, workplace experience | full-width interface montage, restrained metadata |
| 11 | feature-grid | Two project images aligned in a paired row with captions. | related projects, case study browsing | paired image cards, small captions |
| 12 | timeline | Editorial title at left and ruled client rows at right. | experience overview, client discovery | serif section heading, thin row dividers |
| 13 | timeline | Second editorial list with title column and ruled project rows. | startup experience overview, client discovery | serif section heading, subtle metadata |
| 14 | cta | Large two-line invitation followed by rounded contact links. | contact conversion, direct email action | oversized sans-serif text, green email capsule |
| 15 | footer | Compact contact and social links on the dark canvas. | email contact, social navigation | text links, minimal footer |

## Source CSS custom properties (selected)

```css
--bg-color: #191816;
--text-color: white;
--text-color-secondary: darkgray;
--lines-color: rgba(100,100,100,0.3);
--accent-color-1: #FBCBCB;
--accent-color-2: #F27851;
--accent-color-3: #34A847;
--section-spacing: calc(4*1.5rem);
--column-spacing: 1.5vw;
--carousel-card-spacing: 4vw;
```

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