# Ingmar Coenen

> # Ingmar Coenen — Style Reference

## Prompt Content

```
# Ingmar Coenen — Style Reference
> Oversized masthead trên nền trắng — một chữ cái hình học 295px đặt trên một khoảng trắng rộng lớn, với chú thích serif nhỏ và navigation hình pill nổi bên dưới.

**Theme:** light

Portfolio của Ingmar Coenen vận hành như một bức tường gallery biên tập: một wordmark Megazoid khổng lồ chiếm phần đầu trang như masthead tạp chí, sau đó hệ thống lùi vào khoảng trắng tối giản và UI Swiss-type nhỏ xíu. Toàn bộ bảng màu là nhị phân — đen tuyền trên trắng tinh với một màu xám ấm duy nhất cho ghost controls — bởi vì bản thân tác phẩm phải mang màu sắc. Typography chính là thương hiệu: một display face hình học 295px (Megazoid) cho heading hoành tráng, ITC Garamond Light Condensed cho body copy serif mang chất suy tư, và Neue Haas Unica Pro cỡ 12-13px với negative tracking cho toàn bộ interface chrome. Các component tối giản và bo tròn — pill buttons 100px, cards 12px — tạo ra sự căng thẳng giữa giọng display nặng và bán kính bo tròn mềm mại, gần như hoạt hình. Mật độ dày đặc ở cấp UI (khoảng cách 4-14px) nhưng thoáng đãng ở layout (khoảng thở section 80-120px).

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Pure Black | `#000000` | `--color-pure-black` | Primary text, logo wordmark, filled pill buttons, hairline borders — mực cấu trúc giữ mọi element lại với nhau |
| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text trên nền tối — tờ giấy mà mọi thứ nằm trên đó |
| Charcoal Slate | `#3a4042` | `--color-charcoal-slate` | Secondary text, link color, body copy, subtle borders — màu đen hơi mềm để tạo hierarchy dưới primary text |
| Pale Stone | `#f2f2f2` | `--color-pale-stone` | Ghost button và segmented toggle background — surface không trắng duy nhất, dùng cho inactive controls như Grid/List switcher |
| Mid Gray | `#919191` | `--color-mid-gray` | Muted helper text, low-emphasis borders, disabled states |
| Silver | `#cccccc` | `--color-silver` | Lightest border tone, placeholder outlines, decorative strokes |

## Tokens — Typography

### sans-serif — sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-sans-serif`
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.2
- **Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Megazoid — Wordmark display hoành tráng cho site title và bất kỳ project-level hero heading nào. Chữ cái hình học siêu nặng với line-height gần như bằng 0, được dùng tiết kiệm như một full-bleed statement duy nhất tràn ra ngoài container edges. Biến thể Fill dùng cho phiên bản filled/knockout của cùng glyph. · `--font-megazoid`
- **Thay thế:** Druk Wide, Antonio Bold, hoặc một geometric display nặng như Objektiv Blk
- **Weights:** 400
- **Sizes:** 295px
- **Line height:** 0.90
- **Vai trò:** Wordmark display hoành tráng cho site title và bất kỳ project-level hero heading nào. Chữ cái hình học siêu nặng với line-height gần như bằng 0, được dùng tiết kiệm như một full-bleed statement duy nhất tràn ra ngoài container edges. Biến thể Fill dùng cho phiên bản filled/knockout của cùng glyph.

### ITC Garamond Std Light Condensed — Serif biên tập cho about/bio paragraphs mang chất suy tư và bất kỳ long-form copy nào cần giọng văn chương. Light Condensed cut cố tình phản-corporate — nó đọc như một ghi chú bên lề sâu sắc bên cạnh masthead Megazoid khổng lồ, chứ không phải văn xuôi marketing. · `--font-itc-garamond-std-light-condensed`
- **Thay thế:** Cormorant Garamond Light, EB Garamond Light, hoặc Playfair Display
- **Weights:** 400
- **Sizes:** 36px
- **Line height:** 0.94
- **Vai trò:** Serif biên tập cho about/bio paragraphs mang chất suy tư và bất kỳ long-form copy nào cần giọng văn chương. Light Condensed cut cố tình phản-corporate — nó đọc như một ghi chú bên lề sâu sắc bên cạnh masthead Megazoid khổng lồ, chứ không phải văn xuôi marketing.

### Neue Haas Unica Pro — Primary UI và body typeface — con ngựa thồ cho navigation labels, project metadata, links, và inline annotations. Được set cực kỳ chặt ở -0.02em letter-spacing và 1.1 line-height, tạo cho label mật độ compact kiểu Swiss-catalog. · `--font-neue-haas-unica-pro`
- **Thay thế:** Inter, Neue Haas Grotesk, hoặc Helvetica Neue Medium
- **Weights:** 400
- **Sizes:** 12px, 13px
- **Line height:** 1.10
- **Letter spacing:** -0.02em
- **Vai trò:** Primary UI và body typeface — con ngựa thồ cho navigation labels, project metadata, links, và inline annotations. Được set cực kỳ chặt ở -0.02em letter-spacing và 1.1 line-height, tạo cho label mật độ compact kiểu Swiss-catalog.

### Megazoid Regular — Megazoid Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-megazoid-regular`
- **Weights:** 400
- **Sizes:** 295px
- **Line height:** 0.9
- **Vai trò:** Megazoid Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | — | `--text-caption` |
| heading | 36px | 0.94 | — | `--text-heading` |
| display | 295px | 0.9 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 12px |
| images | 12px |
| buttons | 100px |
| smallElements | 4px |

### Layout

- **Section gap:** 80px
- **Card padding:** 14px
- **Element gap:** 10px

## Components

### Sticky Navigation Bar
**Vai trò:** Persistent top header với rounded pill nav items và một CTA

Thanh trắng full-width không có border nhìn thấy được, nổi cách mép trên 8px. Cụm trái: ba nav links hình pill ('Work', 'About', 'Capabilities') với radius 100px, top padding 9px, horizontal padding 14px, text Neue Haas Unica Pro Medium 12px màu #000000. Cụm phải: một filled pill button đen 'Start a project' với text trắng. Thanh nằm như một hòn đảo nổi khi scroll, có shadow nhẹ hoặc chỉ tiếp giáp với mép.

### Filled Pill Button
**Vai trò:** Primary action — CTA có độ mạnh màu duy nhất trong hệ thống

border-radius 100px, background #000000, text #ffffff. Horizontal padding 14px, vertical padding 9px. Neue Haas Unica Pro 12px medium, letter-spacing -0.02em. Không border. Hình dạng bo tròn hoàn toàn làm mềm một khối đen vốn có vẻ hung hăng — một quyết định signature khiến CTA trông thân thiện dù đơn sắc khắc nghiệt.

### Ghost Nav Pill
**Vai trò:** Nav link inactive hoặc mặc định

Cùng radius 100px và text Neue Haas Unica Pro 12px như filled button, nhưng background trong suốt và text #000000. Khi hover hoặc active, background chuyển thành #000000 với text đảo thành #ffffff — một toggle đơn sắc thay vì đưa vào bất kỳ sắc màu mới nào.

### Segmented View Toggle
**Vai trò:** Grid/List layout switcher ở cuối trang

Hai pill segments ('Grid' và 'List') kề nhau trong một capsule chung. Active segment: background #000000 với text #ffffff. Inactive segment: background #f2f2f2 với text #000000. Radius 100px trên outer container, gap nội bộ 4px. Labels Neue Haas Unica Pro 12px.

### Work Card — Image
**Vai trò:** Project tile với khu vực sản phẩm/ảnh chụp

Ảnh full-bleed bên trong container radius 12px, không có card border nhìn thấy được. Metadata (project name, client, number) được overlay bằng text Neue Haas Unica Pro 12px màu trắng ở góc dưới-trái của ảnh, set với -0.02em tracking. Aspect ratio thay đổi theo project nhưng luôn crop sát — đối tượng là hero, không có decorative framing.

### Work Card — Typographic
**Vai trò:** Project tile thể hiện dưới dạng type-only artwork

Bề mặt background kem/trắng ấm bên trong card radius 12px. Nội dung trung tâm là một sắp xếp vòng tròn của text lặp lại (ví dụ 'Haven-1' xoay quanh một vòng tròn) với center label chữ nhỏ ('MICROGRAVITY RESEARCH LAB') set bằng Neue Haas Unica Pro 12px. Không có yếu tố ảnh chụp — bản thân typography là project artifact.

### About Paragraph Block
**Vai trò:** Long-form bio copy

Text block canh phải hoặc neo phải set bằng ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000. Không có max-width constraint — text nằm như một cột hẹp canh theo lề phải. Line-height cực kỳ chặt ở cỡ display tạo cho paragraph một trọng lượng nén, gần như headline dù là body copy.

### Masthead Wordmark
**Vai trò:** Site identity — một display heading full-bleed

Megazoid Regular ở 295px, line-height 0.9, #000000, set flush-left và tràn ra ngoài viewport edges. Một dòng duy nhất. Không margin trên hoặc dưới — nó CHÍNH LÀ trang. Biến thể Megazoid Fill có thể được dùng cho knock-out hoặc reversed treatments trên bề mặt tối.

### Link with Underline
**Vai trò:** Inline link trong body hoặc nav context

Neue Haas Unica Pro 12px, text #3a4042, underline 1px solid #3a4042 cách baseline ~4px. Không có hover state đổi màu — chỉ weight hoặc underline thickness thay đổi. Underline hoạt động như một hairline divider hơn là decorative emphasis.

### Card Metadata Label
**Vai trò:** Small caps project metadata overlay trên ảnh

Neue Haas Unica Pro 12px, letter-spacing -0.02em, uppercase, #ffffff trên ảnh tối hoặc #3a4042 trên bề mặt sáng. Set trong một stack hai dòng chặt (name ở dòng 1, detail ở dòng 2) với row gap ~4px.

## Do's and Don'ts

### Nên
- Dùng Megazoid ở 295px với line-height 0.9 cho bất kỳ site-level display heading nào — đây là element duy nhất xứng đáng full-bleed real estate
- Set tất cả UI text bằng Neue Haas Unica Pro 12-13px với letter-spacing -0.02em và line-height 1.1
- Dùng border-radius 100px trên mọi interactive element (buttons, nav pills, toggles) để làm mềm sự đơn sắc khắc nghiệt
- Dùng ITC Garamond Light Condensed 36px cho bất kỳ reflective hoặc editorial paragraph nào dài hơn hai dòng
- Duy trì khoảng thở dọc 80-120px giữa các major layout sections
- Giữ toàn bộ palette ở đen, trắng, charcoal, và pale stone — để project imagery cung cấp bất kỳ màu sắc nào
- Dùng radius 12px cho tất cả cards và image containers, 4px cho inline elements và hairline details

### Không nên
- Không bao giờ đưa vào một chromatic color — độ 0% colorfulness là cấu trúc của thương hiệu
- Không bao giờ set body copy dưới 12px hoặc trên 36px (type system cố tình là hệ hai scale: tiny UI và monumental display)
- Không bao giờ dùng box-shadows cho elevation — dựa vào tương phản đen/trắng rõ rệt và corner radius 12px để phân tách bề mặt
- Không bao giờ canh giữa Garamond about paragraph — nó sống neo phải như một quyết định biên tập có chủ đích
- Không bao giờ dùng system font cho body hoặc nav — tight tracking của Neue Haas Unica Pro là signature, không phải fallback
- Không bao giờ thêm decorative gradients, textures, hoặc background patterns vào cards hoặc surfaces
- Không bao giờ dùng line-height trên 1.2 cho Neue Haas Unica Pro — tight 1.1 là một phần của tính cách Swiss-catalog

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Canvas | `#ffffff` | Default page background, trường thị giác chiếm ưu thế |
| 2 | Stone Fill | `#f2f2f2` | Ghost controls và inactive toggle segments |
| 3 | Ink Surface | `#000000` | Filled pill buttons và inverted logo zone |

## Elevation

- **Floating Navigation Bar:** `0 2px 12px rgba(0,0,0,0.06)`

## Imagery

Nhiếp ảnh tập trung vào sản phẩm và crop chặt — đối tượng lấp đầy khung hình không có lifestyle context hoặc environmental staging. Món đồ nội thất gỗ trong work grid được chụp trên nền studio trung tính với bóng đổ kịch tính, xử lý đối tượng như tác phẩm điêu khắc. Không có ảnh người, không có color-grading ngoài tông màu tự nhiên, và không có decorative illustration. Type-only project cards (như bố cục vòng tròn 'Haven-1') thay thế imagery khi project CHÍNH LÀ typography. Mật độ thị giác chủ yếu là text-and-object — không có atmospheric hoặc environmental photography xuất hiện ở bất kỳ đâu.

## Layout

Trang mở đầu bằng một wordmark monumental full-bleed (INGMAR ở 295px) tràn ra ngoài cả hai mép viewport, thiết lập hierarchy kiểu magazine-cover. Bên dưới masthead, một floating sticky nav bar nằm như một hòn đảo ngang. About paragraph được neo phải vào lề phải, tạo ra sự bất đối xứng có chủ đích so với logo canh trái. Work section dùng grid 2 cột gồm project cards với aspect ratio khác nhau — image cards một bên, typographic cards một bên — tạo nhịp điệu bàn cờ. Cards dùng radius 12px và không có border nhìn thấy được; sự phân tách đạt được chỉ qua white space. Ở cuối trang, một Grid/List toggle nhỏ gọn neo layout. Section gaps là 80-120px, đủ rộng để type khổng lồ thở trong khi giữ UI compact. Navigation là một sticky top bar duy nhất không có sidebar, không mega-menu, không footer ngoài view toggle.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #ffffff
- border: #3a4042
- accent: #000000 (dùng cho filled pill buttons — 'accent' duy nhất trong hệ nhị phân này)
- muted text: #919191
- ghost surface: #f2f2f2
- primary action: #000000 (filled action)

**Example Component Prompts**

1. Tạo một sticky navigation bar: background trắng #ffffff, nav links hình pill radius 100px bên trái bằng Neue Haas Unica Pro 12px #000000 với horizontal padding 14px và vertical padding 9px. Bên phải, một filled pill button đen (bg #000000, text #ffffff, radius 100px, cùng padding) ghi 'Start a project'. Thanh nổi cách mép trên 8px với shadow nhẹ 0 2px 12px rgba(0,0,0,0.06).

2. Tạo một monumental masthead: Megazoid Regular 295px, line-height 0.9, #000000, set flush-left tràn ra ngoài viewport edges, chiếm toàn bộ phần đầu trang không có margin.

3. Tạo một work grid card: container border-radius 12px, ảnh sản phẩm full-bleed bên trong, với metadata overlay bằng Neue Haas Unica Pro 12px #ffffff, letter-spacing -0.02em, uppercase, đặt ở góc dưới-trái với padding 14px.

4. Tạo một about paragraph: ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000, neo phải vào lề phải, không có max-width constraint, đọc như một editorial column hẹp.

5. Tạo một Grid/List toggle: hai pill segments kề nhau trong một capsule chung radius 100px, gap 4px giữa chúng. Active segment bg #000000 với text #ffffff, inactive segment bg #f2f2f2 với text #000000. Labels bằng Neue Haas Unica Pro 12px.

## Typographic Philosophy

Hệ thống vận hành trên một hierarchy ba giọng type tạo ra sự căng thẳng có chủ đích: Megazoid hét ở 295px như một masthead mỗi trang một lần, Garamond Light Condensed thì thầm ở 36px trong editorial paragraphs, và Neue Haas Unica Pro ở 12px với -0.02em tracking xử lý tất cả functional UI. Không có font nào cầu nối ba scale này — không có intermediate 40px hay 60px. Điều này có nghĩa bất kỳ trang mới nào hoặc cam kết với register monumental (Megazoid) hoặc register micro-catalog (Unica), và Garamond chỉ xuất hiện cho human-voiced, reflective copy. Negative letter-spacing trên UI font và độ chặt cực đoan của display line-heights (0.9-0.94) là signature: type cảm giác nén và tự tin thay vì thoáng và thân thiện.

## Similar Brands

- **Pentagram** — Cùng cách tiếp cận editorial-portfolio: type khổng lồ làm identity, đơn sắc khắc nghiệt, work được trình bày dưới dạng generous full-bleed case study cards
- **Rauno Freiberg** — Cùng Swiss-grid minimalism với oversized display type chiếm ưu thế trên canvas trắng và tiny UI labels trong tight sans-serif
- **Locomotive (locomotive.ca)** — Cùng kỷ luật dark-text-on-white với large custom wordmark, navigation hình pill, và project-grid card layouts
- **Manuel Bortoletti** — Cùng monolithic typographic identity — một oversized display letterform duy nhất ở đầu trang trên vast white field
- **Haus** — Cùng pill-button navigation trên minimal white portfolio layout với tight Swiss sans-serif UI labels

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pure-black: #000000;
  --color-canvas-white: #ffffff;
  --color-charcoal-slate: #3a4042;
  --color-pale-stone: #f2f2f2;
  --color-mid-gray: #919191;
  --color-silver: #cccccc;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-heading: 36px;
  --leading-heading: 0.94;
  --text-display: 295px;
  --leading-display: 0.9;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --section-gap: 80px;
  --card-padding: 14px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-full: 100px;
  --radius-full-2: 200px;

  /* Named Radii */
  --radius-cards: 12px;
  --radius-images: 12px;
  --radius-buttons: 100px;
  --radius-smallelements: 4px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-stone-fill: #f2f2f2;
  --surface-ink-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pure-black: #000000;
  --color-canvas-white: #ffffff;
  --color-charcoal-slate: #3a4042;
  --color-pale-stone: #f2f2f2;
  --color-mid-gray: #919191;
  --color-silver: #cccccc;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-heading: 36px;
  --leading-heading: 0.94;
  --text-display: 295px;
  --leading-display: 0.9;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-full: 100px;
  --radius-full-2: 200px;
}
```