---
version: alpha
name: Cyd Stumpel
description: Tactile editorial portfolio — warm paper canvas with near-black ink and a vivid signature red, oversized serif display type set against a clean grotesque, sharp 0px corners, and physical interaction motifs (flip cards, draggable thumbnails) that make the page feel like printed matter.

colors:
  # Canvas + ink
  background: "#f3efe6"
  surface: "#faf7f0"
  surface-soft: "#ece7da"
  ink: "#161412"
  ink-pure: "#000000"
  ink-secondary: "#4a443c"
  ink-muted: "#807868"

  # Signature accent
  primary: "#e8442a"
  accent-warm: "#e8442a"
  accent-hover: "#c8351d"

  # Neutral scale (warm-tinted)
  neutral-900: "#161412"
  neutral-700: "#4a443c"
  neutral-500: "#807868"
  neutral-300: "#cfc8b8"
  neutral-200: "#ddd6c7"
  neutral-100: "#ece7da"

  # Borders + hairlines
  border: "#cfc8b8"
  border-strong: "#161412"

  # On-color
  on-primary: "#faf7f0"
  on-ink: "#f3efe6"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -2px
  display:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.2px
  nav-link:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Space Grotesk, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 1px

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

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

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  card-flip:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

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

  tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
    borderColor: "{colors.border-strong}"
---

# Cyd Stumpel Design System

## Overview

Cyd Stumpel's portfolio reads like a piece of printed matter that learned to move. The canvas is a warm, paper-like off-white (`{colors.background}`) — not the sterile pure white of a SaaS dashboard, but the cream of uncoated stock. Against it sits a near-black warm ink (`{colors.ink}`) and a single, unmissable vermillion red (`{colors.primary}`) that does all the accent work: links, hover fills, status pills, the occasional oversized word. The restraint of the palette is what gives the red its punch.

The type system is the personality. Oversized editorial serif display (Playfair-class high-contrast roman) carries the headlines at near-billboard sizes with tight negative tracking and a line-height that lets ascenders and descenders almost touch. Everything functional — navigation, body copy, captions, buttons — drops to a clean geometric grotesque (Space Grotesk-class). The pairing is deliberately editorial: the serif is the voice, the grotesque is the apparatus. There is no third typeface and no weight inflation; the serif lives at 500, the grotesque at 400/500.

The defining structural move is sharpness and physicality. Corners are square (`{rounded.none}`) almost everywhere — cards, buttons, inputs, image frames — which reinforces the printed-page feeling. The interaction layer adds the tactility: service "flip cards" that rotate to reveal a dark back face, draggable project thumbnails, and hover states that swap fills rather than fade opacity. Nothing floats on a soft shadow; elements sit on the page with hairline `{colors.border}` rules or a hard `{colors.border-strong}` outline.

**Key Characteristics:**
- Warm paper canvas (`{colors.background}`) instead of pure white — uncoated-stock cream
- A single saturated vermillion accent (`{colors.primary}`) doing all the emphasis work
- Oversized high-contrast serif display (Playfair-class) paired with a clean grotesque (Space Grotesk-class) for UI
- Square corners everywhere (`{rounded.none}`) — printed-matter sharpness
- Hairline + hard-outline borders instead of soft shadows
- Tactile interactions: flip cards, draggable thumbnails, fill-swap hovers
- Tight negative tracking on display type, generous line-height letting serifs breathe

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas — the printed-stock base.
- **Surface** (`{colors.surface}`): Slightly lighter card/panel surface that lifts off the paper.
- **Ink** (`{colors.ink}`): Near-black warm text and hard outlines.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, disabled labels.

### Accent
- **Vermillion** (`{colors.primary}`): The signature red — links, hover fills, badges, emphasis. Used sparingly for maximum impact.
- **Vermillion Hover** (`{colors.accent-hover}`): Darker red for pressed/hover on filled buttons.

### Neutral Scale
- **Neutral 900–100** (`{colors.neutral-900}` … `{colors.neutral-100}`): Warm-tinted grays for borders, dividers, soft surfaces.

### Borders
- **Border** (`{colors.border}`): Hairline rules between sections and cards.
- **Border Strong** (`{colors.border-strong}`): Hard near-black outline on outlined buttons, inputs, tags.

## Typography

### Font Family
- **Display**: `Playfair Display`, with fallbacks `Georgia, serif` — high-contrast editorial roman for all headlines.
- **Text / UI**: `Space Grotesk`, with fallbacks `Helvetica, Arial, sans-serif` — geometric grotesque for body, nav, buttons, captions.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 96px serif hero — billboard headline |
| `display` | 64px serif — major section openers |
| `section-heading` | 44px serif — section titles |
| `card-title` | 28px serif — project / card headings |
| `eyebrow` | 13px grotesque, tracked — labels above headings |
| `body-large` | 22px grotesque — intros, lead paragraphs |
| `body` | 18px grotesque — standard reading text |
| `body-small` | 15px grotesque — secondary copy |
| `button-ui` | 15px grotesque medium — buttons |
| `nav-link` | 16px grotesque medium — navigation |
| `caption` | 12px grotesque, tracked — metadata, tags |

### Principles
- **Serif speaks, grotesque operates**: Every headline is the high-contrast serif; every functional string is the grotesque. Never mix roles.
- **Tight display, open line-height**: Display sizes carry negative tracking (-2px to -0.4px) but sub-1.0 line-height, letting serif strokes interlock for an editorial density.
- **No weight inflation**: Serif at 500, grotesque at 400/500. No 700 bold, no light hairlines.
- **Tracked micro-labels**: Eyebrows and captions get positive tracking (1–1.5px) to read as apparatus, not prose.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large editorial jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (144px) between major sections.

### Grid & Container
- Wide editorial container with generous side margins
- Asymmetric, magazine-style placement — headlines and images intentionally off-grid
- Project thumbnails in a draggable / scattered arrangement rather than a rigid grid

### Whitespace Philosophy
- **Page as paper**: Large vertical breathing room between sections (`{spacing.3xl}`–`{spacing.4xl}`).
- **Hard edges, soft space**: Square corners and hard outlines are balanced by abundant negative space.
- **Section separation via hairlines**: `{colors.border}` rules and spacing, never background-color blocking.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text blocks |
| Hairline | `1px solid {colors.border}` | Cards, section dividers |
| Hard Outline | `1px solid {colors.border-strong}` | Outlined buttons, inputs, tags |
| Flip | 3D card rotation revealing `{colors.ink}` back face | Service / project flip cards |

**Depth Philosophy**: Depth is physical, not atmospheric. Instead of blur-based shadows, the system leans on hard outlines, flip rotations, and draggable layering. Elements feel like cards on a desk, not panes of frosted glass.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — cards, buttons, inputs, images |
| `xs` | 2px | Rare inline chips |
| `sm` | 4px | Optional softening |
| `pill` | 9999px | Status dots, avatars, webmention thumbnails |

## Components

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

### Buttons
- **`button-primary`** — Vermillion fill, paper text, square corners. The primary CTA.
- **`button-secondary`** — Paper surface with hard `{colors.border-strong}` outline; hover inverts to ink fill.

### Pills & Tags
- **`badge`** — Vermillion fill, paper text, square — status / "Available" markers.
- **`tag`** — Outlined chip, tracked caption type, for project categories.

### Cards
- **`card`** — Surface panel with hairline border, square corners.
- **`card-flip`** — Dark `{colors.ink}` back face revealed on rotation; serif title in paper text.

### Inputs
- **`input`** — Surface fill, hard outline, square. Focus swaps the outline to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Paper header, grotesque links, hairline bottom rule.

### Distinctive Components
- **Flip Cards**: Service cards rotate in 3D to a dark back face — the site's signature tactile move.
- **Draggable Thumbnails**: Project previews can be dragged/scattered, reinforcing the physical-object metaphor.

## Do's and Don'ts

### Do
- Keep the canvas warm paper (`{colors.background}`), never pure white
- Use the single vermillion accent (`{colors.primary}`) sparingly for maximum punch
- Set all headlines in the high-contrast serif at 500 weight
- Use the grotesque for every functional string
- Keep corners square (`{rounded.none}`)
- Swap fills on hover (vermillion → darker, paper → ink) instead of fading opacity
- Separate sections with hairline rules and big whitespace

### Don't
- Don't introduce a second accent color — the red works because it's alone
- Don't add soft drop shadows — depth is outlines and flips
- Don't round corners on cards, buttons, or images
- Don't set body copy in the serif, or headlines in the grotesque
- Don't inflate weights past 500
- Don't use pure white surfaces against the warm paper — it breaks the printed feel

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, serif display scales down hard, nav collapses |
| Tablet | 600–1024px | 2-column project grid, reduced section spacing |
| Desktop | 1024–1440px | Full editorial layout, draggable thumbnails active |
| Large | >1440px | Generous margins, max display sizes |

### Touch Targets
- Buttons use 14px×28px padding for comfortable tap area
- Nav links spaced generously
- Flip cards become tap-to-flip on touch devices

### Collapsing Strategy
- Hero serif: 96px → scales toward ~48px on mobile, keeps negative tracking proportionally
- Navigation: horizontal links → menu toggle
- Project thumbnails: scattered/draggable → stacked single column
- Section spacing: 144px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Warm Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Accent / links / CTA fill: Vermillion `{colors.primary}`
- Border (hairline): `{colors.border}`
- Border (hard): `{colors.border-strong}`

### Example Component Prompts
- "Hero on warm paper `{colors.background}`. Headline in Playfair Display 96px weight 500, line-height 0.98, letter-spacing -2px, color `{colors.ink}`. Eyebrow above it in Space Grotesk 13px tracked 1.5px. Vermillion square CTA (`{colors.primary}` fill, paper text, 0px radius, 14px 28px padding)."
- "Card: surface `{colors.surface}`, 1px hairline `{colors.border}`, square corners, serif title 28px weight 500, grotesque body 18px in `{colors.ink-secondary}`."
- "Flip card: front paper surface with serif title; back face `{colors.ink}` with paper text — rotates in 3D on hover."
- "Outlined button: paper background, 1px hard `{colors.border-strong}` outline, square, grotesque 15px medium; hover inverts to `{colors.ink}` fill with paper text."

### Iteration Guide
1. Warm paper canvas first — pure white breaks the system
2. One accent only: vermillion `{colors.primary}`, used sparingly
3. Serif for voice (headlines), grotesque for apparatus (everything functional)
4. Square corners everywhere; depth comes from outlines and flips, not shadows
5. Hover = fill swap, not opacity fade

---

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