---
version: alpha
name: Isa de Burgh
description: Editorial portfolio minimalism — a near-white paper canvas with deep charcoal ink, oversized serif/grotesque display headings, generous whitespace, hairline rules, and zero ornament. Work speaks; the chrome recedes. Directional arrow affordances and uppercase nav as the only interface furniture.

colors:
  # Canvas + ink
  background: "#f7f6f3"
  surface: "#ffffff"
  surface-soft: "#efeeea"
  ink: "#1a1a18"
  ink-pure: "#000000"
  ink-secondary: "#5c5b56"
  ink-muted: "#8c8a83"

  # Accent — restrained, near-monochrome
  primary: "#1a1a18"      # ink doubles as the action color
  accent: "#a64a33"       # muted terracotta editorial accent

  # Lines + neutrals
  border: "#dedcd6"
  border-soft: "#eae9e4"
  divider: "#cbc9c2"

  # On-color
  on-primary: "#f7f6f3"
  on-ink: "#f7f6f3"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -1.5px
  display-large:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  project-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.3px
  lead:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 2px

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

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

components:
  # Primary action — ink fill, the only solid CTA
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — outline hairline
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Text link with directional arrow
  link-arrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 0px

  # Uppercase nav item
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 8px 12px

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  # Project / work card — image-led, minimal chrome
  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.project-title}"
    rounded: "{rounded.none}"
    padding: 0px

  # Eyebrow / category tag
  tag:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px

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

  # Input — hairline underline field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderColor: "{colors.divider}"
---

# Isa de Burgh Design System

## Overview

Isa de Burgh's portfolio is editorial minimalism in its purest form — a designer's site that treats the page as paper and the work as the only thing worth looking at. The canvas is a warm near-white (`{colors.background}`), a fraction off pure white so it reads like uncoated stock rather than a screen, and the ink is a soft near-black charcoal (`{colors.ink}`) that avoids the harshness of `#000`. There is no card chrome competing for attention, no gradient, no shadow theatre. Structure comes from whitespace, hairline rules, and the rhythm of full-bleed imagery.

Typography carries the entire personality. Oversized serif display headings (a Playfair-class high-contrast serif) set the editorial register — these are magazine titles, not UI labels — paired with a clean neutral grotesque (an Inter-class sans) for running copy and the spaced, uppercase navigation. The contrast between the two voices, ornate serif against quiet sans, is the whole typographic story. Headings run large with tight negative tracking; body copy is generous in line-height for comfortable reading.

The only interface furniture is the uppercase, letter-spaced nav (HOME · ABOUT · WORK · CONTACT) and directional arrow affordances ("→") that lead into projects and external links. Color is held almost entirely to ink-on-paper; a single muted terracotta accent (`{colors.accent}`) is the rare editorial flourish. Actions are square-cornered and unrounded, reinforcing the print-object feel — nothing here apologizes for being flat.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`), soft charcoal ink (`{colors.ink}`) — never pure black on pure white
- High-contrast serif display (Playfair-class) for headings, neutral grotesque (Inter-class) for body and UI
- Spaced uppercase navigation as the primary interface signal
- Directional arrow ("→") affordances instead of conventional buttons for links
- Square corners throughout — `{rounded.none}` is the default; print-object, not app
- Whitespace and hairline rules carry structure; no shadows, no cards with chrome
- Single restrained terracotta accent (`{colors.accent}`) used sparingly
- Image-led layout — work is full-bleed, chrome recedes

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): Warm near-white page canvas, uncoated-stock feel.
- **Surface** (`{colors.surface}`): Pure white for image mats and elevated blocks.
- **Surface Soft** (`{colors.surface-soft}`): Faint warm tint for tags and quiet panels.
- **Ink** (`{colors.ink}`): Soft charcoal — primary text, headings, the action color.
- **Ink Pure** (`{colors.ink-pure}`): Reserved true black for fine detail only.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Captions, timestamps, de-emphasized labels.

### Accent
- **Primary** (`{colors.primary}`): Ink doubles as the action color — CTAs are charcoal, not colored.
- **Terracotta** (`{colors.accent}`): Muted editorial accent, used sparingly for emphasis or hover.

### Lines & Neutrals
- **Border** (`{colors.border}`): Hairline dividers and nav underline.
- **Border Soft** (`{colors.border-soft}`): Subtlest separation between blocks.
- **Divider** (`{colors.divider}`): Input underlines, stronger rules.

### On-Color
- **On Primary / On Ink** (`{colors.on-primary}`): Paper-white text on charcoal fills.
- **On Accent** (`{colors.on-accent}`): White on terracotta.

## Typography

### Font Family
- **Display / Headings**: `Playfair Display` (high-contrast editorial serif), fallback `Georgia, serif`
- **Body / UI**: `Inter` (neutral grotesque), fallback `Helvetica Neue, Arial, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px serif — name/hero billboard |
| `display-large` | Large editorial section openers |
| `section-heading` | Section titles |
| `project-title` | Individual project / work titles |
| `lead` | Intro paragraphs, standfirst copy |
| `body` | Standard reading text |
| `body-small` | Secondary reading text |
| `nav-label` | Uppercase spaced nav, buttons, links |
| `caption` | Image captions, metadata |
| `eyebrow` | Category tags, kickers |

### Principles
- **Two voices, strict roles**: Serif announces, sans reads. Never mix the serif into UI labels or the sans into display headings.
- **Tight serif tracking**: Display sizes use negative letter-spacing (-1px to -1.5px) for compressed magazine titling.
- **Spaced uppercase for interface**: Nav and buttons use +1.5px to +2px tracking uppercase — the only "UI" signal in an otherwise editorial page.
- **Generous reading rhythm**: Body line-height 1.6–1.65 for paper-like comfort.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, opening into large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections so the page breathes like a printed spread.

### Grid & Container
- Max content width approximately 1200px, with generous side margins
- Hero: single-column, name set large in serif over deep top padding
- Work: full-bleed and large image blocks, often single-column or asymmetric two-up
- Hairline rules (`{colors.border}`) separate major sections instead of background shifts

### Whitespace Philosophy
- **Editorial air**: Whitespace is the layout. Sections are divided by space and thin rules, never by colored panels.
- **Image-led**: Imagery is the loudest element; type and chrome stay quiet around it.
- **Square geometry**: Unrounded corners everywhere reinforce the print-object character.

## Components

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

### Buttons & Links
- **`button-primary`** — Charcoal ink fill, paper text, square corners, uppercase spaced label.
- **`button-secondary`** — Hairline ink outline on paper, square corners.
- **`link-arrow`** — Text link with a trailing "→"; the site's signature affordance for projects and external links.

### Navigation
- **`nav-bar`** — Paper background, hairline bottom border, uppercase spaced nav items.
- **`nav-item`** — Uppercase, +1.5px tracked, ink on paper.

### Cards & Media
- **`card-project`** — Image-led work card, no chrome, serif title beneath.
- **`caption-block`** — Muted small caption under imagery.
- **`tag`** — Faint warm panel, eyebrow type, for category labels.

### Inputs
- **`input`** — Underline-only field (hairline `{colors.divider}` bottom border), no box, body type.

## Do's and Don'ts

### Do
- Keep the canvas warm paper-white (`{colors.background}`) and ink soft charcoal (`{colors.ink}`)
- Use the serif for display only, the sans for everything functional
- Use square corners (`{rounded.none}`) — flatness is the identity
- Lead with imagery; let chrome recede
- Use uppercase spaced labels for nav and buttons
- Reserve the terracotta accent for rare emphasis

### Don't
- Don't use pure black on pure white — the warmth matters
- Don't add shadows, gradients, or card chrome
- Don't round corners on buttons or cards
- Don't set the serif at small UI sizes or the sans at display sizes
- Don't introduce additional accent colors — stay near-monochrome

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, nav collapses to menu |
| Tablet | 600–1024px | Two-up work grids begin, padding expands |
| Desktop | 1024–1400px | Full editorial layout, max content width |
| Large | >1400px | Centered with generous margins |

### Collapsing Strategy
- Hero serif scales from 72px down, retaining tight tracking
- Nav: horizontal uppercase links → menu toggle
- Work grids: asymmetric two-up → stacked single column
- Section spacing compresses (`{spacing.4xl}` → `{spacing.2xl}`) on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- CTA fill: Ink `{colors.ink}`, paper text
- Hairline: `{colors.border}`
- Rare accent: Terracotta `{colors.accent}`

### Example Component Prompts
- "Create an editorial hero on warm paper `{colors.background}`. Name at 72px Playfair Display weight 500, line-height 1.02, letter-spacing -1.5px, color `{colors.ink}`. Standfirst at 20px Inter weight 400, line-height 1.6, color `{colors.ink-secondary}`."
- "Build a nav bar: paper background, hairline `{colors.border}` bottom border, uppercase Inter 13px weight 500 letter-spacing 1.5px items (HOME · ABOUT · WORK · CONTACT)."
- "Design a work card: full-bleed image, no chrome, square corners, project title beneath in 28px Playfair Display weight 500, caption in 12px Inter `{colors.ink-muted}`."
- "Add a primary CTA: charcoal `{colors.ink}` fill, paper text, square corners, 14px 28px padding, uppercase spaced label."

### Iteration Guide
1. Square corners by default — rounding breaks the print-object feel
2. Serif announces, sans reads — never cross them
3. Structure from whitespace and hairlines, never colored panels or shadows
4. The "→" arrow is the signature link affordance
5. Stay near-monochrome; terracotta is a guest, not a host

---

## 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 Isa de Burgh. Brand names and trademarks belong to their respective owners.