---
version: alpha
name: This is Pam
description: Boutique Shopify studio minimalism — a warm off-white canvas, near-black ink, and a single restrained accent, with a large editorial sans for headlines and generous gallery whitespace that lets fashion-grade project imagery carry the page.
colors:
  # Canvas + ink
  background: "#f6f4f0"
  surface: "#ffffff"
  surface-soft: "#efece6"
  ink: "#161413"
  ink-secondary: "#5c5751"
  ink-muted: "#8c867d"

  # Accent
  primary: "#161413"
  accent: "#c8553d"
  on-primary: "#f6f4f0"
  on-accent: "#ffffff"

  # Neutral scale
  neutral-900: "#161413"
  neutral-700: "#3a3631"
  neutral-500: "#76706a"
  neutral-300: "#cbc6bd"
  neutral-200: "#dedad2"
  neutral-100: "#ebe8e2"

  # Lines + states
  border: "#dcd8d0"
  border-strong: "#161413"
  link: "#161413"
  focus: "#c8553d"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -2px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, 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: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  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-strong}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# This is Pam Design System

## Overview

This is Pam is a boutique Shopify studio out of Toulouse, and its website reads exactly like the work it sells: precise, editorial, and quietly luxurious. The canvas is a warm off-white (`{colors.background}`) rather than clinical white, the kind of paper-toned ground that flatters fashion and lifestyle photography. Near-black ink (`{colors.ink}`) carries the text, and a single warm terracotta accent (`{colors.accent}`) appears sparingly. The result is a gallery, not a dashboard. Imagery is the loud element; the chrome stays whisper-quiet.

The typographic move is a serif/sans split. Headlines use a high-contrast editorial serif (Fraunces) at very large sizes with tight negative tracking, giving the page a magazine masthead feel. Body and UI text shift to a clean neutral sans (Inter) for clarity and reading comfort. This pairing is the whole personality: the serif says fashion-editorial, the sans says modern-commerce. Together they signal a studio that lives at the intersection of design and Shopify engineering.

Layout leans on generous whitespace and a calm grid. Project work is presented in large image cards with minimal captioning, and sections are separated by air rather than heavy rules. Where lines exist they are hairline and warm-gray (`{colors.border}`), never harsh. Buttons are full pills in solid ink that warm to terracotta on hover, the one place the accent earns its keep.

**Key Characteristics:**
- Warm paper-toned canvas (`{colors.background}`) instead of pure white — flatters portfolio imagery
- Editorial serif (Fraunces) headlines at 44–72px with tight negative tracking
- Clean neutral sans (Inter) for all body and UI text
- A single restrained terracotta accent (`{colors.accent}`) used for hover and focus only
- Pill buttons in solid near-black ink that warm to accent on hover
- Hairline warm-gray borders; separation by whitespace, not heavy rules
- Uppercase tracked-out micro labels (`{typography.label-mono}`) for eyebrows and metadata
- Imagery-forward, gallery-like restraint throughout

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, button fills. A warm near-black, not pure black.
- **Paper** (`{colors.background}`): Page canvas. Warm off-white that reads as premium paper.
- **Surface** (`{colors.surface}`): Pure white for cards and inputs that need to lift off the paper ground.

### Accent
- **Terracotta** (`{colors.accent}`): The single brand accent — button hover, focus ring, occasional emphasis. Used sparingly.

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

### Neutral Scale
- **Neutral 900** (`{colors.neutral-900}`): Strongest text, equals ink.
- **Neutral 500** (`{colors.neutral-500}`): Tertiary text.
- **Neutral 200** (`{colors.neutral-200}`): Fills, soft dividers.
- **Neutral 100** (`{colors.neutral-100}`): Faint surface tints.

### Lines & States
- **Border** (`{colors.border}`): Hairline warm-gray dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Secondary button outline, ink-weight rules.
- **Focus** (`{colors.focus}`): Terracotta focus ring on interactive elements.

## Typography

### Font Family
- **Display/Headings**: `Fraunces`, with fallbacks: `Georgia, serif` — high-contrast editorial serif.
- **Body/UI**: `Inter`, with fallbacks: `Arial, sans-serif` — neutral, legible grotesque.

### 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` | 72px serif hero — masthead impact |
| `section-heading` | 44px serif section titles |
| `card-title` | Project and card headings (sans) |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Secondary UI text, form fields |
| `button-ui` | Buttons, nav links |
| `label-mono` | Uppercase tracked eyebrows, metadata |
| `caption` | Image captions, fine print |

### Principles
- **Serif announces, sans explains**: Fraunces carries every headline; Inter carries every line you actually read.
- **Tight display tracking**: Headlines run -1px to -2px letter-spacing for an editorial, set-by-hand feel.
- **Tracked-out micro labels**: Eyebrows and metadata use +1.5px tracking in uppercase 12px sans.
- **Restraint in weight**: Inter sits at 400–500; the serif stays at 400. Drama comes from scale, not bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening up to large gallery gaps (`{spacing.3xl}`–`{spacing.4xl}`) between major sections.

### Grid & Container
- Max content width ~1280px, centered with generous side margins
- Hero: large serif headline over abundant top padding
- Work: large image cards in 1–2 column rhythm, minimal captioning
- Contact: simple stacked form on white surface against the paper ground

### Whitespace Philosophy
- **Gallery emptiness**: Sections breathe with `{spacing.3xl}`+ vertical gaps. Air is the primary separator.
- **Imagery leads**: Photography is the loud element; chrome recedes to hairlines and near-black text.
- **Calm rhythm**: No competing accents — one terracotta note, used only on interaction.

## Components

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

### Buttons
- **`button-primary`** — Solid ink pill, paper-toned text, warms to terracotta on hover.
- **`button-secondary`** — Paper background with a strong ink hairline outline, pill radius.

### Pills & Badges
- **`badge`** — Soft surface tint with tracked uppercase micro label, full pill.

### Cards
- **`card`** — White surface lifting off the paper ground, `{rounded.lg}`, hairline border.
- **`card-project`** — Image-forward project card, soft tint base, minimal chrome.

### Inputs
- **`input`** — White surface, hairline border, terracotta focus ring.

### Navigation
- **`nav-bar`** — Paper background, ink links in Inter 500, hairline bottom border, dark pill CTA right.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white, as the default ground
- Pair Fraunces headlines with Inter body — keep the serif/sans split strict
- Reserve terracotta (`{colors.accent}`) for hover and focus, almost nowhere else
- Let imagery dominate; keep chrome to hairlines and near-black text
- Use large scale, not bold weight, for headline drama
- Track out uppercase micro labels for eyebrows and metadata

### Don't
- Don't introduce a second accent color — terracotta is the only brand note
- Don't set headlines in the sans — the serif IS the identity
- Don't use heavy rules or boxed borders; separation is whitespace and hairlines
- Don't fill primary buttons with the accent at rest — accent is a hover state
- Don't use pure white as the page background — it kills the warmth
- Don't tighten body tracking; only display sizes carry negative tracking

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales to ~40px serif, stacked work |
| Tablet | 600–1024px | 2-column work grid begins, expanded padding |
| Desktop | 1024–1280px | Full layout, maximum content width |
| Large | >1280px | Centered with generous margins |

### Collapsing Strategy
- Hero serif: 72px → ~40px, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Work cards: 2-column → single column, full-bleed imagery
- Section spacing: 96px+ → ~56px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Ink pill `{colors.primary}`, hover Terracotta `{colors.accent}`
- Border: Hairline `{colors.border}`
- Focus ring: Terracotta `{colors.focus}`

### Example Component Prompts
- "Create a hero on warm paper (`{colors.background}`). Headline in Fraunces 72px weight 400, line-height 1.02, letter-spacing -2px, color `{colors.ink}`. Lead paragraph in Inter 20px `{colors.ink-secondary}`. Solid ink pill CTA that warms to terracotta on hover."
- "Design a project card: white surface, `{rounded.lg}`, hairline `{colors.border}`, image-forward with a tracked uppercase eyebrow (`{typography.label-mono}`) and a Fraunces title."
- "Build a contact form: white inputs, hairline border, terracotta focus ring `{colors.focus}`, Inter 15px text, 4px radius."

### Iteration Guide
1. Paper canvas first — warmth is the foundation
2. Serif headlines, sans body — never blur the split
3. One accent, hover-only — terracotta never appears at rest on fills
4. Scale over weight for drama
5. Hairlines and air, never heavy 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 This is Pam. Brand names and trademarks belong to their respective owners.