# Ingmarcoenen · Design system migration spec

> Source: https://ingmarcoenen.com  ·  Curated by OpenDesign  ·  en

> A masterclass in minimalist portfolio design, using extreme scale and strict monochrome to create a memorable and professional presence.

## 1. Identity DNA

This design system operates on the principle of contrast as a structural element, not merely an aesthetic flourish. The identity is forged from the tension between **extreme typographic scale** and **restrained monochrome**, creating a portfolio that feels both editorially bold and digitally precise.

**One-liner:** A bold, monochromatic portfolio site anchored by massive custom typography and clean minimalism.
**Keywords:** Bold · Minimal · Experimental · Creative · Digital
**Analogy:** High-contrast editorial portfolio with extreme typographic scale

## 2. Color

The color system is a strict monochrome palette, a deliberate reduction that places all visual emphasis on form, typography, and photographic content. Pure black and white provide the primary contrast, with subtle grays used for depth and hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f2f2f2` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#3a4042` | secondary text |
| `--muted` | `#919191` | placeholder |
| `--muted-soft` | `#cccccc` | weak hint |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochrome with occasional photography

The principle is that a limited palette forces clarity, ensuring that the work itself remains the sole source of chromatic expression.

## 3. Typography

Typography carries the primary voice, with a dramatic scale range defining the site's rhythm. A custom condensed serif commands the introductory statement, while a neo-grotesque sans-serif handles all navigation and body text with clean, functional directness.

- **Display:** display-sans
- **Body:** neo-grotesque-sans
- **Mono:** serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 295px | 0.9 | 400 | -0.24px | Massive hero branding |
| body | 13px | 1.1 | 400 | -0.26px | Navigation and UI text |
| heading | 36px | 0.94 | 400 | -0.26px | Introductory paragraph |

## 4. Spacing

Spacing follows an asymmetrical, generous rhythm, using whitespace as an active compositional tool rather than passive negative space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 80 / 120 px
- **Rhythm:** Asymmetrical with generous whitespace

## 5. Surfaces

Surfaces are rendered flat and borderless by default, creating a clean, graphic plane. Depth is implied through photographic content and typographic weight, with a single, precise rule: a 1px solid black border appears only to denote an active state.

- **Radius:** sm 4px · md 12px · lg 12px · pill 100px
- **Borders:** 1px solid black for active states, otherwise borderless

## 6. Layout

The layout skeleton is built on an asymmetrical grid, anchored by a massive, top-aligned hero that dominates the viewport. Content blocks are then offset against this anchor, creating a dynamic, non-uniform flow that prioritizes visual impact over rigid alignment.

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

**Skeleton:** Asymmetrical grid with massive top-aligned hero and offset content blocks

## 7. Motion & Interaction

Motion is employed with surgical restraint, serving clarity over spectacle. All transitions are smooth fades, designed to guide focus and mark state changes without introducing visual noise or competing with the static composition.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Fade transitions

- **Hover:** Background color shifts for buttons and links
- **Click:** Subtle scale or color change
- **Transition:** All properties transition smoothly
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is professional, direct, and personal, mirroring the design's clarity. Headlines are massive and abstract, while calls to action are intentionally subtle, using rounded forms that recede rather than shout.

- **Tone:** Professional, direct, and personal
- **Headline style:** Massive, bold, and abstract
- **CTA style:** Subtle, rounded buttons with minimal emphasis
- **Avoid:** Overly decorative elements / Busy layouts / Loud colors

### Don'ts
- ❌ Don't use a multi-color palette — screenshot shows strictly monochrome elements
- ❌ Don't use small display typography — screenshot shows massive, viewport-filling hero text
- ❌ Don't use heavy drop shadows — screenshot shows completely flat surfaces
- ❌ Don't use rigid grid alignments — screenshot shows offset, asymmetrical layouts
- ❌ Don't use complex icon sets — screenshot shows minimal, custom text-based branding
- ❌ Don't use standard serif fonts for body text — screenshot shows a condensed serif only for the main intro paragraph

This system deliberately avoids decorative complexity, loud color, and busy layouts to ensure the focus remains squarely on the creative work.

## System Prompt (paste into AI tool)

```
This is a high-contrast, monochromatic portfolio site for a digital design director. The design DNA is defined by extreme typographic scale using custom display fonts and a neo-grotesque sans-serif for UI elements. Key colors are pure black (#000000) on a white (#ffffff) or light gray (#f2f2f2) background. The layout is asymmetrical and generous with whitespace, using 12px and 4px border-radii for UI components. Critical donts include: don't use multi-color palettes, don't use small display typography, and don't use heavy shadows. The tone is professional, direct, and personal, focusing on the work rather than flashy visual effects.
```