---
version: alpha
name: Powell Studio
description: Editorial minimalism for a design practice — near-black ink on warm off-white paper, an oversized serif display voice paired with a quiet grotesque for body, hairline rules instead of boxes, and almost no radius. Whitespace and type do the work; color is withheld until a single restrained accent.

colors:
  # Canvas + ink
  background: "#f7f5f1"
  surface: "#ffffff"
  surface-soft: "#efece6"
  ink: "#16140f"
  ink-pure: "#000000"

  # Secondary / muted ink
  ink-secondary: "#54514a"
  ink-muted: "#8c887f"

  # Accent — withheld, used sparingly
  primary: "#1a1814"        # near-black primary action
  accent: "#b4452b"         # terracotta editorial accent

  # Lines + neutrals
  hairline: "#d8d3c9"
  border: "#cfc9bd"
  gray-50: "#efece6"
  gray-100: "#e3ded4"
  gray-300: "#bdb7aa"
  gray-500: "#8c887f"
  gray-700: "#54514a"
  gray-900: "#16140f"

  # On-color
  on-primary: "#f7f5f1"
  on-accent: "#ffffff"
  on-ink: "#f7f5f1"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -2.0px
  display:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.4px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.1px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.6px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  link-underline:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.ink}"
  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-eyebrow}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.hairline}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 0px
    borderColor: "{colors.hairline}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px
    borderColor: "{colors.hairline}"
  divider:
    backgroundColor: "{colors.hairline}"
    height: 1px
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"
---

# Powell Studio Design System

## Overview

Powell Studio presents itself the way a good editorial spread does — as paper, not as a screen. The canvas is a warm off-white (`{colors.background}`), closer to uncoated stock than the clinical pure-white of a SaaS landing page, and the text sits in a near-black ink (`{colors.ink}`) that carries the faintest warmth rather than the hard `#000000`. The result reads as printed matter: confident, quiet, and unhurried. This is a portfolio that trusts its work to speak and uses the interface only to frame it.

The typographic contrast is the whole identity. An oversized serif display face (Fraunces, in the corpus mapping) carries the hero and section headings at large sizes with tight negative tracking, giving the studio a literary, gallery-catalog voice. Underneath it, a neutral grotesque (Inter) handles body copy, labels, and UI at calm, readable sizes. The pairing — expressive serif over silent sans — is the editorial-minimal move: drama lives in the headlines, legibility lives everywhere else.

Structure comes from hairlines, not boxes. Sections are separated by 1px rules in a muted warm gray (`{colors.hairline}`) and by generous vertical whitespace, never by filled cards or heavy shadows. Radius is almost absent — surfaces are square or barely softened (`{rounded.sm}`), reinforcing the print-like rigor. The one departure is the action button, which takes a full pill so the rare call-to-action reads as deliberate punctuation against an otherwise rectilinear page.

Color is withheld. The palette is essentially monochrome warm-neutral until a single terracotta accent (`{colors.accent}`) appears — on a hover, an active link, a highlighted word — where it lands with maximum impact precisely because nothing else competes. The discipline is the point: restraint as a signal of taste.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`), not clinical white
- Near-black warm ink (`{colors.ink}`) rather than pure black
- Oversized serif display (Fraunces) with tight negative tracking for headlines
- Neutral grotesque (Inter) for body, labels, and UI
- Hairline rules (`{colors.hairline}`) for structure — no heavy cards or shadows
- Near-zero radius everywhere except the pill action button
- A single withheld terracotta accent (`{colors.accent}`) used sparingly
- Uppercase tracked-out eyebrows (`{typography.label-eyebrow}`) for section labels

## Colors

### Primary
- **Warm Ink** (`{colors.ink}`): Primary text, headings, rules. Near-black with a trace of warmth — never `#000000`.
- **Paper** (`{colors.background}`): Page canvas. A warm off-white reading as uncoated stock.
- **Surface White** (`{colors.surface}`): Cards, inputs, lifted panels where a cleaner white is wanted.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy at lower emphasis, captions.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrows, metadata, placeholder text.

### Accent
- **Studio Primary** (`{colors.primary}`): Near-black fill for the primary action button.
- **Terracotta** (`{colors.accent}`): The withheld editorial accent — hover states, active links, highlighted words.

### Lines & Neutrals
- **Hairline** (`{colors.hairline}`): The signature 1px rule between sections and around cards.
- **Border** (`{colors.border}`): Input and secondary-button outlines.
- **Surface Soft** (`{colors.surface-soft}`): Subtle tinted panels, project thumbnails backdrop.
- **Gray scale** (`{colors.gray-50}`–`{colors.gray-900}`): Warm neutral ramp for tints and muted text.

### On-Color
- **On Primary** (`{colors.on-primary}`): Paper-tone text on the dark button.
- **On Accent** (`{colors.on-accent}`): White text on terracotta.

## Typography

### Font Family
- **Display / Headings**: `Fraunces`, with fallbacks `Georgia, Times New Roman, serif` — an expressive, high-contrast serif.
- **Body / UI**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a neutral grotesque.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px serif hero — the studio name / opening statement |
| `display` | 56px serif — large feature lines |
| `section-heading` | 36px serif section titles |
| `sub-heading` | 24px serif sub-sections |
| `card-title` | 18px sans project / card titles |
| `body-large` | 20px sans introductions |
| `body` | 16px sans standard reading text |
| `body-small` | 14px sans secondary copy |
| `label-eyebrow` | 12px sans uppercase tracked-out eyebrows |
| `button-ui` | 14px sans button / nav labels |
| `caption` | 12px sans metadata, badges |

### Principles
- **Serif drama, sans silence**: All expression lives in the serif headlines; the sans carries everything functional at quiet sizes.
- **Tight display tracking**: Serif display sizes use -0.8px to -2.0px tracking for a compressed, set-in-metal feel.
- **Tracked-out eyebrows**: The only positive letter-spacing in the system — uppercase labels at +1.6px.
- **Two weights for sans**: 400 (read) and 500 (labels/UI). No bold body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The rhythm is generous — sections breathe on `{spacing.4xl}`–`{spacing.5xl}` of vertical space.

### Grid & Container
- Max content width: approximately 1200px, with wide outer margins
- Hero: left-aligned single column, serif display with deep top padding
- Project index: 2-column grid of thumbnails, collapsing to single column
- Hairline rules span full content width between sections

### Whitespace Philosophy
- **Editorial air**: Whitespace is the primary structural device. Sections are defined by space and hairlines, not containers.
- **Asymmetry allowed**: Left-aligned headings with trailing whitespace, magazine-style.
- **Restraint**: No competing surfaces; the work and the type own the page.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page, text blocks, most surfaces |
| Hairline (Level 1) | `1px solid {colors.hairline}` | Cards, dividers, input outlines |
| Soft Lift (Level 2) | `0 1px 2px rgba(22,20,15,0.05)` | Rare lifted panel on hover |

**Shadow Philosophy**: Depth is almost entirely flat. The system relies on hairline rules and whitespace rather than shadow. The rare lift is whisper-light and warm-tinted to match the paper.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — square corners, print rigor |
| `xs` | 2px | Inline chips |
| `sm` | 4px | Cards, inputs, thumbnails |
| `md` | 6px | Slightly softened panels |
| `lg` | 10px | Largest softened container |
| `pill` | 9999px | Action buttons and badges only |

## 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, paper-tone text, full pill, 14px 28px padding. Hovers to terracotta.
- **`button-secondary`** — Paper background with a `{colors.border}` hairline outline.

### Links
- **`link-underline`** — Ink text with a 1px ink underline; turns terracotta on hover.

### Cards
- **`card`** — White surface, `{rounded.sm}`, hairline border. Used for content panels.
- **`card-project`** — Tinted soft surface, zero inner padding so imagery runs edge to edge.

### Inputs
- **`input`** — White surface, hairline border, focus swaps the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — Paper background, 14px sans links, bottom hairline. Studio name set in the serif at left.

### Distinctive Components
- **Eyebrow label**: Uppercase 12px sans, +1.6px tracking, muted ink — the section-marker voice.
- **Hairline divider**: 1px `{colors.hairline}` rule, the primary structural separator.
- **Project index**: Two-column grid of edge-to-edge thumbnails with serif titles below.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white
- Pair the serif display (`{typography.display-hero}`) with the sans body — that contrast IS the brand
- Structure with hairline rules and whitespace, not boxes or shadows
- Keep corners square or barely softened; reserve the pill for buttons and badges
- Withhold the terracotta accent (`{colors.accent}`) for rare, deliberate moments
- Use uppercase tracked-out eyebrows for section labels

### Don't
- Don't use pure black `#000000` for text — `{colors.ink}` carries warmth
- Don't introduce a clinical white background
- Don't add heavy shadows or filled card chrome — the system is flat and hairline-led
- Don't set body copy in the serif — the serif is for display only
- Don't scatter the terracotta accent decoratively; it loses its punch
- Don't apply positive tracking anywhere except the eyebrow labels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, tighter margins |
| Tablet | 600–1024px | 2-column project grid begins, expanded padding |
| Desktop | 1024–1400px | Full layout, wide outer margins |
| Large Desktop | >1400px | Centered, generous side gutters |

### Touch Targets
- Buttons use comfortable padding (14px vertical)
- Nav links at 14px with adequate spacing
- Project thumbnails are large tap targets

### Collapsing Strategy
- Hero: serif display 72px → scales down, keeps negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Project index: 2-column → single column
- Section spacing: 96px+ → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading text: Warm Ink `{colors.ink}` (serif)
- Body text: Ink Secondary `{colors.ink-secondary}` (sans)
- Rules / borders: Hairline `{colors.hairline}`
- Accent (rare): Terracotta `{colors.accent}`
- Primary CTA: Near-black `{colors.primary}`, pill

### Example Component Prompts
- "Create a hero on warm paper `{colors.background}`. Headline in Fraunces 72px weight 400, line-height 1.02, letter-spacing -2.0px, color `{colors.ink}`. Above it a 12px uppercase eyebrow in Inter, +1.6px tracking, `{colors.ink-muted}`. Below, body in Inter 20px `{colors.ink-secondary}`."
- "Design a project index: 2-column grid of edge-to-edge thumbnails on `{colors.surface-soft}` cards, `{rounded.sm}`, separated by `{colors.hairline}` rules. Each title in Inter 18px weight 500 below the image."
- "Build a primary button: `{colors.primary}` fill, `{colors.on-primary}` text, full pill, 14px 28px padding, Inter 14px weight 500. Hover swaps fill to terracotta `{colors.accent}`."
- "Create a nav bar: paper background, studio name in Fraunces at left, Inter 14px weight 500 links right, 1px `{colors.hairline}` bottom rule."

### Iteration Guide
1. Paper canvas + warm ink first — never pure white or pure black
2. Serif for display only; sans for everything functional
3. Hairlines and whitespace carry structure — resist adding boxes
4. Square corners by default; pill only on buttons/badges
5. Terracotta is punctuation — one accent moment per view, not many

---

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