---
version: alpha
name: And Again
description: Editorial studio minimalism — the custom Spezia grotesque on a pure-white canvas, near-black ink, hairline dark-gray borders, numbered project indexing (01 → 07), and muted gray secondary text. No accent color, no fill; structure and type do all the work.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  ink: "#000000"
  ink-soft: "#2d2d2d"
  ink-muted: "#747474"
  ink-placeholder: "#9ca3af"

  # Inverse (dark footer / hover blocks)
  inverse-bg: "#000000"
  on-inverse: "#ffffff"

  # Lines
  border: "#2d2d2d"
  border-soft: "#e5e5e5"

  # Focus
  focus-ring: "#3b82f6"

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

typography:
  display-hero:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  heading-xl:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1px
  heading:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  project-title:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-bold:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: 0px
  index-number:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "Spezia, Archivo, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.2px

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

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

components:
  link-view:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"

  link-muted:
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"

  button-primary:
    backgroundColor: "{colors.inverse-bg}"
    textColor: "{colors.on-inverse}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"

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

  index-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.project-title}"
    padding: 24px 0px
    borderColor: "{colors.border}"

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

  footer:
    backgroundColor: "{colors.inverse-bg}"
    textColor: "{colors.on-inverse}"
    typography: "{typography.body}"
    padding: 64px 40px

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

# And Again Design System

## Overview

And Again is a design studio portfolio that treats restraint as the entire aesthetic. The page is pure white (`{colors.background}`) with near-black ink, no accent color, no fills, and no decorative chrome — every element earns its place through typography, line, and negative space. It reads like a printed monograph translated to the web: numbered project entries (01 → 07), hairline dividers, and image-forward work cards that let the studio's output speak louder than its UI.

The typographic voice is carried by **Spezia**, a custom-loaded grotesque served as a local woff2 in two weights (400 regular, 700 bold). There is no third weight and no italic — the entire hierarchy is built from size, leading, and the binary of regular vs bold. Display headlines run large with tight negative tracking; body copy relaxes to neutral spacing. A monospace stack (`ui-monospace`) appears only for the project index numbers, a small system-font accent that nods to editorial folio numbering.

Color is almost absent by design. The palette is three values of ink — true black (`{colors.ink}`) for primary text and inverse blocks, a hairline dark gray (`{colors.ink-soft}`, the live `rgb(45 45 45)`) used for nearly every border, and a muted gray (`{colors.ink-muted}`, the live `rgb(116 116 116)`) for secondary copy and "View →" affordances. The footer flips to a black background with white text. The only chromatic moment is the browser focus ring (`{colors.focus-ring}`), a translucent blue inherited from defaults rather than a brand choice.

**Key Characteristics:**
- Custom Spezia grotesque, two weights only (400 / 700) — hierarchy from size, not weight variety
- Pure white canvas, zero accent color — monochromatic editorial discipline
- Hairline `{colors.ink-soft}` borders (live `rgb(45 45 45)`) as the primary structural device
- Numbered project index (01 → 07) in a monospace folio style
- Muted gray (`{colors.ink-muted}`) for secondary text and "View →" links
- Squared corners everywhere — no rounding, print-like edges
- Black-on-white inverted to white-on-black in the footer
- Image-forward work cards; UI recedes so the portfolio leads

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Primary headings, project titles, inverse-block fills.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark.
- **Ink Soft** (`{colors.ink-soft}`): The signature hairline border — live `rgb(45 45 45)`.

### Secondary Text
- **Ink Muted** (`{colors.ink-muted}`): Secondary copy, captions, "View →" links — live `rgb(116 116 116)`.
- **Ink Placeholder** (`{colors.ink-placeholder}`): Form placeholder text.

### Inverse
- **Inverse Background** (`{colors.inverse-bg}`): Footer / dark hover blocks.
- **On Inverse** (`{colors.on-inverse}`): White text on black.

### Lines
- **Border** (`{colors.border}`): Dividers, card outlines, input underlines.
- **Border Soft** (`{colors.border-soft}`): Lighter optional dividers.

### Focus
- **Focus Ring** (`{colors.focus-ring}`): Default browser keyboard-focus blue.

## Typography

### Font Family
- **Primary**: `Spezia` (custom woff2), with fallbacks: `Archivo, Arial, sans-serif`
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, monospace` — index numbers only
- **Weights**: 400 (regular) and 700 (bold) only — no medium, no italic.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Large landing headline, tight negative tracking |
| `heading-xl` | Bold section headlines |
| `heading` | Regular-weight section headings |
| `project-title` | Work / index entry titles |
| `body-large` | Lead paragraphs, intro copy |
| `body` | Standard reading text, links |
| `body-bold` | Emphasized labels |
| `index-number` | Monospace folio numbers (01–07) |
| `caption` | Metadata, small print |

### Principles
- **Binary weighting**: The whole system is 400 vs 700. Emphasis is bold, never a mid-weight.
- **Size carries hierarchy**: Headlines scale up dramatically with tight tracking; body stays neutral.
- **Mono as folio accent**: Monospace numbers reference print editorial sequencing.
- **No italics**: Tone stays even and architectural.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, opening into very large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections.

### Grid & Container
- Generous side margins, content held to a comfortable reading/portfolio width
- Project list as full-width numbered rows separated by `{colors.border}` hairlines
- Work cards: image-forward, square-cornered, with title + "View →" beneath

### Whitespace Philosophy
- **Print emptiness**: White space is the layout. Sections breathe with `{spacing.3xl}`+ vertical rhythm.
- **Lines over boxes**: Separation comes from hairline borders, not filled containers.
- **No rounding**: Square corners reinforce the editorial, paper-like character.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Everything — the system is shadowless |
| Hairline | `1px solid {colors.border}` | Dividers, cards, inputs |
| Inverse | Black fill, white text | Footer, hover blocks |
| Focus | Browser default ring `{colors.focus-ring}` | Keyboard focus |

**Depth Philosophy**: And Again has effectively no elevation system. There are no shadows and no rounded surfaces — depth is implied only by the black/white inversion of the footer and by hairline borders. The page is deliberately flat, like ink on paper.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — cards, buttons, inputs, images |
| `xs` | 2px | Rare small detail |
| `sm` | 4px | Optional softening |
| `pill` | 9999px | Reserved for tags if needed |

## Components

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

### Links
- **`link-view`** — The "View →" affordance, ink text, no underline by default.
- **`link-muted`** — Secondary muted-gray links.

### Buttons
- **`button-primary`** — Black fill, white text, square corners, no radius.
- **`button-outline`** — White, `{colors.border}` 1px outline, square.

### Cards & Index
- **`project-card`** — Image-forward work card, square corners, hairline border, title + "View →".
- **`index-row`** — Full-width numbered project row with bottom hairline divider.

### Navigation
- **`nav-bar`** — White, minimal, ink text, no border or subtle hairline.
- **`footer`** — Inverted: black background, white text, two-column contact layout.

### Inputs
- **`input`** — Underline-only field (border-bottom), no rounding; focus turns the line `{colors.focus-ring}`.

## Do's and Don'ts

### Do
- Keep the canvas pure white and the ink near-black
- Use hairline `{colors.border}` (`rgb(45 45 45)`) for all structural lines
- Build hierarchy from size and the 400/700 weight binary
- Use square corners everywhere
- Use muted gray for secondary text and "View →" links
- Invert to black/white in the footer

### Don't
- Don't introduce an accent or brand color — the system is monochrome
- Don't add a mid-weight (500/600) — only 400 and 700 exist
- Don't round corners on cards, buttons, or images
- Don't add shadows or elevation — the page is flat
- Don't fill containers with gray — use lines, not boxes
- Don't italicize Spezia

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked index rows, reduced margins |
| Tablet | 640–1024px | Two-up work grids begin |
| Desktop | >1024px | Full margins, large section spacing |

### Touch Targets
- "View →" links and nav items keep comfortable tap padding
- Index rows are full-width tappable

### Collapsing Strategy
- Display headlines scale down but keep tight tracking
- Work grid: multi-column → single column
- Footer two-column → stacked
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}`
- Heading text: Ink Black `{colors.ink}`
- Body text: Ink Black `{colors.ink}`; secondary `{colors.ink-muted}`
- Borders: `{colors.border}` (`rgb(45 45 45)`)
- Inverse blocks/footer: `{colors.inverse-bg}` with `{colors.on-inverse}`

### Example Component Prompts
- "Create a portfolio index row: white background, project title at 24px Spezia weight 700, a monospace folio number (01) at left, a muted-gray 'View →' link at right, and a 1px `{colors.border}` bottom divider. Square corners, no shadow."
- "Build a hero: white canvas, headline at 64px Spezia weight 400, letter-spacing -1.5px, color `{colors.ink}`. No accent color."
- "Design a footer: black background `{colors.inverse-bg}`, white text, two columns of contact links, 16px Spezia."

### Iteration Guide
1. Stay monochrome — no accent color ever
2. Two weights only: 400 for reading, 700 for emphasis
3. Hairline borders, never filled boxes or shadows
4. Square corners throughout
5. Muted gray `{colors.ink-muted}` for all secondary text and "View →" links

---

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