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

# Ingmar Coenen · Design System

> Oversized typography meets quietly confident digital work.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.ingmarcoenen.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._

An expansive white portfolio canvas pairs a monumental custom wordmark with a restrained editorial introduction. A two-column project gallery lets varied client visuals provide colour and texture without changing the site’s monochrome frame.

## North star

Let monumental typography and generous white space frame the work; keep interface chrome quiet and let project imagery supply colour.

## Overview

The visual strategy is built around contrast in scale rather than interface decoration. Pure white (#ffffff) dominates the canvas, while near-black (#000000) gives the oversized custom masthead and selected controls their weight. Muted charcoal (#3a4042) carries most links and supporting text; lighter measured greys (#919191 and #cccccc) appear as secondary text tones rather than prominent brand accents. Typography is the identity: a geometric display face creates an almost edge-to-edge nameplate, while a light condensed Garamond gives the introduction an editorial, literary voice. Compact sans-serif labels keep navigation and metadata practical. The opening is exceptionally spacious, with a small navigation row and right-aligned introduction set below the masthead. Projects then shift into a tightly joined two-column image grid, allowing photography, interface mockups, and motion work to bring colour. Rounded pale navigation pills and a black active view switch are restrained exceptions to the otherwise flat, borderless presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and dominant background, keeping the introduction and project gallery visually open. |
| Soft Graphite | `#3a4042` | `--color-soft-graphite` | neutral | Primary muted text and arrow-link tone across navigation and supporting content. |
| Ink Black | `#000000` | `--color-ink-black` | brand | Oversized masthead, strongest text, and the dark active Grid control. |
| Quiet Grey | `#919191` | `--color-quiet-grey` | neutral | Secondary text tone; keep it subordinate and avoid using it for large interface surfaces. |
| Pale Grey | `#cccccc` | `--color-pale-grey` | neutral | Light secondary text tone; not a defining canvas or project-image colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#3a4042` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

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

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Unica Pro Medium | `--font-body` | webfont | 400 | Body copy, captions, navigation, and links | Inter |
| ITC Garamond Std Light Condensed | `--font-display` | webfont | 400 | Editorial introduction and large serif heading | Cormorant Garamond |
| Megazoid Regular | `--font-megazoid-regular` | webfont | 400 | Oversized display wordmark | Bowlby One SC |

- **Neue Haas Unica Pro Medium:** Compact sans-serif with subtly tight tracking; use regular weight and restrained, practical labels.
- **ITC Garamond Std Light Condensed:** Light, narrow serif creates a literary contrast with the bold display mark; keep lines close.
- **Megazoid Regular:** Use for the huge, tightly framed nameplate only; preserve its heavy, custom geometric character.

### Type scale — Custom (ratio ≈ 4.764, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 295px | 400 | 0.9 | 0 | — | Megazoid Regular | Huge custom nameplate spanning the top of the portfolio. |
| h1 | 36px | 400 | 0.94 | 0 | — | ITC Garamond Std Light Condensed | Editorial serif introduction and prominent descriptive copy. |
| body | 13px | 400 | 1.1 | -0.02em | — | Neue Haas Unica Pro Medium | Compact navigation, project labels, and supporting text. |
| caption | 12px | 400 | 1.1 | -0.02em | — | Neue Haas Unica Pro Medium | Small project-status and metadata labels. |
| link | 13px | 400 | 1.1 | -0.02em | — | Neue Haas Unica Pro Medium | Compact navigation and arrow-style project links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 9, 10, 14, 20, 80, 120 px.
- Section rhythm 320px · element gap 10px · card padding — · max content width 1432px.

The page uses a spacious, near-full-width canvas with a measured maximum width of 1432px. A monumental wordmark spans the top, followed by a compact navigation row and a right-aligned serif introduction. Large areas of uninterrupted white separate the introduction from the work. The portfolio section becomes a two-column grid of closely adjacent, large project tiles, with labels kept small and unobtrusive. A compact Grid/List switch anchors the gallery boundary. The page closes with a sparse client-logo and contact area.

## Shape & elevation

- Radius: button `9999px` · media `12px` · link `4px` · xs `4px` · sm `12px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface reads as flat: measured data reports no shadows, and the white canvas has no defining bordered panels. Separation comes from generous whitespace and the edges between project images. Navigation uses pale pill-shaped fills, while the selected Grid control is solid black. Keep any layering limited to content embedded within project artwork.

## Imagery

Project imagery is the main source of colour: architectural and product photography, device and website mockups, graphic compositions, and video previews appear in large tiles. Preserve each project’s native visual treatment rather than applying a common tint. Frames are clean and closely arranged, with softly rounded corners visible on media; small status labels sit over or near the artwork.

## Components

### Oversized wordmark

A custom, heavy black display name dominates the top edge and is cropped tightly by the viewport.

### Pill navigation

Small pale-grey rounded controls hold Work, About, and Capabilities; the Start a project link sits separately at the right.

### Editorial introduction

A narrow, right-aligned block of light condensed serif copy sits below the navigation row.

### Project gallery

Large two-column media tiles show varied client projects with restrained labels and no card chrome.

### View switch

Grid and List controls sit at the gallery start; Grid is the black active pill and List is light.

### Project status

Small Coming Soon labels mark selected work without turning into prominent badges.

### Footer contact and logos

A low-density closing area pairs a client-logo row with enquiry details, social links, and legal links.

### Measured component styles

- **Primary button** (“About”): background #f2f2f2 · text #0000ee · radius 100px · padding 9px 14px 0px 14px · 400 12px sans-serif
- **Secondary button** (“Grid”): background #000000 · text #000000 · radius 100px · padding 9px 14px 0px 14px · 400 12px sans-serif
- **Link** (“⮑”): transparent background · text #3a4042 · radius 0px · padding 0px · 400 13px Neue Haas Unica Pro Medium

## Do

- Keep the canvas pure white and let whitespace carry the pacing.
- Make the display wordmark dramatically larger than every other text element.
- Pair the custom display with a light condensed editorial serif.
- Keep navigation labels compact and controls visually quiet.
- Use project artwork as the primary source of colour.
- Align project tiles into a clean two-column gallery.

## Don't

- Do not add gradients or decorative colour bands to the site chrome.
- Do not wrap every project in a bordered or shadowed card.
- Do not crowd the hero with extra copy or controls.
- Do not force project imagery into a uniform colour treatment.
- Do not use large sans-serif body paragraphs.
- Do not invent bright brand accents from colours inside project artwork.

## Agent prompt

Build a portfolio page in the Ingmar Coenen visual style. Use Gallery White (#ffffff) as the dominant canvas, Ink Black (#000000) for a huge custom display wordmark and active controls, and Soft Graphite (#3a4042) for muted links and supporting text. Set a compact sans-serif such as Inter for navigation and labels, and a light condensed editorial serif such as Cormorant Garamond for the introduction. Keep the hero sparse: oversized name first, then a small navigation row and a right-aligned intro, with generous empty space before the work. Present projects in a clean two-column gallery with large unfiltered image areas and minimal status labels. Use pale pill controls sparingly, avoid shadows and heavy borders, and finish with a restrained logo, contact, and legal footer. Let project assets—not interface chrome—supply colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized wordmark above compact navigation; a right-aligned serif introduction sits beneath, with extensive open canvas. | clear portfolio navigation, project enquiry link, Grid/List view switch | custom oversized wordmark, pale pill controls, right-aligned serif copy |
| 2 | gallery | A spacious portfolio area opens into a two-column grid of large project media tiles, followed by a sparse closing area. | Grid/List view toggle, project links, status labels | paired media tiles, small Coming Soon labels, client-logo row |

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