---
version: alpha
name: Seba Prt
description: Editorial portfolio minimalism — PP Pangaia Ultralight (weight 200) at billboard 100–200px sizes with tight negative tracking, set against a near-white #f3f3f5 wash with pure-black ink, Helvetica Neue for utilitarian UI copy, and zero-radius squared geometry throughout.
colors:
  # Canvas + ink
  background: "#f3f3f5"
  surface: "#ffffff"
  surface-wash: "#cbced4"
  ink: "#000000"
  ink-soft: "#252525"

  # Primary / accent (flattened from oklch)
  primary: "#030213"
  on-primary: "#ffffff"

  # Muted / secondary text
  muted: "#ececf0"
  muted-foreground: "#717182"
  accent-surface: "#e9ebef"

  # Borders
  border: "#000000"
  border-soft: "#d6d6db"

  # On-color
  on-ink: "#ffffff"
  on-surface: "#000000"

typography:
  display-mega:
    fontFamily: "PP Pangaia, Cormorant, Georgia, serif"
    fontSize: 200px
    fontWeight: 200
    lineHeight: 0.85
    letterSpacing: -1.55px
  display-hero:
    fontFamily: "PP Pangaia, Cormorant, Georgia, serif"
    fontSize: 155px
    fontWeight: 200
    lineHeight: 0.89
    letterSpacing: -0.6px
  display-large:
    fontFamily: "PP Pangaia, Cormorant, Georgia, serif"
    fontSize: 100px
    fontWeight: 200
    lineHeight: 1.04
    letterSpacing: -0.6px
  heading:
    fontFamily: "PP Pangaia, Cormorant, Georgia, serif"
    fontSize: 60px
    fontWeight: 200
    lineHeight: 1.04
    letterSpacing: -0.26px
  sub-heading:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.24
    letterSpacing: -0.2px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.14px
  body-small:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.13px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-bold:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  serif-italic:
    fontFamily: "Libre Baskerville, Arapey, Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.24
    letterSpacing: -0.2px

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

rounded:
  none: 0px
  micro: 2px
  pill: 9999px

components:
  # Primary dark action — squared
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Secondary / outline — black hairline on white
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Text-only nav link
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px 0px

  # Flat editorial card — no radius, hairline border
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Project / image tile on wash
  card-tile:
    backgroundColor: "{colors.surface-wash}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 24px

  # Muted metadata chip
  chip:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.border}"
---

# Seba Prt Design System

## Overview

Seba Prt is the portfolio of Sebastiano Pierotti, an Art Director and Interaction Designer, and the site reads exactly like what an editorial-minded interaction designer would build for themselves: a quiet, near-white canvas dominated by enormous ultralight serif type. The aesthetic is gallery-grade restraint — there is almost no chrome, almost no color, and the typography itself carries the entire visual identity. The page background is a barely-there cool grey (`{colors.background}`) rather than pure white, which lets pure-black ink (`{colors.ink}`) sit with maximum contrast while still feeling soft and printed rather than digital.

The defining move is scale. Display headlines run at 100px, 155px, and even 200px in PP Pangaia Ultralight (weight 200), a humanist serif with delicate high-contrast strokes. At that size the hairline-thin letterforms become architecture — they fill the viewport, set with tight negative tracking (-0.6px to -1.55px) and compressed line-heights (0.85–1.04) so the words stack like a poster. This is type as image. Against the whisper-weight serif, all functional copy switches to Helvetica Neue at small sizes (13–14px), creating a deliberate two-voice system: serif for expression, grotesque sans for information.

Geometry is uncompromisingly squared. Border radius is effectively zero everywhere (`{rounded.none}`) — buttons, cards, image tiles, and inputs all use hard 90-degree corners. When the design needs separation it reaches for a single black hairline (`{colors.border}`) or a flat warm-grey panel (`{colors.surface-wash}`), never a shadow or a rounded card. The result is a system that feels closer to a printed monograph or an exhibition catalog than a typical SaaS site.

Color is almost absent by design. The palette is achromatic — a cool-grey wash, pure white surfaces, pure black ink, and a single near-black primary (`{colors.primary}`, an oklch-derived `#030213`) for the rare solid action. Muted greys (`{colors.muted-foreground}`) handle secondary metadata. There are no brand hues, no gradients, no accent colors; restraint is the brand.

**Key Characteristics:**
- PP Pangaia Ultralight (weight 200) at billboard 100–200px sizes — type as the primary visual
- Tight negative tracking (-0.6px to -1.55px) with compressed line-heights (0.85–1.04) on display
- Two-voice typography: ultralight serif for expression, Helvetica Neue for utilitarian copy
- Near-white cool-grey canvas (`{colors.background}`) with pure-black ink, not flat white
- Zero border-radius everywhere — hard squared geometry, no rounded cards
- Black hairline borders and flat grey panels for separation instead of shadows
- Achromatic palette — no brand color, a single near-black `{colors.primary}` for solid actions
- Occasional serif italic (Libre Baskerville / Arapey) for editorial emphasis

## Colors

### Canvas & Ink
- **Background Wash** (`{colors.background}`): The cool near-white page canvas. Softer than pure white, gives a printed feel.
- **Surface** (`{colors.surface}`): Pure white card and panel surfaces, used for contrast against the wash.
- **Surface Wash** (`{colors.surface-wash}`): Warm-grey panel used behind project tiles and image blocks.
- **Ink** (`{colors.ink}`): Pure black — all display type, headings, and primary copy.
- **Ink Soft** (`{colors.ink-soft}`): Near-black for slightly recessed body text.

### Primary / Action
- **Primary** (`{colors.primary}`): Near-black `#030213` (flattened from oklch) — solid action buttons.
- **On Primary** (`{colors.on-primary}`): White text on the primary fill.
- **Accent Surface** (`{colors.accent-surface}`): Pale grey hover/active surface tint.

### Muted / Secondary
- **Muted** (`{colors.muted}`): Pale grey chip and tag background.
- **Muted Foreground** (`{colors.muted-foreground}`): Secondary metadata text.

### Borders
- **Border** (`{colors.border}`): Pure black hairline — the primary separator.
- **Border Soft** (`{colors.border-soft}`): Light grey divider for quieter separation.

## Typography

### Font Family
- **Display / Serif**: `PP Pangaia` (Ultralight, weight 200), fallbacks `Cormorant, Georgia, serif`. The signature voice.
- **UI / Body**: `Helvetica Neue`, fallbacks `Helvetica, Arial, sans-serif`. All functional copy.
- **Editorial Italic**: `Libre Baskerville` / `Arapey`, fallbacks `Georgia, serif`. Emphasis and quotes.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-mega` | 200px PP Pangaia — viewport-filling poster headline |
| `display-hero` | 155px hero statement |
| `display-large` | 100px section opener |
| `heading` | 60px serif heading |
| `sub-heading` | 20px Helvetica intro / lede |
| `body` | 14px standard reading and UI text |
| `body-small` | 13px secondary copy |
| `caption` | 12px metadata, button labels |
| `label-bold` | 13px bold label |
| `serif-italic` | 20px Libre Baskerville italic for editorial emphasis |

### Principles
- **Type as image**: Display serif is sized to fill the viewport (up to 200px). The page composition IS the typography.
- **Ultralight only**: Display always uses weight 200 — the hairline strokes are the identity. Never bolden the serif.
- **Two voices, strict roles**: PP Pangaia serif for expression and scale; Helvetica Neue for all small functional copy.
- **Tracking tightens with size**: -1.55px at 200px, -0.6px at 100–155px, near-zero at body sizes.
- **Compressed leading**: Display line-heights drop below 1.0 (0.85–0.89) so giant words stack tightly.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous editorial whitespace; large jumps between `{spacing.3xl}` (64px) and `{spacing.4xl}` (120px) frame the oversized type.

### Grid & Container
- Full-bleed display type that breaks out toward the viewport edges
- Asymmetric editorial composition rather than rigid centered columns
- Project tiles on warm-grey wash panels
- Black hairline rules to divide sections

### Whitespace Philosophy
- **Poster emptiness**: Oversized serif headlines are surrounded by deliberate void — the white space frames the type like a gallery wall.
- **No decorative chrome**: Separation comes from hairlines and flat panels, never shadows or rounding.
- **Print rhythm**: Vertical spacing follows an editorial cadence closer to a printed monograph than a web app.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, tiles, inputs. The squared identity. |
| `micro` | 2px | Rare small inline elements |
| `pill` | 9999px | Reserved (largely unused) |

The system is defined by the *absence* of radius. Hard 90-degree corners on every surface reinforce the printed, architectural feel.

## Components

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

### Buttons
- **`button-primary`** — Near-black fill, white caption text, zero radius. The rare solid CTA.
- **`button-secondary`** — White surface with a pure-black hairline border, zero radius.

### Cards
- **`card`** — Flat white panel, hard corners, light hairline border. No shadow.
- **`card-tile`** — Warm-grey wash panel for project/image tiles.

### Navigation
- **`nav-bar`** — Minimal bar on the wash canvas, 14px Helvetica Neue links, black ink.
- **`nav-link`** — Plain text link, no underline or background until hover.

### Inputs & Chips
- **`input`** — White surface, black hairline, squared, 14px Helvetica Neue.
- **`chip`** — Pale grey metadata chip with muted text.

## Do's and Don'ts

### Do
- Size PP Pangaia Ultralight to fill the viewport (100–200px) — type carries the design
- Keep the serif at weight 200 always; the hairline strokes are the identity
- Use Helvetica Neue for every small functional label and body string
- Tighten tracking as type scales up (-0.6px to -1.55px)
- Keep all geometry squared — zero radius everywhere
- Separate with black hairlines or flat grey panels, never shadows
- Keep the palette achromatic — grey wash, white, black

### Don't
- Don't bolden or fill the display serif — ultralight only
- Don't introduce brand colors, gradients, or accent hues
- Don't round corners — the squared geometry is non-negotiable
- Don't add drop shadows or floating-card depth
- Don't set body copy in the serif — Helvetica Neue handles information
- Don't use pure flat white as the page canvas — the cool wash matters

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Display type scales down sharply but stays oversized relative to body; single column |
| Tablet | 600–1024px | Editorial asymmetry begins, 2-column tiles |
| Desktop | 1024–1440px | Full billboard type, asymmetric composition |
| Large Desktop | >1440px | Maximum display scale (155–200px), generous margins |

### Collapsing Strategy
- Display headlines: 200px → scales down proportionally, retains tight tracking and sub-1.0 leading
- Two-voice system preserved at all sizes — serif display, Helvetica body
- Project tiles: multi-column grid → single stacked column
- Hairline rules and flat panels persist unchanged across breakpoints

### Touch Targets
- Buttons keep comfortable 12px vertical padding
- Nav links at 14px with adequate spacing
- Squared geometry maintained on all interactive elements

---

## Agent Prompt Guide

### Quick Color Reference
- Page canvas: cool near-white wash `{colors.background}`
- Surface: pure white `{colors.surface}`
- Ink / headings: pure black `{colors.ink}`
- Primary action: near-black `{colors.primary}`
- Border: black hairline `{colors.border}`
- Secondary text: `{colors.muted-foreground}`

### Example Component Prompts
- "Create a hero: cool near-white background `{colors.background}`. Single word headline in PP Pangaia Ultralight (weight 200) at 200px, line-height 0.85, letter-spacing -1.55px, pure black `{colors.ink}`. Below it a 14px Helvetica Neue line `{colors.ink}`. No other chrome."
- "Design a project tile: warm-grey panel `{colors.surface-wash}`, zero radius, 16px padding. Caption in 12px Helvetica Neue weight 500, `{colors.ink}`."
- "Build a button: near-black fill `{colors.primary}`, white caption text, zero radius, 12px 24px padding. Secondary variant: white surface, pure-black hairline border, zero radius."
- "Create an editorial pull-quote in Libre Baskerville italic at 20px, `{colors.ink}`, on the white surface."

### Iteration Guide
1. Always lead with oversized PP Pangaia Ultralight — type is the design, not a label on it
2. Two voices only: serif for scale/expression, Helvetica Neue for all small copy
3. Zero radius everywhere — squared geometry is the structural identity
4. Achromatic palette — never add color; separation is hairlines and flat panels
5. Keep the canvas on the cool wash, not flat white, for the printed feel
6. Tracking and leading tighten as type grows

---

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