# Christopherireland · Design system migration spec

> Source: https://christopherireland.net  ·  Curated by OpenDesign  ·  en

> A masterclass in typographic hierarchy and editorial restraint, demonstrating how a professional portfolio can achieve elegance through simplicity.

## 1. Identity DNA

This system's identity is built on the analogy of a high-end printed magazine layout translated to the web. Its core principle is **strict editorial restraint**, where every design decision serves to present photographic work with clarity and quiet sophistication.

**One-liner:** A refined portfolio for a photographer and director with strict editorial restraint
**Keywords:** minimalist · editorial · photography · directorial
**Analogy:** A high-end printed magazine layout translated to the web

## 2. Color

The color system is a study in reduction, employing a strictly monochrome palette of deep black ink and muted grays. All color is applied to a warm, off-white cream ground, establishing a high-contrast, text-forward canvas.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2F1EC` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#5D5B5B` | secondary text |
| `--muted` | `#BBBBBB` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strictly monochrome ink on a warm, off-white ground with zero color accents

The governing principle is that color never competes with content; it exists solely to provide legible structure and a refined, tactile quality reminiscent of fine print.

## 3. Typography

Typography carries the system's primary expressive weight, establishing a clear voice through its category choices. A high-contrast Didone serif handles large display headings with authority, while a geometric sans-serif provides a clean, modern counterpart for body text.

- **Display:** didone-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 400 | 1px | Primary site name |
| heading | 63px | 1.0 | 400 | 0.6px | Section titles |
| body | 16px | 1.5 | 400 | 0 | General descriptive text |

## 4. Spacing

The layout breathes through a rhythmic, generous vertical spacing that prioritizes whitespace and visual pause.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with a consistent 30px header padding

## 5. Surfaces

Depth is communicated through flat planes and strict separation rather than skeuomorphic effects. A single, crisp 1px horizontal rule provides the sole structural border, cleanly dividing the header from the main content area.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** A single 1px horizontal rule separates the header from the content area

## 6. Layout

The foundational skeleton is a spacious, two-column editorial layout. Navigation and category titles anchor the left column, while the right column is reserved for a large, featured image, creating a clear visual hierarchy.

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

**Skeleton:** A two-column layout with text navigation on the left and a large featured image on the right

## 7. Motion & Interaction

Motion philosophy is calm and purposeful, using smooth, slow transitions to guide the eye without distraction. Changes in background-color and opacity for interactive states occur over a measured 0.2s to 0.3s duration, reinforcing the system's premium, unhurried feel.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth background-color and opacity transitions for interactive states

- **Hover:** Subtle transitions on text links and category titles
- **Click:** Direct navigation to respective sections
- **Transition:** 0.2s to 0.3s transitions for color and opacity changes
- **Keyboard:** Standard browser focus outlines

## 8. Voice & Don'ts

The editorial voice is sophisticated, quiet, and professional, expressed through large, all-caps or title-case serif typography for headlines and understated text links for calls to action.

- **Tone:** Sophisticated, quiet, and professional
- **Headline style:** Large, all-caps or title-case serif typography
- **CTA style:** Understated text links
- **Avoid:** Bright colors / Decorative elements / Busy backgrounds

### Don'ts
- ❌ don't use vibrant accent colors — the screenshot shows a strictly black and white palette on cream
- ❌ don't use rounded corners — the screenshot shows a completely flat, rectangular aesthetic
- ❌ don't use drop shadows — the screenshot shows a clean layout without depth effects
- ❌ don't use small, dense paragraphs — the screenshot shows generous whitespace and large headings
- ❌ don't use decorative sans-serif fonts for headings — the screenshot uses a high-contrast serif for display
- ❌ don't use complex grid overlays — the screenshot relies on simple alignment and whitespace

The system deliberately avoids vibrant color accents, decorative elements, and busy backgrounds, ensuring the photographic work remains the sole focal point.

## System Prompt (paste into AI tool)

```
This website is a refined portfolio for a photographer and director named Christopher Ireland. The design DNA is built on strict editorial restraint, utilizing a warm off-white (#F2F1EC) background and purely monochrome ink (#000000, #5D5B5B). Typography is the primary expressive tool, featuring a Didone serif for large display headings and a geometric sans-serif for body text. The layout is characterized by extreme generous whitespace and a clean two-column structure. Critical constraints include avoiding any vibrant color accents, eliminating rounded corners or drop shadows to maintain a flat, printed feel, and refraining from any complex decorative UI components. The overall tone is sophisticated and quiet.
```