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

# Daniël van der Winden · Design System

> Quiet editorial design, led by words and work.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.daniel.pizza/ · **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 restrained personal portfolio pairs warm neutral space with a distinctive serif-and-sans typographic voice. A narrow reading column, fine dividers, and selected project imagery make the long page feel like an editorial publication.

## North star

Treat the page like a quietly paced editorial essay: warm neutral canvas, distinctive type, narrow reading measure, and imagery only where it supports the story.

## Overview

The page is built on a warm, light-gray canvas (#ededea), with nearly all content kept within that continuous field rather than separated into strong color bands. Dark gray text and muted secondary tones provide a soft but readable contrast. Blanco serif carries the long-form paragraphs and editorial project descriptions, while Degular sans-serif handles the identity, headings, captions, and compact labels. The opening places the main introduction in a narrow right-side column, leaving generous open space around it; subsequent work samples and sections follow a similarly focused reading column. Images appear as evidence of the work, not decoration: project artwork, book photography, and a speaking image are set into the page with minimal framing. Small white link previews and an occasional pale-blue card add quiet surface contrast. Fine gray rules separate content groups, while generous vertical pauses give the long portfolio an unhurried rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#ededea` | `--color-warm-paper` | brand | Dominant page canvas; continues behind the introduction and portfolio sections without prominent banding. |
| Slate Reading | `#374151` | `--color-slate-reading` | neutral | Muted body and link text, including copy inside project preview cards. |
| Quiet Rule | `#d9d9d6` | `--color-quiet-rule` | neutral | Fine borders and section dividers; supports separation without strong contrast. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Secondary text and heading tones where a softer emphasis than the main ink is needed. |
| Pale Line | `#e5e7eb` | `--color-pale-line` | semantic | Subtle border around white link-preview cards; a utility edge rather than a defining brand color. |
| Warm Ink | `#2a2a28` | `--color-warm-ink` | neutral | Primary dark text and links, providing readable contrast against the warm canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Small link-preview surfaces and button or text details, not the page-wide background. |
| Deep Charcoal | `#111827` | `--color-deep-charcoal` | neutral | Compact navigation and link text, including the name in the top bar. |
| Mist Blue | `#d9eaf2` | `--color-mist-blue` | surface | A pale-blue card surface appearing in project content; a localized accent, not a page theme. |
| Muted Slate | `#6b7280` | `--color-muted-slate` | neutral | Occasional subdued text and link detail, secondary to the main reading colors. |
| Quiet Gray | `#7f7f7f` | `--color-quiet-gray` | neutral | Sparse tertiary text detail; keep its use restrained. |

### Semantic aliases

`--color-canvas` → `#ededea` (Warm Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#d9eaf2` (Mist Blue) · `--color-text` → `#2a2a28` (Warm Ink) · `--color-text-muted` → `#374151` (Slate Reading) · `--color-text-subtle` → `#666666` (Soft Graphite) · `--color-border` → `#d9d9d6` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2a2a28` | `#ededea` | 12.26:1 | AAA |
| `#2a2a28` | `#ffffff` | 14.38:1 | AAA |
| `#2a2a28` | `#d9eaf2` | 11.64:1 | AAA |
| `#374151` | `#ededea` | 8.79:1 | AAA |
| `#374151` | `#ffffff` | 10.31:1 | AAA |
| `#374151` | `#d9eaf2` | 8.34:1 | AAA |
| `#666666` | `#ededea` | 4.89:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#d9eaf2` | 4.65:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Blanco | `--font-body` | webfont | 400, 500 | Editorial body copy, descriptive paragraphs, and text links. | Lora |
| Degular | `--font-display` | webfont | 400, 600, 500 | Navigation, headings, captions, buttons, and uppercase eyebrow labels. | DM Sans |

- **Blanco:** Regular weight dominates; use natural sentence case and comfortable, open leading for long reading.
- **Degular:** Use regular to medium weights, with stronger weight for selected headings; eyebrow labels use uppercase with loose tracking.

### Type scale — Major Third (ratio ≈ 1.26, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.15 | 0 | — | Degular | Primary page identity or lead heading in the introduction. |
| h2 | 32px | 500 | 1.25 | 0 | — | Degular | Section headings such as work, résumé, and speaking. |
| h3 | 28px | 400 | 1.2 | 0 | — | Blanco | Editorial subheadings and project titles within content. |
| body | 20px | 400 | 1.5 | 0 | — | Blanco | Long-form introduction and project descriptions. |
| caption | 16px | 400 | 1.35 | 0 | — | Degular | Image credits, dates, and compact supporting labels. |
| button | 16px | 400 | 1.5 | 0 | — | Degular | Compact utility controls and actions. |
| link | 20px | 400 | 1.3 | 0 | — | Blanco | Inline text links and project references. |
| eyebrow | 14px | 400 | 1.5 | 0.1em | uppercase | Degular | Small uppercase labels introducing grouped content. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 12, 16, 20, 24, 27, 32, 48, 60, 62, 64 px.
- Section rhythm 62px · element gap 16px · card padding — · max content width —.

A single long page uses a narrow reading column against a much wider warm canvas. The first viewport offsets the introduction to the right of center, with broad empty space around the copy and a large project image below. Later content returns to a consistent text-led column, while selected images can extend wider than the copy. Section transitions rely on vertical breathing room and thin rules rather than colored bands. Keep alignment predominantly left and preserve an unhurried, comfortable reading density.

## Shape & elevation

- Radius: button `50%` · card `3px` · media `3px` · link `8px` · xs `2px` · sm `3px` · md `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat: no visible shadow system or stacked card effects. Thin gray rules distinguish content groups, and occasional white or pale-blue link previews provide modest surface contrast. Keep corners restrained where card treatments appear and avoid adding depth that competes with the editorial flow.

## Imagery

Project imagery is a curated record of design work: brand artwork, publication spreads, book photography, and a speaking photograph. Images sit directly within the editorial flow, with restrained captions or credits, rather than being treated as decorative hero backgrounds. Preserve each asset’s own color and crop; the portfolio’s muted identity comes from the surrounding canvas and typography, not from forcing every image into a monochrome treatment.

## Components

### Top navigation

A minimal header places the personal name at the upper left and a compact utility icon at the opposite side, using small Degular sans-serif text.

### Introduction

A right-offset text block pairs a Degular sans heading with Blanco serif lead copy and a longer biography, surrounded by generous open canvas.

### Project media

Large project images and publication photographs appear inline, often followed by a small caption or photo credit.

### Link preview

Compact white project previews use muted text and a fine #e5e7eb border; treat them as supporting references rather than prominent calls to action.

### Section divider

A thin #d9d9d6 hairline separates major content groups without introducing a new background band.

### Résumé and speaking lists

Compact date-and-description rows organize professional history and talks, with subtle secondary date labels and text-led links.

### Measured component styles

- **Primary button** (“Skip to main content”): background #1a202c · text #ffffff · radius 0px · padding 8px 12px · 400 16px Degular
- **Link** (“for years”): transparent background · text #111827 · radius 0px · padding 0px · 400 20px Blanco
- **Card**: background #d9eaf2 · text #374151 · radius 3px · padding 0px · 400 20px Blanco
- **Navigation item** (“Daniël van der Winden”): transparent background · text #111827 · radius 0px · padding 0px · 400 16px Degular

## Do

- Keep the warm-gray canvas continuous across the page.
- Use Blanco for reading copy and Degular for headings and interface labels.
- Let whitespace create the section rhythm.
- Keep the main reading column narrow and left-aligned.
- Use thin rules for quiet content separation.
- Place project imagery in context with restrained captions.

## Don't

- Do not introduce bold, saturated color bands.
- Do not center every heading or content block.
- Do not turn project previews into large promotional cards.
- Do not add conspicuous shadows or layered UI effects.
- Do not replace editorial copy with dense dashboard-style layouts.
- Do not recolor project imagery to match the neutral canvas.

## Agent prompt

Build a new page in Daniël van der Winden’s quiet editorial portfolio style. Use Warm Paper (#ededea) as the continuous canvas, Warm Ink (#2a2a28) and Slate Reading (#374151) for text, and Quiet Rule (#d9d9d6) for subtle dividers. Set long-form copy in a Blanco-like serif and navigation, headings, captions, and controls in a Degular-like sans. Keep content in a narrow, mostly left-aligned reading column; allow an opening introduction to sit off-center with ample surrounding space. Create rhythm with generous vertical pauses and hairlines, not colored section bands. Show project photography and artwork as evidence within the story, with concise captions. Use Gallery White (#ffffff) for small link previews and Mist Blue (#d9eaf2) only as a localized card surface. Keep the interface flat, restrained, and readable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | One long, warm-gray canvas; offset introduction followed by a narrow editorial column, inline media, lists, and footer links. | Long-form scrolling, Inline project links, Chronological résumé and talks | Serif body with sans headings, Thin section dividers, Inline project imagery, Sparse link-preview cards |

## Source CSS custom properties (selected)

```css
--view-transition-duration: 0.3s;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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