---
version: alpha
name: Christopher Ireland
description: Editorial photography portfolio — Playfair Display serif display set against Rubik sans body, a warm cream-and-black monochrome palette, asterisk dividers, and gallery whitespace that lets full-bleed imagery carry the page.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-cream: "#f3f1e9"     # --accent: hsl(50,18.75%,93.73%) — warm paper tone
  surface-soft: "#f3f3f3"      # custom block tint
  ink: "#000000"
  ink-body: "#5d5b5b"          # rgb(93,91,91) — muted body copy
  ink-muted: "#8a8783"

  # Warm accent (sparingly)
  accent: "#625549"            # --darkAccent: hsl(27.69,15.29%,33.33%) — warm brown
  lilac-tint: "#e6e3e8"        # --lightAccent: hsl(270,8%,90.2%)

  # Interactive
  primary: "#000000"
  on-primary: "#ffffff"
  link: "#000000"
  link-hover: "#5d5b5b"
  border: "#e4e2da"            # hairline on cream
  border-soft: "#ebebeb"
  overlay-dark: "#000000"      # full-bleed image overlays
  on-image: "#ffffff"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0px
  display-wordmark:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 1px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  sub-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  serif-italic:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  card-title:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0px
  body-medium:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  nav-link:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 2px
  button-ui:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 2.5px
  caption:
    fontFamily: "Rubik, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Outlined letter-spaced CTA — the portfolio default
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
    borderColor: "{colors.ink}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
    borderColor: "{colors.ink}"

  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border-soft}"
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px

  # Project card — image-led, square corners
  card-project:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 16px 0px

  # Cream feature block
  card-feature:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 64px
    borderColor: "{colors.border}"

  # Image caption / metadata line
  caption:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: 8px 0px

  # Newsletter / contact input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 0px
    borderColor: "{colors.ink}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 0px
    borderColor: "{colors.accent}"

  # Pull-quote
  quote:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.serif-italic}"
    rounded: "{rounded.none}"
    padding: 40px 64px
---

# Christopher Ireland Design System

## Overview

Christopher Ireland's site is an editorial photography and film portfolio that treats the page like a gallery wall. The work — campaigns, documentary films, long-form photography — is the design, and the chrome around it is deliberately quiet: a pure-white canvas (`{colors.background}`), warm-paper cream blocks (`{colors.surface-cream}`), and ink-black (`{colors.ink}`) type. There is no decoration competing with the imagery; whitespace and full-bleed photographs do the heavy lifting.

The typographic system is a classic editorial pairing. Playfair Display, a high-contrast transitional serif, carries the display voice — the wordmark, hero lines, section titles, and italic pull-quotes — lending the page the air of a printed monograph. Rubik, a soft-cornered geometric sans, handles everything functional: body copy at a light 300 weight for long reading, navigation, captions, and buttons. The sans labels lean on wide letter-spacing (1.5–2.5px) and near-all-caps treatment, a magazine-masthead move that contrasts with the serif's tighter, more expressive headlines.

Color is almost absent by intention. The palette is monochrome — black on white — warmed only by the cream accent (`{colors.surface-cream}`, a literal paper tone) used for feature blocks and pull-quotes, with a muted warm brown (`{colors.accent}`) reserved for hover and emphasis. Body copy sits in a soft gray (`{colors.ink-body}`) rather than full black, softening the reading texture. Corners are square throughout (`{rounded.none}`); nothing is rounded except optional pill states, reinforcing the print-like, archival feel.

The structural signature is the asterisk divider — `* * *` — used to separate sections the way a book separates scenes, plus generous vertical rhythm (sections breathe with `{spacing.3xl}`–`{spacing.4xl}` of air). Buttons are flat rectangles with wide-tracked uppercase labels: outlined or solid black, never tinted, never rounded.

**Key Characteristics:**
- Playfair Display serif for all display type (wordmark, heroes, italic quotes) — printed-monograph voice
- Rubik sans at weight 300 for body, wide-tracked uppercase for nav/buttons/captions
- Monochrome black-on-white palette warmed by a single cream paper tone (`{colors.surface-cream}`)
- Square corners everywhere (`{rounded.none}`) — archival, print-like
- Asterisk `* * *` dividers separating sections
- Gallery whitespace; full-bleed photography is the primary visual element
- Body copy in soft gray (`{colors.ink-body}`), not pure black
- Warm brown (`{colors.accent}`) reserved for hover and emphasis only

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page background, image margins, card surfaces.
- **Cream Paper** (`{colors.surface-cream}`): Warm feature blocks, pull-quote panels — the one tone that breaks the white.
- **Soft Gray Surface** (`{colors.surface-soft}`): Subtle block tint for alternating sections.
- **Ink Black** (`{colors.ink}`): Wordmark, headings, primary CTA fill, nav text.
- **Body Gray** (`{colors.ink-body}`): Long-form reading copy — softer than black.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, tertiary labels.

### Accent
- **Warm Brown** (`{colors.accent}`): Hover states, emphasis, input focus — used sparingly.
- **Lilac Tint** (`{colors.lilac-tint}`): Rare cool light-accent surface from the theme.

### Interactive
- **Primary** (`{colors.primary}`): Solid black CTA.
- **Link** (`{colors.link}`): Black text links; hover shifts to `{colors.link-hover}`.
- **Border** (`{colors.border}`): Hairline rules on cream blocks.
- **Border Soft** (`{colors.border-soft}`): Nav divider, faint section rules.
- **On Image** (`{colors.on-image}`): White text over full-bleed photographs.

## Typography

### Font Family
- **Display / Serif**: `Playfair Display`, fallback `Georgia, serif` — weights 400 and 700, with italics.
- **Body / Sans**: `Rubik`, fallback `Helvetica, Arial, sans-serif` — weights 300, 400, 700.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Large Playfair hero lines on landing pages |
| `display-wordmark` | "CHRISTOPHER IRELAND" masthead wordmark |
| `section-heading` | Playfair section titles |
| `sub-heading` | Lighter Playfair sub-sections |
| `serif-italic` | Italic Playfair pull-quotes |
| `card-title` | Project labels — Rubik, wide-tracked |
| `body-large` | Intro paragraphs, weight 300 |
| `body` | Standard reading copy, weight 300 |
| `body-medium` | Emphasized body, weight 400 |
| `nav-link` | Navigation — uppercase, 2px tracking |
| `button-ui` | Buttons — uppercase, 2.5px tracking |
| `caption` | Image captions, metadata |

### Principles
- **Serif announces, sans informs**: Playfair Display carries identity and emotion; Rubik carries function and reading.
- **Wide tracking on small sans**: Nav, buttons, and captions use 1.5–2.5px letter-spacing in near-all-caps — a masthead convention.
- **Light body weight**: Rubik 300 keeps long-form reading airy and editorial.
- **Italic for voice**: Playfair italics mark pull-quotes and asides, never functional text.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale climbs steeply at the top (`{spacing.2xl}` 64px → `{spacing.4xl}` 140px) to create gallery-grade vertical breathing room between sections.

### Grid & Container
- Generous max content width with wide outer margins; imagery often runs full-bleed edge-to-edge.
- Project grids: 2–3 columns of photographs with square corners and minimal gutters.
- Asterisk `* * *` dividers mark section breaks instead of rules or color blocks.

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) lets each image stand alone.
- **Photography first**: Chrome recedes; the photograph is the hero of every section.
- **Cream as punctuation**: A single warm block breaks the white to frame a quote or statement.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default — text and images on white |
| Hairline | 1px `{colors.border}` | Cream feature blocks, input underlines |
| Image Overlay | `{colors.overlay-dark}` gradient | White caption text over full-bleed photos |
| Focus | 2px `{colors.accent}` underline | Input focus, keyboard emphasis |

**Depth Philosophy**: This system rejects shadows and elevation almost entirely. Hierarchy comes from scale, whitespace, and the serif/sans contrast — not from cards floating off the page. The only "depth" is the dark overlay that lets white text sit legibly on a photograph.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, images, inputs |
| `xs` | 2px | Rare soft edge |
| `sm` | 4px | Optional small radius |
| `pill` | 9999px | Cart badge / tag counters only |

Square corners are the rule. The print-monograph feel depends on hard edges; rounding is reserved for tiny count badges.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-feature}`).

### Buttons
- **`button-primary`** — Solid black, white uppercase wide-tracked label, square corners. Hover shifts to warm brown.
- **`button-outline`** — White with 1px black border; inverts to solid black on hover.

### Navigation
- **`nav-bar`** — White header, uppercase Rubik links at 2px tracking, faint bottom rule.

### Cards
- **`card-project`** — Image-led, square corners, wide-tracked sans label beneath the photograph.
- **`card-feature`** — Cream block with hairline border for statements and intros.

### Quotes
- **`quote`** — Cream panel with italic Playfair pull-quote.

### Inputs
- **`input`** — Underline-only (1px black bottom border), no box; focus shifts the underline to warm brown.

## Do's and Don'ts

### Do
- Pair Playfair Display (display/serif) with Rubik (body/sans)
- Keep the palette monochrome — black on white, warmed only by cream
- Use wide letter-spacing (1.5–2.5px) and uppercase on small sans labels
- Set body copy in weight 300 and soft gray (`{colors.ink-body}`)
- Use square corners (`{rounded.none}`) throughout
- Separate sections with asterisk `* * *` dividers and generous whitespace
- Let full-bleed photography lead each section

### Don't
- Don't introduce bright or saturated accent colors — the warmth is one brown
- Don't round corners on cards, buttons, or images
- Don't add drop shadows or card elevation
- Don't tighten the tracking on uppercase nav/button labels
- Don't use Playfair for functional UI text — it's for display and quotes
- Don't crowd sections; whitespace is structural

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked images, hamburger nav |
| Tablet | 600–1024px | 2-column project grids |
| Desktop | 1024–1440px | Full 2–3 column galleries, wide margins |
| Large | >1440px | Centered content, generous outer whitespace |

### Touch Targets
- Buttons use comfortable padding (16px vertical, 36px horizontal)
- Nav links have adequate spacing despite wide tracking
- Cart/count badge uses pill radius for tap clarity

### Collapsing Strategy
- Hero: Playfair scales down, line-height holds
- Navigation: uppercase links collapse to a hamburger menu
- Project grids: 3-column → 2-column → single column
- Full-bleed images: maintain edge-to-edge treatment at all sizes
- Section spacing: 140px → ~64px on mobile

### Image Behavior
- Full-bleed photographs stay edge-to-edge across breakpoints
- Captions remain wide-tracked and muted at all sizes
- Overlay gradients keep white caption text legible on imagery

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink Black `{colors.ink}`
- Background: White `{colors.background}`
- Warm block: Cream `{colors.surface-cream}`
- Heading text: Black `{colors.ink}` (Playfair Display)
- Body text: Soft Gray `{colors.ink-body}` (Rubik 300)
- Accent / hover: Warm Brown `{colors.accent}`

### Example Component Prompts
- "Create a hero on white. Headline in Playfair Display 64px weight 700, line-height 1.05, color `{colors.ink}`. Sub-line in Rubik 18px weight 300, color `{colors.ink-body}`. Outlined CTA: white, 1px black border, uppercase Rubik 13px with 2.5px tracking, square corners, 16px 36px padding."
- "Design a project card: full-bleed square-cornered photograph, label below in Rubik 18px with 1.5px tracking, `{colors.ink}`. No shadow, no border, no rounding."
- "Build a cream feature block (`{colors.surface-cream}`) with a 1px `{colors.border}` hairline, holding an italic Playfair pull-quote at 22px, padding 40px 64px."
- "Create a navigation bar: white, uppercase Rubik 14px links with 2px tracking, `{colors.ink}` text, faint bottom rule `{colors.border-soft}`."

### Iteration Guide
1. Playfair Display for anything expressive (heroes, titles, italic quotes); Rubik for everything functional
2. Keep corners square — `{rounded.none}` is the default for cards, buttons, images, inputs
3. Monochrome first; warm brown `{colors.accent}` only on hover/emphasis, cream only for feature blocks
4. Wide-track and uppercase all small sans labels (1.5–2.5px)
5. Let whitespace and full-bleed photography carry the page — no shadows, no decoration
6. Use asterisk `* * *` dividers to separate sections

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Christopher Ireland. Brand names and trademarks belong to their respective owners.