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

# CHRISTOPHER IRELAND CREATIVE · Design System

> Quiet editorial structure for cinematic photography.

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

A restrained portfolio homepage pairs oversized literary serif typography with a warm, near-white canvas and a single cinematic photograph. A simple split layout lets project categories and a compact introduction share attention with the image.

## North star

Keep the interface quiet and typographic so one cinematic photograph and a few oversized editorial labels carry the page.

## Overview

The page uses a warm off-white canvas (#f2f1ec) as an almost uninterrupted field, keeping attention on the typography and the featured photograph. Black anchors the large nameplate, category links and small utility text; muted grays distinguish the introductory line and supporting heading text without adding decorative color. Playfair Display supplies the expressive editorial voice, appearing in the very large centered masthead and the oversized category labels. Rubik is reserved for compact, practical copy such as the photographer’s role and project descriptor. The header spans the page and ends with a thin dark divider. Below it, the content sits within a centered, constrained frame: brief text and an About link occupy the upper row, then large category links sit opposite a landscape photograph. The image’s amber and deep brown tones are photographic content, not interface colors. Spacious gaps, flat surfaces and minimal ornament keep the composition calm and gallery-like.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#f2f1ec` | `--color-gallery-ivory` | surface | Dominant page canvas across the header and content area. |
| Print Black | `#000000` | `--color-print-black` | neutral | Masthead, prominent category labels, links and compact utility text. |
| Soft Charcoal | `#5d5b5b` | `--color-soft-charcoal` | neutral | Muted introductory copy and supporting text. |
| Graphite Heading | `#333332` | `--color-graphite-heading` | neutral | Secondary heading text; keep subtle and subordinate to the main display type. |

### Semantic aliases

`--color-canvas` → `#f2f1ec` (Gallery Ivory) · `--color-text` → `#000000` (Print Black) · `--color-text-muted` → `#5d5b5b` (Soft Charcoal) · `--color-text-subtle` → `#333332` (Graphite Heading)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f1ec` | 18.57:1 | AAA |
| `#5d5b5b` | `#f2f1ec` | 5.97:1 | AA |
| `#333332` | `#f2f1ec` | 11.18:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Rubik | `--font-body` | webfont | 400 | Compact supporting copy, role labels, links and navigation text. | DM Sans |
| Playfair Display | `--font-display` | webfont | 400 | Oversized centered masthead and large project-category labels. | Cormorant Garamond |

- **Rubik:** Measured at weight 400; sentence case and unembellished utility text, with neutral tracking.
- **Playfair Display:** Measured at weight 400; elegant high-contrast serif forms, lightly tracked and set in title or uppercase.

### Type scale — Custom (ratio ≈ 2.437, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 95px | 400 | 1 | 0.01em | — | Playfair Display | Oversized centered nameplate at the top of the page. |
| h1 | 62px | 400 | normal | 0.01em | — | Playfair Display | Large editorial project-category labels in the main content. |
| body | 16px | 400 | 1.5 | 0 | — | Rubik | Photographer role and brief project descriptor. |
| link | 16px | 400 | 1.5 | 0 | — | Rubik | About and other understated text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 8, 11, 14, 30, 48 px.
- Section rhythm 48px · element gap 11px · card padding — · max content width 1102px.

A centered content frame uses the measured 1102px maximum width within a wider page canvas. The top nameplate is centered, while its small role label sits toward the right; a fine horizontal rule separates this header from the content. Beneath it, a small intro line and compact About link form a top row. The main area is a two-column split: large stacked category links on the left and one landscape photograph on the right. Comfortable whitespace and clear vertical separation keep density low.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is essentially flat: no visible card shadows, gradients or rounded containers. A thin horizontal divider gives the header a restrained boundary, while spacing establishes hierarchy between the masthead and content. The photograph provides the only strong visual depth through its own lighting and tonal contrast.

## Imagery

Use cinematic, naturalistic photography rather than illustration or interface mockups. The featured landscape image is a rectangular crop with warm indoor light, deep shadows and an intimate documentary mood. Keep the photograph visually substantial and aligned beside the category list, with no decorative frame or color treatment added by the interface. Its amber and brown palette belongs to the image, not the brand palette.

## Components

### Masthead

Large centered Playfair Display nameplate in black on the warm canvas, with a small Rubik photographer-and-director label aligned beneath toward the right.

### Header divider

A thin dark horizontal rule spans the viewport beneath the masthead, separating identity from the portfolio content.

### Intro line

Muted Rubik text lists campaigns, documentary films and long-form photography in a compact line.

### About link

Small black Rubik text link positioned opposite the introductory line; keep it understated and underlined.

### Category links

Large Playfair Display labels for Commercial, Creative and Community, arranged vertically with small plus signs beside them.

### Featured photograph

A wide rectangular documentary-style photograph occupies the right side of the main split layout, without a card frame or shadow.

### Measured component styles

- **Primary button** (“Commercial”): transparent background · text #000000 · radius 0px · padding 30px 0px · 400 62.008px Playfair Display
- **Link** (“Photographer”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Rubik

## Do

- Use Gallery Ivory (#f2f1ec) as the dominant page canvas.
- Reserve Playfair Display for the masthead and prominent category labels.
- Keep supporting copy compact and set it in Rubik.
- Pair the stacked category links with a substantial landscape photograph.
- Use black sparingly for strong text and simple link emphasis.
- Let generous whitespace provide hierarchy instead of card styling.

## Don't

- Do not add bright interface accents or gradients.
- Do not treat the photograph’s amber tones as brand colors.
- Do not enclose content in rounded cards or add shadows.
- Do not center every content element; preserve the asymmetric split.
- Do not make utility text compete with the editorial display type.
- Do not add decorative icons beyond restrained plus markers.

## Agent prompt

Build a new portfolio page in this quiet editorial style. Use Gallery Ivory (#f2f1ec) as the broad canvas, Print Black (#000000) for the main nameplate and links, and Soft Charcoal (#5d5b5b) for subdued supporting copy; use Graphite Heading (#333332) only where secondary headings need distinction. Set oversized identity and section labels in Playfair Display, with compact practical text in Rubik. Keep a centered, constrained content frame, a full-width hairline below the header, and an asymmetric main composition pairing stacked editorial links with a large landscape photograph. Preserve generous whitespace and flat surfaces. Let image lighting supply any warm tones; do not introduce decorative brand accents, shadows, rounded cards or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered masthead above a divider; compact intro row followed by category links beside a landscape photograph. | category navigation, about link, featured photography | oversized serif masthead, thin horizontal divider, asymmetric two-column split |

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