---
version: alpha
name: Irina Moi
description: Editorial portfolio minimalism — near-black ink on warm off-white paper, an oversized serif display voice paired with restrained sans labels, generous gallery whitespace, and almost no chrome. Color is withheld so the work and the typography carry the page.
data_quality: low

colors:
  # Canvas + ink
  background: "#f4f1ec"
  surface: "#ffffff"
  surface-soft: "#eae6df"
  ink: "#141414"
  ink-pure: "#000000"

  # Secondary / muted ink
  ink-secondary: "#5c5852"
  ink-muted: "#8c877f"

  # Accent — sparing editorial highlight
  primary: "#b33d24"
  accent-link: "#141414"

  # Borders + hairlines
  border: "#d8d3ca"
  border-strong: "#141414"

  # On-color
  on-primary: "#f4f1ec"
  on-ink: "#f4f1ec"

  # Dark section (project / footer)
  dark-bg: "#141414"
  dark-ink: "#f4f1ec"
  dark-muted: "#9b958c"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 88px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -1.5px
  display-large:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -1px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.5px
  project-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.3px
  lead:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.5px
  nav:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  link-underline:
    textColor: "{colors.ink}"
    typography: "{typography.body}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.project-title}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-dark:
    backgroundColor: "{colors.dark-bg}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.project-title}"
    rounded: "{rounded.none}"
    padding: 40px

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border-strong}"

  footer:
    backgroundColor: "{colors.dark-bg}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    padding: 96px 40px
---

# Irina Moi Design System

## Overview

Irina Moi's portfolio is editorial minimalism in its purest form — a designer's site built like a printed monograph. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical white, giving the whole page a tactile, gallery-catalogue warmth. Against it, near-black ink (`{colors.ink}`) does almost all the work. Color is deliberately withheld; a single warm terracotta accent (`{colors.primary}`) appears only at moments of emphasis, so the typography and the project imagery carry the visual weight.

The typographic system is the identity. An oversized serif display face (mapped here to Playfair Display) sets headlines at billboard scale with tight, slightly negative tracking and compressed line-height, so titles read as confident editorial statements. Underneath, a clean neutral sans (mapped to Inter) handles body copy, navigation, and uppercase labels with wide letter-spacing. The serif-display-over-sans-label pairing is the signature move — the same contrast a fashion magazine uses between a feature headline and its byline.

Layout leans on whitespace as the primary structural device. Sections breathe with large vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`), project entries sit in a quiet grid with no card chrome, and hairline rules (`{colors.border}`) or bare imagery do the dividing rather than boxes and shadows. Occasional dark sections (`{colors.dark-bg}`) invert the palette for emphasis, creating editorial spreads within the scroll.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white — catalogue warmth
- Oversized serif display headlines with tight negative tracking and compressed line-height
- Serif-display-over-sans-label pairing as the core typographic contrast
- Near-monochrome palette; a single terracotta accent (`{colors.primary}`) used sparingly
- Whitespace and hairline rules as structure — minimal card chrome, no heavy shadows
- Uppercase sans labels with wide letter-spacing for metadata and nav
- Inverted dark sections (`{colors.dark-bg}`) for editorial emphasis and footer
- Largely square / unrounded geometry; pills reserved for buttons and tags

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas — the dominant surface.
- **White Surface** (`{colors.surface}`): Brighter surface for imagery and occasional cards.
- **Soft Surface** (`{colors.surface-soft}`): Subtle tinted panel for badges and quiet blocks.
- **Ink** (`{colors.ink}`): Near-black primary text, headings, strong rules — warm, not pure black.
- **Pure Black** (`{colors.ink-pure}`): Reserved for true-black moments.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, muted labels.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, placeholder text.

### Accent
- **Terracotta** (`{colors.primary}`): The single editorial accent — hover states, key emphasis.
- **Accent Link** (`{colors.accent-link}`): Inline links default to ink with an underline.

### Borders
- **Hairline** (`{colors.border}`): Light rule between project rows and sections.
- **Strong Rule** (`{colors.border-strong}`): Ink hairline for outlined buttons and inputs.

### Dark Section
- **Dark Background** (`{colors.dark-bg}`): Inverted editorial sections and footer.
- **Dark Ink** (`{colors.dark-ink}`): Paper-toned text on dark sections.
- **Dark Muted** (`{colors.dark-muted}`): Muted text on dark.

## Typography

### Font Family
- **Display**: `Playfair Display`, with fallbacks `Georgia, serif` — the serif voice for headlines.
- **Text/UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — body, nav, and labels.

### 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` | 88px serif hero — billboard editorial impact |
| `display-large` | Large serif section openers |
| `section-heading` | Standard serif section titles |
| `project-title` | Serif project/case-study titles |
| `lead` | Intro / lead paragraphs in sans |
| `body` | Standard reading text |
| `body-small` | Secondary copy |
| `label` | Uppercase wide-tracked metadata labels |
| `nav` | Navigation links |
| `button-ui` | Buttons |
| `caption` | Tags, captions, fine print |

### Principles
- **Serif for voice, sans for utility**: Every headline is serif; every label, nav item, and body block is sans.
- **Tight display, open labels**: Display serif uses slightly negative tracking and compressed line-height; uppercase sans labels use wide positive tracking (1–1.5px).
- **Two weights of restraint**: Serif at 500 (medium), sans at 400 (read) / 500 (interact). No heavy bold.
- **Scale as hierarchy**: Hierarchy comes from dramatic size jumps, not from many weights or colors.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is generous — section gaps run `{spacing.3xl}` (96px) to `{spacing.4xl}` (160px). Whitespace is the structure.

### Grid & Container
- Wide content measure with generous outer margins
- Hero: left-aligned single column, oversized serif headline
- Project listing: quiet grid / stacked rows separated by hairlines or pure spacing
- Dark inverted sections used as full-bleed editorial breaks

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical padding between sections; the page reads like a printed spread.
- **Chrome-light**: No heavy borders or shadows — hairline rules and spacing do the dividing.
- **Imagery breathes**: Project images sit on the paper canvas with margin, not crammed into cards.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Almost everything — paper-flat by default |
| Hairline (Level 1) | `1px solid {colors.border}` | Row dividers, section rules |
| Strong Rule (Level 1b) | `1px solid {colors.border-strong}` | Outlined buttons, input underlines |
| Inversion (Level 2) | `{colors.dark-bg}` block | Editorial dark sections, footer |

**Depth Philosophy**: This is a print-flat system. Depth is achieved through tonal inversion (dark sections against paper) and hairline rules, not box-shadows. Avoid floating cards and drop shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Images, cards, inputs — square by default |
| `xs` | 2px | Minor softening |
| `sm` | 4px | Small containers |
| `md` | 8px | Occasional soft panels |
| `lg` | 16px | Larger rounded media |
| `pill` | 9999px | Buttons, tags, badges |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Ink fill, paper text, pill radius. Hover shifts to terracotta (`{colors.primary}`).
- **`button-outline`** — Paper surface with an ink hairline border, pill radius.

### Links
- **`link-underline`** — Inline links are ink with an underline; hover tints terracotta.

### Cards & Projects
- **`card-project`** — Chrome-light project entry: image plus serif title, square corners, hairline-separated.
- **`card-dark`** — Inverted dark block for featured/editorial emphasis.

### Navigation
- **`nav-bar`** — Paper background, ink sans links, hairline bottom rule, generous padding.

### Inputs
- **`input`** — Underline-only field on paper (ink bottom rule), no box.

### Footer
- **`footer`** — Full dark section, paper-toned text, large vertical padding.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`), not pure white
- Set every headline in the serif display face; keep body/labels in sans
- Use the terracotta accent (`{colors.primary}`) sparingly — emphasis only
- Use hairline rules and whitespace to divide, not boxes and shadows
- Use uppercase, wide-tracked sans for metadata labels
- Use dark inverted sections for editorial emphasis

### Don't
- Don't add drop-shadows or floating-card chrome — keep it print-flat
- Don't scatter color; this is a near-monochrome system
- Don't set headlines in the sans face — serif carries the voice
- Don't tighten label tracking; uppercase labels stay wide
- Don't use pure white as the main canvas — the warmth is the point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, nav collapses |
| Tablet | 600–1024px | 2-up project grid, reduced section spacing |
| Desktop | 1024–1440px | Full layout, oversized serif hero |
| Large | >1440px | Centered with generous outer margins |

### Collapsing Strategy
- Hero serif: 88px → ~40px on mobile, retains tight tracking
- Project grid: multi-column → stacked single column
- Section spacing: 160px → ~64px on mobile
- Navigation: inline links → menu toggle
- Dark sections: full-bleed at all sizes

### Touch Targets
- Buttons use comfortable 14px+ vertical padding
- Nav links spaced for tap comfort
- Tags/badges keep adequate horizontal padding

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading/body text: Ink `{colors.ink}`
- Accent (sparing): Terracotta `{colors.primary}`
- Divider: Hairline `1px solid {colors.border}`
- Dark section: `{colors.dark-bg}` with `{colors.dark-ink}` text

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Headline in Playfair Display 88px weight 500, line-height 0.98, letter-spacing -1.5px, color `{colors.ink}`. Below it an uppercase sans label in Inter 13px weight 500, letter-spacing 1.5px, color `{colors.ink-secondary}`."
- "Build a project row: square image on `{colors.surface}`, serif title (Playfair Display 28px weight 500) and an uppercase caption tag below, divided from the next row by a `1px solid {colors.border}` hairline. No shadow."
- "Design a pill button: ink fill `{colors.ink}`, paper text `{colors.on-ink}`, 9999px radius, 14px 28px padding, Inter 14px weight 500; hover fills terracotta `{colors.primary}`."
- "Create a dark editorial section: `{colors.dark-bg}` background, paper-toned text `{colors.dark-ink}`, serif heading and sans body, 96px+ vertical padding."

### Iteration Guide
1. Serif for every headline, sans for everything else — never mix it up
2. Keep the canvas warm off-white, never pure white
3. Color is a single terracotta accent used sparingly — stay near-monochrome
4. Divide with hairlines and whitespace, not shadows
5. Uppercase labels stay wide-tracked; display serif stays tight-tracked

---

## 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 Irina Moi. Brand names and trademarks belong to their respective owners.