---
version: alpha
name: Wam Studio
description: Photography-led editorial minimalism for an architecture practice — near-white canvas, charcoal ink, a single warm earthen accent, oversized sans-serif headlines with tight tracking, and text-link CTAs that let large-format building imagery carry the page.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f4f2ef"
  ink: "#1a1a1a"
  ink-pure: "#000000"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent — warm earthen tone drawn from architectural photography
  primary: "#9a6a4b"
  accent-soft: "#c9a98f"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d3d3d"
  gray-600: "#5c5c5c"
  gray-400: "#8a8a8a"
  gray-200: "#dcdad6"
  gray-100: "#ebe9e5"
  gray-50: "#f4f2ef"

  # Lines + overlays
  border: "#dcdad6"
  divider: "#ebe9e5"
  overlay-ink: "#2b2622"     # photo caption scrim flattened over imagery

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

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.92px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -1.32px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.44px
  lead:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  link-cta:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.3px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

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

components:
  # Text-link CTA — the dominant call to action (View Project / Read More)
  link-cta:
    textColor: "{colors.ink}"
    typography: "{typography.link-cta}"
    borderColor: "{colors.ink}"
  link-cta-hover:
    textColor: "{colors.primary}"
    typography: "{typography.link-cta}"
    borderColor: "{colors.primary}"

  # Rare filled button — used sparingly (contact / subscribe)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Outline button
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Eyebrow / section label
  eyebrow:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"

  # Project card — image-led, no chrome
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 16px 0px

  # Photo caption pill over imagery
  photo-caption:
    backgroundColor: "{colors.overlay-ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 6px 12px

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
    borderColor: "{colors.divider}"

  # Input (newsletter / contact)
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border}"

  # Divider rule between sections
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
---

# Wam Studio Design System

## Overview

Wam Studio's site is editorial minimalism in service of architecture — a near-white canvas (`{colors.background}`) where large-format building photography does the talking and the interface recedes almost entirely. Charcoal ink (`{colors.ink}`) sits just shy of pure black to keep long reading passages soft, and the only color that ever breaks the monochrome is a single warm earthen accent (`{colors.primary}`) lifted straight from the tonal palette of the project imagery. Nothing on the page competes with the photographs; chrome is reduced to thin hairline rules, generous whitespace, and unadorned text.

Typography is the load-bearing element. Headlines run oversized — up to 64px — in a clean geometric sans with tight negative tracking, giving titles an architectural, drafted weight without resorting to serifs or display faces. The hierarchy is steep: a billboard hero headline, a measured lead paragraph, and small uppercase eyebrows in the warm accent that label sections like plate captions in a monograph. Body copy stays comfortable at 17px with relaxed 1.65 line-height for the firm's narrative-heavy project writeups.

The most distinctive move is the refusal of conventional buttons. Calls to action are text links — "View Project", "Read More" — underlined or rule-bordered, that shift to the earthen accent on hover. Filled buttons appear only at the rare functional moment (contact, subscribe) and even then they are sharp-cornered rectangles, never pills. Corners across the system are square or barely softened; the geometry echoes the precision of architectural plans. The result reads as a print portfolio translated to the web: restrained, photographic, and confident in its emptiness.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with off-black charcoal ink (`{colors.ink}`) — soft, gallery-like contrast
- A single warm earthen accent (`{colors.primary}`) drawn from architectural photography, used only for eyebrows and hover states
- Oversized geometric-sans headlines (up to 64px) with tight negative tracking (-1.92px), no serifs
- Text-link CTAs ("View Project") instead of buttons; filled buttons are rare and sharp-cornered
- Square / near-zero border radius throughout — drafted, precise geometry
- Photography-led layout: imagery carries the page, chrome recedes to hairline rules and whitespace
- Small uppercase eyebrows in the accent color labeling sections like plate captions
- Generous vertical whitespace (`{spacing.3xl}`–`{spacing.4xl}`) between sections

## Colors

### Primary
- **Charcoal Ink** (`{colors.ink}`): Headings, body text, nav. Just off pure black to soften long-form reading.
- **Pure White** (`{colors.background}`): Page and surface background — the gallery canvas.
- **Earthen Accent** (`{colors.primary}`): The lone color, used for eyebrows, links on hover, and small emphasis. Drawn from the warm tones of the photography.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting paragraph copy, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Captions, timestamps, disabled text.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Subtle warm-gray section tint behind content blocks.
- **Accent Soft** (`{colors.accent-soft}`): Lighter wash of the earthen accent for atmospheric fills.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Body secondary.
- **Gray 400** (`{colors.gray-400}`): Muted captions.
- **Gray 200** (`{colors.gray-200}`): Borders, input underlines.
- **Gray 100** (`{colors.gray-100}`): Section dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Lines & Overlays
- **Border** (`{colors.border}`): Hairline borders, input underlines.
- **Divider** (`{colors.divider}`): Thin rules separating sections.
- **Overlay Ink** (`{colors.overlay-ink}`): Dark scrim behind photo captions, flattened over imagery.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — a clean geometric grotesque standing in for the firm's custom marketing sans.
- **Posture**: Sans only. No serif, no monospace. Identity comes from scale and tracking, not face variety.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px billboard hero headline |
| `section-heading` | 44px feature/section titles |
| `sub-heading` | 28px sub-sections, project intros |
| `card-title` | 22px project card titles |
| `lead` | 20px lead/intro paragraphs |
| `body` | 17px standard reading copy |
| `body-small` | 15px supporting text, inputs |
| `nav-link` | 15px navigation + button labels |
| `link-cta` | 15px text-link calls to action |
| `eyebrow` | 13px uppercase section labels, accent color |
| `caption` | 13px photo captions, metadata |

### Principles
- **Scale carries identity**: With one font and no serif, hierarchy is built almost entirely from size jumps and weight (400 / 500 / 600), not typeface contrast.
- **Tight tracking on headlines**: Negative letter-spacing tightens at display sizes (-1.92px at 64px) for a drafted, architectural feel; relaxes to 0 at body sizes.
- **Eyebrows as plate captions**: Small uppercase labels in the earthen accent with wide positive tracking (1.3px) frame sections like a monograph.
- **Relaxed reading rhythm**: 17px body at 1.65 line-height suits the firm's long narrative project writeups.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px. The scale climbs steeply into very large section gaps (`{spacing.3xl}` 96px, `{spacing.4xl}` 140px) — whitespace is a primary design element.

### Grid & Container
- Max content width around 1280px, with full-bleed photography breaking the container edge-to-edge
- Hero: single oversized headline over or beside a large image
- Project index: 2-column image grid, captions below each frame
- Asymmetric editorial blocks pairing one large image with a short text column

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical padding between sections lets each project breathe.
- **Image-led rhythm**: Sections alternate full-bleed photography with quiet text columns — separation comes from imagery and space, not boxes.
- **Hairline separation**: Where rules appear, they are single 1px `{colors.divider}` lines, never heavy borders.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text, most cards |
| Hairline (Level 1) | `1px solid {colors.divider}` | Section dividers, nav bottom |
| Photo scrim (Level 2) | `{colors.overlay-ink}` gradient over imagery | Caption legibility on photos |
| Focus (Accessibility) | `2px solid {colors.ink}` outline | Keyboard focus on links/inputs |

**Shadow Philosophy**: The system is essentially shadow-free. Depth comes from full-bleed photography against whitespace and from thin dividing rules, not from elevation. Cards are flat — no border, no shadow — defined only by the image they hold and the title beneath it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, buttons, images, the default |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Subtle softening where needed |
| `md` | 6px | Maximum corner rounding |
| `pill` | 9999px | Reserved — rarely used |

## Components

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

### Calls to Action
- **`link-cta`** — The dominant CTA: a text link ("View Project", "Read More") with a bottom rule, shifting to `{colors.primary}` on hover. No fill, no pill.
- **`button-primary`** — Rare filled rectangle, ink background, sharp corners. Used only for functional moments (contact, subscribe).
- **`button-outline`** — Sharp-cornered outline button, ink border.

### Labels
- **`eyebrow`** — Uppercase 13px accent-colored section label with wide tracking.

### Cards
- **`card`** — Image-led project card: photo, then title and caption beneath. No border, no shadow, square corners.
- **`photo-caption`** — Caption pill over imagery using the dark overlay scrim.

### Navigation
- **`nav-bar`** — Minimal white top bar, 15px ink links, thin bottom divider.

### Inputs
- **`input`** — Underline-only input (bottom border, no box), square corners, ink text.

### Distinctive Components
- **Full-bleed Photo Hero**: Edge-to-edge architectural image with an oversized headline and an eyebrow label.
- **Project Index Grid**: 2-column image grid where each frame is a flat card with a caption below — no chrome competing with the photo.

## Do's and Don'ts

### Do
- Let large-format photography carry the page; keep chrome minimal
- Use text-link CTAs ("View Project") as the default, not filled buttons
- Keep corners square (`{rounded.none}`) — the geometry should feel drafted
- Use the earthen accent (`{colors.primary}`) sparingly — eyebrows and hover only
- Build hierarchy from scale and weight, not from new typefaces
- Apply tight negative tracking on display headlines, relaxing to 0 at body
- Separate sections with whitespace and 1px hairline rules

### Don't
- Don't add shadows or elevation — the system is flat
- Don't use pill-shaped or heavily-rounded buttons
- Don't introduce a second typeface or a serif
- Don't let the accent color spread into body chrome
- Don't box project cards with borders — the image is the frame
- Don't crowd sections; whitespace is the design
- Don't use positive tracking on display headlines

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked images, reduced headline scale |
| Tablet | 600–1024px | 2-column grids begin, expanded padding |
| Desktop | 1024–1280px | Full editorial layout |
| Large Desktop | >1280px | Centered container, full-bleed imagery, generous margins |

### Touch Targets
- Nav links and text-link CTAs carry comfortable spacing for tap
- Underline inputs maintain adequate vertical padding
- Filled buttons use 14px / 28px padding

### Collapsing Strategy
- Hero headline: 64px → scales down, keeps proportional negative tracking
- Navigation: horizontal links → hamburger menu
- Project grid: 2-column → single column stacked
- Section spacing: 140px → ~64px on mobile
- Full-bleed images: maintain edge-to-edge treatment at all sizes

### Image Behavior
- Architectural photography stays edge-to-edge and uncropped where possible
- Responsive WebP delivery via CDN
- Captions reflow beneath images on narrow screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}`
- Heading + body text: Charcoal Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (eyebrows, hover): Earthen `{colors.primary}`
- Divider: `1px solid {colors.divider}`
- Focus ring: `2px solid {colors.ink}`

### Example Component Prompts
- "Create a photo hero: full-bleed architectural image, oversized headline at 64px Inter weight 600, line-height 1.05, letter-spacing -1.92px, color `{colors.ink}`. Above it, an uppercase eyebrow at 13px weight 600, letter-spacing 1.3px, color `{colors.primary}`."
- "Design a project card: image on top (square corners, no border), title beneath at 22px Inter weight 500, caption at 13px `{colors.ink-muted}`. No shadow."
- "Build a text-link CTA: 'View Project', 15px Inter weight 500, `{colors.ink}` with a bottom rule, shifting to `{colors.primary}` on hover. No fill, no pill."
- "Create navigation: white top bar, 15px Inter weight 500 ink links, thin `{colors.divider}` bottom border, 20px / 40px padding."

### Iteration Guide
1. Photography first — the interface should recede behind imagery
2. Square corners everywhere; pills and heavy rounding are off-system
3. One accent only (`{colors.primary}`), reserved for eyebrows and hover
4. Hierarchy comes from scale + weight, never a new typeface
5. CTAs are text links by default; filled buttons are the exception
6. Whitespace and hairline rules separate sections — no shadows, no boxes

---

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