---
title: "Pam design system"
variant: extended
source: https://thisispam.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/thisispam-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Pam · Design System

> Editorial restraint, vivid brand work

**Theme:** light · **Industry:** agency · **Source:** https://thisispam.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Pam’s homepage pairs a clean white canvas and tightly set black headlines with a curated stream of commerce and brand imagery. Pale yellow and deep brown distinguish the client directory and footer, while restrained typography and generous whitespace keep the work in focus.

## North star

Keep the interface flat and spacious, using condensed uppercase headlines and carefully chosen project imagery to make the work—not decoration—the focus.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, leaving the first screen bright and uncluttered so project imagery and oversized headlines command attention. Ink (#000000) supplies the headline, navigation, and link contrast. Soft Butter (#fff3b8) appears as a full-width clients band and as light text against the footer; Dark Roast (#1b1512) anchors the closing section. Typography contrasts compact, uppercase TeX Gyre Heros Cn headings with the more literary TeX Gyre Termes used for copy and navigation. The hero moves from a three-image row into a large two-line studio statement and a dotted divider, then into concise explanatory copy. Selected project imagery is arranged in broad tiles, with little decorative framing. Spacious section breaks give way to a dense client list, then a dark footer with pale lettering and contact details. The overall effect is editorial and portfolio-led, not a conventional boxed agency template.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and open space around the introduction, studio copy, and project previews. |
| Ink | `#000000` | `--color-ink` | neutral | Primary headline, menu mark, navigation, and project-link color on light backgrounds. |
| Soft Butter | `#fff3b8` | `--color-soft-butter` | brand | Clients section band and pale footer text; it also appears in the footer mark. |
| Dark Roast | `#1b1512` | `--color-dark-roast` | surface | Solid footer background, providing a warm dark close beneath the pale clients band. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1b1512` (Dark Roast) · `--color-surface-2` → `#fff3b8` (Soft Butter) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#fff3b8` (Soft Butter)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1b1512` | 1.16:1 | fail |
| `#000000` | `#fff3b8` | 18.76:1 | AAA |
| `#fff3b8` | `#ffffff` | 1.12:1 | fail |
| `#fff3b8` | `#1b1512` | 16.14:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TeX Gyre Termes | `--font-body` | webfont | 400, 500 | Body copy, project details, and understated navigation. | Libre Baskerville |
| TeX Gyre Heros Cn | `--font-display` | webfont | 700, 800, 400 | Large headings, section titles, captions, and prominent actions. | Roboto Condensed |

- **TeX Gyre Termes:** Regular and medium weights; sentence case copy and navigation contrast with condensed display headlines.
- **TeX Gyre Heros Cn:** Heavy weights, uppercase display treatment, tight tracking, and compact line-height.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 0.9 | -0.02em | uppercase | TeX Gyre Heros Cn | Large uppercase studio identity headline. |
| h2 | 32px | 700 | 0.9 | -0.02em | uppercase | TeX Gyre Heros Cn | Uppercase section-level headings. |
| h3 | 20px | 800 | 1.1 | -0.02em | uppercase | TeX Gyre Heros Cn | Compact uppercase tertiary headings. |
| body | 14px | 500 | 1.5 | 0 | — | TeX Gyre Termes | Editorial service description and supporting copy. |
| caption | 11px | 700 | 0.9 | -0.02em | uppercase | TeX Gyre Heros Cn | Small uppercase labels and project metadata. |
| button | 20px | 800 | 1.1 | -0.02em | uppercase | TeX Gyre Heros Cn | Strong uppercase contact action. |
| nav | 14px | 400 | 2 | 0 | — | TeX Gyre Termes | Quiet serif navigation and utility links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 14, 20, 24, 96 px.
- Section rhythm 96px · element gap 12px · card padding — · max content width 1392px.

A spacious, wide desktop composition uses a measured page max width of 1392px and a four-pixel-based spacing scale. The top starts with a compact header and a three-column media row, followed by a large left-aligned headline. Short labels spread across the width above a dotted divider; supporting copy sits in two columns. Portfolio tiles and full-width selected-project imagery create a change of pace before the full-width clients and footer bands. Section gaps are generous, while the client directory itself is dense.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat: measured data reports no shadows or gradients, and the components have no rounded treatment. Use whitespace, full-width color bands, image blocks, and fine dotted separators to establish hierarchy. Keep image previews in clean rectangular frames; avoid card-like elevation or unnecessary borders.

## Imagery

The page relies on real brand and commerce photography, interface previews, and short video in the opening media row. Images are presented as broad rectangular tiles with minimal surrounding chrome; selected projects use large edge-to-edge visual panels. Apparel, product, and website imagery bring varied color and texture, while the page’s own interface stays neutral. Treat the imagery as portfolio content, not as a source for additional interface colors.

## Components

### Compact header

Small black Pam wordmark at the left and a simple two-line menu mark on the white canvas.

### Hero media row

Three adjacent rectangular image or video previews introduce client commerce work before the studio headline.

### Studio headline

Large, heavy, uppercase condensed display type, left aligned and broken into a compact two-line statement.

### Dotted divider

Fine black dotted horizontal rule separating a row of short serif labels from the explanatory copy.

### Selected projects

Large image-led portfolio tiles with restrained serif labels and compact project metadata.

### Client directory

Full-width Soft Butter (#fff3b8) band with an uppercase heading and dense, multi-column client names and links.

### Contact footer

Dark Roast (#1b1512) closing band with pale text, a prominent condensed statement, contact details, utility links, and brand mark.

### Measured component styles

- **Primary button** (“CONTACT”): transparent background · text #000000 · radius 0px · padding 0px · 800 20px TeX Gyre Heros Cn · uppercase
- **Link** (“Goodmoods Éditions DÉCOUVRIR”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px TeX Gyre Termes
- **Navigation item** (“Agence Shopify”): transparent background · text #fff3b8 · radius 0px · padding 0px · 400 14px TeX Gyre Termes

## Do

- Use Gallery White (#ffffff) as the primary canvas.
- Set display statements in bold, condensed uppercase type.
- Let the project photography carry most visual variety.
- Use Soft Butter (#fff3b8) for the client band and pale footer accents.
- Reserve Dark Roast (#1b1512) for a strong closing footer surface.
- Separate editorial rows with fine dotted rules and open space.

## Don't

- Do not introduce unmeasured interface colors.
- Do not add gradients, shadows, or rounded card styling.
- Do not crowd the hero headline with extra interface elements.
- Do not turn project imagery into decorative thumbnails with heavy frames.
- Do not use display typography for long body paragraphs.
- Do not make the client list as visually dominant as the portfolio.

## Agent prompt

Build a new page in Pam’s editorial agency style. Use Gallery White (#ffffff) for the main canvas and Ink (#000000) for headline, navigation, and links. Set display headings in a bold condensed sans, uppercase and tightly tracked; use a literary serif for body copy, project notes, and quiet navigation. Compose broad image-led project panels with clean rectangular edges and generous whitespace, using the photography—not decorative UI—as the source of visual variety. Add fine dotted dividers where editorial rows need structure. Use Soft Butter (#fff3b8) as a purposeful full-width highlight band and Dark Roast (#1b1512) for a grounded footer with pale text and clear contact details. Keep the layout flat: no shadows, gradients, rounded cards, or invented palette colors. Balance open, spacious sections with a compact, legible directory or metadata area.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact header above a row of three rectangular media previews. | Brand mark, Menu toggle, Portfolio preview | White canvas, Rectangular imagery, Minimal header |
| 2 | hero | Left-aligned uppercase headline with compact service labels below. | Immediate positioning, Service overview | Condensed display type, Serif labels, Dotted divider |
| 3 | feature-split | Two-column introduction followed by a small grid of project imagery. | Agency introduction, Project discovery | Editorial copy, Image-led previews, Sparse labels |
| 4 | gallery | Broad portfolio panels arranged in a two-column sequence. | Browse selected work, Project metadata | Large image panels, Minimal captions, Edge-to-edge crops |
| 5 | logo-cloud | Full-width pale yellow band with a heading and dense multi-column names. | Client discovery, Text-link directory | Soft Butter band, Condensed heading, Serif client list |
| 6 | footer | Full-width dark footer with a statement, contact details, utility links, and branding. | Email contact, Telephone contact, Utility navigation | Dark Roast surface, Pale text, Dotted separator, Brand mark |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thisispam-com