---
version: alpha
name: Pedro Duarte
description: Monochrome editorial darkness — Editorial New serif display set huge against a near-black canvas, Neue Montreal for body, Geist Mono for code, zero border-radius everywhere, and a strict grayscale Radix palette where contrast and type do all the work.
colors:
  # Canvas + ink (Radix gray, dark appearance)
  background: "#111111"        # gray-1 — near-black page canvas
  surface: "#191919"           # gray-2 — raised panels
  surface-soft: "#222222"      # gray-3 — hover/inset surfaces
  ink: "#eeeeee"               # gray-12 — primary text
  ink-secondary: "#b4b4b4"     # gray-11 — muted/secondary text
  ink-tertiary: "#7b7b7b"      # gray-10 — captions, faint labels
  ink-pure: "#ffffff"

  # Neutral border scale
  border: "#3a3a3a"            # gray-6 — hairline dividers
  border-strong: "#484848"     # gray-7 — input/interactive edges
  border-interactive: "#606060" # gray-8 — focus/hover edges

  # Functional neutral primary (accent = gray on this site)
  primary: "#eeeeee"           # buttons/links resolve to high-contrast gray
  on-primary: "#111111"
  link: "#eeeeee"
  link-muted: "#b4b4b4"

  # Selection / focus
  selection-bg: "#313131"      # gray-5
  focus-ring: "#606060"        # gray-8

  # Gray scale (Radix dark — full reference)
  gray-1: "#111111"
  gray-2: "#191919"
  gray-3: "#222222"
  gray-4: "#2a2a2a"
  gray-5: "#313131"
  gray-6: "#3a3a3a"
  gray-7: "#484848"
  gray-8: "#606060"
  gray-9: "#6e6e6e"
  gray-10: "#7b7b7b"
  gray-11: "#b4b4b4"
  gray-12: "#eeeeee"

typography:
  display-hero:
    fontFamily: "Editorial New, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -2px
  display:
    fontFamily: "Editorial New, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  heading:
    fontFamily: "Editorial New, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Editorial New, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Neue Montreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Neue Montreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Neue Montreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Neue Montreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  mono-body:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"
  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"
  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px 0px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-ring}"
  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.none}"
    padding: 16px
    borderColor: "{colors.border}"
  code-inline:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.none}"
    padding: 2px 6px
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.none}"
    padding: 2px 8px
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Pedro Duarte Design System

## Overview

Pedro Duarte's personal site (ped.ro) is a study in editorial restraint rendered in pure monochrome. The page sits on a near-black canvas (`{colors.background}`, Radix gray-1 at `#111`) with high-contrast off-white text (`{colors.ink}`). There is no color — the entire site runs the Radix gray scale in dark appearance, with the accent color deliberately set to "gray." Contrast, type, and negative space carry the whole identity. It feels less like a marketing site and more like a printed essay set in a dark room.

The signature move is typographic. Headlines are set in **Editorial New**, a high-contrast display serif with elegant thin-to-thick stroke modulation, sized large and tracked tight (negative letter-spacing at display sizes). Against the grayscale UI and the geometric **Neue Montreal** body sans, the serif reads as a literary voice — distinctly authorial. Code and technical labels drop into **Geist Mono**, tying the writerly tone back to the engineer (Pedro builds Radix UI). The pairing of a fashion-magazine serif with a neutral grotesque and a developer monospace is the entire personality.

The second defining decision is the complete absence of rounded corners. The Radix theme is configured `data-radius="none"`, so every surface, button, input, and code block has hard 90-degree corners. Combined with hairline gray borders (`{colors.border}`) and flat surfaces with no shadows, the result is architectural and print-like — boxes, rules, and type, nothing soft, nothing floating.

**Key Characteristics:**
- Near-black canvas (`{colors.background}` `#111`) with off-white ink (`{colors.ink}` `#eee`) — strict Radix dark-gray scale
- Editorial New high-contrast display serif for all headings, set large with negative tracking
- Neue Montreal grotesque sans for body, Geist Mono for code and technical labels
- Zero border-radius everywhere (`{rounded.none}`) — hard architectural corners
- No color accent — grayscale only; the "accent" is high-contrast gray
- Flat surfaces, hairline borders, no shadows — depth comes from gray steps alone
- Editorial / essay layout: generous line length, list-based writing index

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas, Radix gray-1.
- **Surface** (`{colors.surface}`): Raised panels and cards, gray-2.
- **Surface Soft** (`{colors.surface-soft}`): Inline code, hover insets, gray-3.
- **Ink** (`{colors.ink}`): Primary text, off-white gray-12 — never pure white in body.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted text and nav links, gray-11.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Captions and faint metadata, gray-10.

### Borders
- **Border** (`{colors.border}`): Hairline dividers and card edges, gray-6.
- **Border Strong** (`{colors.border-strong}`): Input and button edges, gray-7.
- **Border Interactive** (`{colors.border-interactive}`): Hover/focus edges, gray-8.

### Functional Neutral
- **Primary** (`{colors.primary}`): High-contrast gray for primary buttons; the accent resolves to gray, not a hue.
- **On Primary** (`{colors.on-primary}`): Canvas color used as text on the light primary fill.
- **Link** (`{colors.link}`): Links read as bright ink; muted variant `{colors.link-muted}`.

### Gray Scale (Radix Dark)
The full `gray-1` → `gray-12` scale lives in the `colors:` block. gray-1 `#111` is the canvas, gray-12 `#eee` is the ink, and the steps in between handle every surface, border, and muted-text role. No chromatic colors exist in the system.

## Typography

### Font Family
- **Display / Headings**: `Editorial New`, fallbacks `Georgia, Times New Roman, serif` — a high-contrast display serif.
- **Body**: `Neue Montreal`, fallbacks `Helvetica Neue, Arial, sans-serif` — a neutral geometric grotesque.
- **Monospace**: `Geist Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 72px Editorial New — page hero/name, tight tracking |
| `display` | 48px serif — major section openers |
| `heading` | 32px serif — article titles |
| `sub-heading` | 24px serif — sub-sections |
| `body-large` | 20px Neue Montreal — lead paragraphs |
| `body` | 16px sans — standard reading text |
| `body-small` | 14px sans — secondary copy |
| `label` | 14px weight 500 — nav, buttons |
| `mono-body` | 14px Geist Mono — code blocks |
| `mono-caption` | 13px mono — inline code, badges, metadata |

### Principles
- **Serif display, sans body**: Editorial New announces; Neue Montreal reads. Never set body in the serif.
- **Tight display tracking**: Negative letter-spacing tightens the large serif (−2px at 72px) for an editorial, set-by-hand feel.
- **One weight per family, mostly**: Editorial New stays at 400 — its drama comes from size and stroke contrast, not bold weights.
- **Mono as the engineer's voice**: Geist Mono marks code and technical metadata, connecting the writer to the toolmaker.

## Layout

### Spacing System
The scale lives in the `spacing:` block, an 8px-ish rhythm climbing to large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections. White space is structural — the essay breathes.

### Grid & Container
- Single narrow reading column for writing — comfortable measure, generous margins.
- Index/list pages use full-width rows separated by hairline `{colors.border}` rules.
- No multi-column marketing grids; this is a personal/editorial layout.

### Whitespace Philosophy
- **Editorial calm**: Large vertical gaps between the hero, the writing index, and the footer.
- **Rules over boxes**: Separation comes from 1px gray dividers and spacing, not filled cards or shadows.
- **Contrast as structure**: With no color and no radius, the gray steps and type sizes do all the visual hierarchy.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.background}` | Page canvas, text blocks |
| Surface (Level 1) | `{colors.surface}` fill + `{colors.border}` hairline | Cards, code blocks |
| Divider | 1px `{colors.border}` rule | Row and section separation |
| Focus | `{colors.focus-ring}` edge | Keyboard focus on interactive elements |

**Depth Philosophy**: There are no shadows. Elevation is expressed purely by stepping up the gray scale (`#111` → `#191919` → `#222`) and by hairline borders. The system reads as flat planes stacked by tone, like layered paper.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — the site is `data-radius="none"` |
| `pill` | 9999px | Reserved; not used in the live UI |

Hard corners are a defining trait. Buttons, inputs, cards, code blocks, and badges all use `{rounded.none}`. The only curves on the page are the letterforms.

## Components

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

### Buttons
- **`button-primary`** — High-contrast gray fill (`{colors.primary}`), canvas-color text, square corners.
- **`button-secondary`** — Surface fill with a `{colors.border-strong}` hairline edge.

### Links & Nav
- **`link`** — Bright ink text; underline on interaction.
- **`nav-link`** — Muted `{colors.ink-secondary}` resolving to full ink on hover.

### Cards & Rows
- **`card`** — Surface panel with a hairline border, no radius, no shadow.
- **`list-row`** — Writing-index row on the canvas, separated by a bottom `{colors.border}` rule.

### Code
- **`code-block`** — Surface fill, Geist Mono, square corners, hairline border.
- **`code-inline`** — Soft surface chip, mono caption size.

### Inputs
- **`input`** — Surface fill, strong hairline edge; focus swaps to `{colors.focus-ring}`.

### Distinctive Components
- **Editorial Hero**: Name/title set in Editorial New at display size with tight negative tracking on the near-black canvas.
- **Writing Index**: A vertical list of essays as hairline-separated rows — serif titles, mono/muted metadata.

## Do's and Don'ts

### Do
- Set all headings in Editorial New serif at large sizes with negative tracking
- Keep body and UI in Neue Montreal, code in Geist Mono
- Use square corners everywhere (`{rounded.none}`)
- Build depth from gray steps and hairline borders, never shadows
- Keep the palette strictly grayscale — `#111` canvas to `#eee` ink
- Use `{colors.ink}` (`#eee`) not pure white for body text

### Don't
- Don't introduce any chromatic accent color — the system is monochrome by design
- Don't round corners — hard edges are the identity
- Don't set body copy in the display serif
- Don't add drop shadows or floating cards
- Don't use bold weights on Editorial New — its contrast comes from size and stroke
- Don't fill the page with marketing grids; this is an editorial single-column voice

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced hero size, tighter margins |
| Tablet | 600–1024px | Wider reading measure |
| Desktop | >1024px | Centered narrow column with generous margins |

### Touch Targets
- Nav and list rows use comfortable vertical padding for tapping
- Buttons keep 10px vertical padding minimum

### Collapsing Strategy
- Hero serif scales down proportionally while keeping negative tracking
- Writing index stays a single column at all sizes — only spacing tightens
- Section gaps compress from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: near-black `{colors.background}` (`#111`)
- Heading/body text: off-white `{colors.ink}` (`#eee`)
- Muted text: `{colors.ink-secondary}` (`#b4b4b4`)
- Surface/cards: `{colors.surface}` (`#191919`)
- Borders: hairline `{colors.border}` (`#3a3a3a`)
- Accent: none — high-contrast gray only

### Example Component Prompts
- "Create an editorial hero on a `{colors.background}` canvas. Set the name at 72px Editorial New serif, weight 400, line-height 1.0, letter-spacing -2px, color `{colors.ink}`. Subtitle at 20px Neue Montreal, color `{colors.ink-secondary}`."
- "Build a writing index: a vertical list of rows on `{colors.background}`, each separated by a 1px `{colors.border}` bottom rule. Title in 24px Editorial New `{colors.ink}`; date in 13px Geist Mono `{colors.ink-tertiary}`. No radius."
- "Design a code block: `{colors.surface}` fill, 1px `{colors.border}`, square corners, 16px padding, 14px Geist Mono `{colors.ink}`."

### Iteration Guide
1. Never add a color — stay on the gray scale from `#111` to `#eee`
2. Square corners always — `{rounded.none}` on every surface
3. Editorial New serif for headings, Neue Montreal for body, Geist Mono for code
4. Depth = gray steps + hairline borders, never shadows
5. Negative tracking scales with serif size: ~-2px at 72px easing toward 0 by body sizes

---

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