---
version: alpha
name: Pixel Poetry
description: Editorial design-studio experiment — Px Grotesk sans paired with ITC New Baskerville serif, a warm paper canvas, and a single electric pure-blue (#0000ff) accent. Restrained Tailwind grayscale, hairline rules, and full-pill primary actions. Type-as-art, color used like punctuation.
colors:
  # Canvas + ink
  background: "#f3edea"        # warm paper canvas
  surface: "#ffffff"
  surface-soft: "#f6f7f8"
  surface-muted: "#f3f4f6"
  ink: "#111827"               # gray-900, primary text
  ink-secondary: "#374151"     # gray-700
  ink-tertiary: "#4b5563"      # gray-600
  ink-muted: "#6b7280"         # gray-500
  ink-faint: "#9ca3af"         # gray-400

  # Accent — the single electric blue, used like punctuation
  primary: "#0000ff"           # pure electric blue
  link-blue: "#2563eb"         # interactive link blue
  ring-blue: "#93b4f8"         # was rgba(59,130,246,.5) — flattened over paper

  # Status
  danger: "#ef4444"            # red-500, "Try again"
  danger-strong: "#dc2626"     # red-600

  # Neutral borders + scale
  border: "#d1d5db"            # gray-300
  border-soft: "#e5e7eb"       # gray-200
  gray-800: "#1f2937"
  gray-700: "#374151"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f3edea"            # paper text on dark surfaces
  on-paper: "#111827"

typography:
  display:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 2.5rem
    letterSpacing: 0px
  heading:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 2.25rem
    letterSpacing: 0px
  subheading:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 2rem
    letterSpacing: 0px
  step-label:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.75rem
    letterSpacing: 0.025em
  serif-lead:
    fontFamily: "ITCNewBaskervilleRoman, ITC New Baskerville, Libre Baskerville, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 2rem
    letterSpacing: 0px
  serif-body:
    fontFamily: "ITCNewBaskervilleRoman, ITC New Baskerville, Libre Baskerville, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.75rem
    letterSpacing: 0px
  body:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5rem
    letterSpacing: 0px
  body-medium:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5rem
    letterSpacing: 0px
  body-small:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25rem
    letterSpacing: 0px
  caption:
    fontFamily: "Px-Regular, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1rem
    letterSpacing: 0.025em
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25rem
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  full: 9999px
  pill: 9999px

components:
  # Primary action — full pill, dark ink fill
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.gray-800}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Accent action — electric blue
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary — bordered ghost on paper
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Reset / danger text action ("Try again")
  button-reset:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.danger-strong}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border-soft}"

  # Standard card — white over paper, hairline border
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Step card — numbered process panel
  card-step:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.step-label}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Text input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.link-blue}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px

  # Accent dot / marker
  dot:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 16px

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

  # Inline link
  link:
    textColor: "{colors.link-blue}"
    typography: "{typography.body}"
---

# Pixel Poetry Design System

## Overview

Pixel Poetry is an experiment from the Here design studio — a small, opinionated web toy built on the premise that "with the right tool any person can become a poet." Its design language reflects that thesis: it is editorial first, interface second. The canvas is a warm off-white paper (`{colors.background}`), not a clinical pure white, which immediately frames the page as a printed object rather than a dashboard. Text carries the design; chrome stays out of the way.

The typographic pairing is the heart of the system. Headings and UI run in Px Grotesk (`Px-Regular`), a neo-grotesque sans with a confident, slightly mechanical character, while reading passages drop into ITC New Baskerville — a classic transitional serif that lends the writing a literary, hand-set quality. This sans-for-structure / serif-for-soul split is the signature move: the interface speaks in grotesque, the poetry speaks in Baskerville. A third face, Px Screen, exists for screen-optimized rendering of the same grotesque shapes.

Color is used like punctuation, not decoration. The palette is almost entirely achromatic — paper, near-black ink (`{colors.ink}`), and a quiet ladder of Tailwind grays for secondary text and hairline borders. Against that restraint sits a single electric pure-blue (`{colors.primary}`, `#0000ff`) that appears only at the moments that matter: an accent dot, an active marker, a deliberate highlight. A separate link-blue (`{colors.link-blue}`) and a red (`{colors.danger}`) for reset/retry actions round out the functional accents.

Geometry is minimal and deliberate. Radii collapse to essentially two states — a 4px softening on cards and inputs, and a full pill (`{rounded.pill}`) on primary actions — plus perfect circles (`{rounded.full}`) for the accent dot. Borders are hairline grays, never heavy. The result feels like a beautifully set page in a design journal that happens to be interactive.

**Key Characteristics:**
- Warm paper canvas (`{colors.background}` `#f3edea`) instead of pure white — page-as-print
- Dual typeface system: Px Grotesk for structure/UI, ITC New Baskerville serif for reading
- A single electric pure-blue (`{colors.primary}` `#0000ff`) used like punctuation, sparingly
- Mostly achromatic Tailwind grayscale for text hierarchy and hairline borders
- Full-pill primary actions (`{rounded.pill}`); 4px soft radius everywhere else
- Letter-spacing kept tight; only labels/captions get the gentle `0.025em` track
- Three weights only — 400 (read), 500 (UI), 600 (step labels)

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas. Defines the editorial, printed feel.
- **Surface White** (`{colors.surface}`): Cards and panels that lift off the paper.
- **Surface Soft** (`{colors.surface-soft}`): Subtle gray panel tint for step cards.
- **Ink** (`{colors.ink}`): Primary text and dark fills — gray-900, near-black with warmth.
- **Ink Secondary** (`{colors.ink-secondary}`): Strong secondary copy.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Body-secondary, captions.
- **Ink Muted** (`{colors.ink-muted}`): Quiet metadata, placeholders.
- **Ink Faint** (`{colors.ink-faint}`): Disabled, lowest-priority text.

### Accent
- **Electric Blue** (`{colors.primary}`): The single pure-blue punctuation color — accent dots, active markers, deliberate highlights only.
- **Link Blue** (`{colors.link-blue}`): Interactive links and input focus.
- **Ring Blue** (`{colors.ring-blue}`): Focus ring, flattened from a translucent blue over paper.

### Status
- **Danger** (`{colors.danger}`): Reset / retry signal (red-500).
- **Danger Strong** (`{colors.danger-strong}`): Hover/pressed retry (red-600).

### Borders & Neutral Scale
- **Border** (`{colors.border}`): Standard hairline (gray-300) on inputs/ghost buttons.
- **Border Soft** (`{colors.border-soft}`): Lightest dividers and card outlines (gray-200).
- **Gray 800 / 700** (`{colors.gray-800}` / `{colors.gray-700}`): Dark surfaces and hover fills.

## Typography

### Font Family
- **Primary (UI/headings)**: `Px-Regular` (Px Grotesk), fallback `Space Grotesk, ui-sans-serif, system-ui, sans-serif`
- **Serif (reading)**: `ITCNewBaskervilleRoman` (ITC New Baskerville), fallback `Libre Baskerville, Georgia, serif`
- **Mono**: system mono stack — `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | 36px page hero in Px Grotesk |
| `heading` | Section titles |
| `subheading` | Card / sub-section headings |
| `step-label` | Numbered step labels, weight 600, tracked |
| `serif-lead` | Featured poetic lead lines in Baskerville |
| `serif-body` | Reading passages, poem text in Baskerville |
| `body` | Standard UI text |
| `body-medium` | Buttons, nav, emphasized UI |
| `body-small` | Compact UI, helper text |
| `caption` | Metadata, badges, tags (tracked) |
| `mono` | Technical / monospace fragments |

### Principles
- **Sans for structure, serif for soul**: Px Grotesk carries every interface element; ITC New Baskerville carries everything meant to be *read* as writing.
- **Three weights, strict roles**: 400 (reading/body), 500 (UI/interactive), 600 (step labels). No bold beyond 600.
- **Tight tracking**: default letter-spacing is neutral; only step labels and captions take the gentle `0.025em` track for legibility at small sizes.
- **Paper-aware contrast**: ink reads as near-black on warm paper rather than pure black on pure white — softer, more editorial.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 4px on an 8px rhythm. Generous vertical breathing room (`{spacing.4xl}`–`{spacing.5xl}`) separates the three process steps.

### Grid & Container
- Centered single-column editorial measure for reading content
- Horizontally-paged step panels (each `flex: 0 0 100vw`) for the three-step walkthrough
- Hairline `{colors.border-soft}` rules separate sections rather than background shifts

### Whitespace Philosophy
- **Print margins**: wide outer margins frame the content like a page in a journal.
- **Paper, not panels**: separation comes from the warm canvas, hairline rules, and white card lifts — never from heavy fills or shadows.
- **Color as breath**: the electric blue appears rarely, so each appearance reads as emphasis.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, paper canvas | Page background, reading text |
| Hairline (Level 1) | `1px solid {colors.border-soft}` | Cards, dividers, step panels |
| Lift (Level 2) | White surface + soft `rgba(0,0,0,.05)` shadow | Floating cards over paper |
| Focus | `{colors.ring-blue}` ring on interactive elements | Keyboard focus / input focus |

**Shadow Philosophy**: Depth is whisper-level. The design leans on the paper-vs-white surface contrast and hairline borders for separation; shadows are a faint `rgba(0,0,0,.05)` lift at most. Nothing floats dramatically — the page should read as a flat, beautifully set object.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, rules |
| `sm` | 4px | Cards, inputs, panels |
| `full` | 9999px | Accent dots, circular markers |
| `pill` | 9999px | Primary actions, badges |

## Components

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

### Buttons
- **`button-primary`** — Dark ink (`{colors.ink}`) fill, paper text, full pill. The default action.
- **`button-accent`** — Electric blue (`{colors.primary}`) fill for the one moment that deserves color.
- **`button-secondary`** — Paper ghost with hairline `{colors.border}`.
- **`button-reset`** — Red text ("Try again") on white, soft 4px radius.

### Cards
- **`card`** — White surface over paper, hairline `{colors.border-soft}`, 4px radius.
- **`card-step`** — Soft gray panel with a tracked, weight-600 step label.

### Inputs
- **`input`** — White surface, gray-300 hairline, 4px radius. Focus shifts the border to link-blue with the blue ring.

### Markers & Badges
- **`dot`** — A perfect circle in electric blue: the signature accent marker.
- **`badge`** — Muted gray pill, tracked caption text.

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

### Distinctive Components
- **Three-step process pager**: full-viewport horizontal panels (`flex: 0 0 100vw`) walking through Step 1 / 2 / 3, each with a tracked grotesque label.
- **Serif poetry block**: ITC New Baskerville reading passages that visually break from the grotesque UI to signal "this is the writing."

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) as the default — not pure white
- Set UI and headings in Px Grotesk; set anything meant to be *read* in ITC New Baskerville
- Reserve electric blue (`{colors.primary}`) for true emphasis — dots, markers, one accent action
- Use hairline gray borders and white card lifts for separation, not heavy shadows
- Keep to three weights: 400, 500, 600
- Use full pills for primary actions and 4px radius everywhere else

### Don't
- Don't replace the paper canvas with clinical pure white
- Don't run reading/poetry copy in the grotesque — the serif carries the soul
- Don't scatter the electric blue decoratively — it loses its punctuation power
- Don't add heavy drop shadows or large radii — the system stays flat and editorial
- Don't introduce a third accent hue; blue (and red for retry) is the whole color story
- Don't exceed weight 600

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, full-viewport step panels, stacked nav |
| Tablet | 640–1024px | Wider reading measure, side margins grow |
| Desktop | 1024–1280px | Centered editorial column, generous outer margins |
| Large | >1280px | Max measure held; paper margins expand |

### Touch Targets
- Pill buttons use comfortable 12px vertical / 24px horizontal padding
- Nav links at 16px weight 500 with adequate spacing
- Step pager swipes horizontally one viewport at a time

### Collapsing Strategy
- Three-step pager: horizontal full-viewport panels on all sizes, swipe on touch
- Reading column: narrows margins on mobile, holds a comfortable serif measure
- Nav: horizontal links → stacked on small screens
- Type scale: display 36px softens down proportionally on mobile

### Image / Specimen Behavior
- Type specimens and poem blocks reflow with the reading measure
- Paper canvas runs edge-to-edge at every size

---

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