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

# Katherine Pihl · Design System

> Quiet typography, vivid client work

**Theme:** light · **Industry:** portfolio · **Source:** https://www.katherinepihl.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._

A restrained portfolio presents branding and web design projects through a clean white canvas, compact navigation, and an image-led project grid. Refined typography and a concise studio introduction let varied client imagery provide the page’s color and character.

## North star

Keep the interface quiet and neutral so the client work—not the portfolio chrome—carries the color and visual drama.

## Overview

The page uses white as an uninterrupted canvas, with black for navigation, headings, and primary text; muted grays soften secondary labels and project descriptors. The brand palette stays deliberately neutral, while colorful client imagery supplies most of the visual variety—those image colors belong to individual projects, not the site chrome. Neue Montreal provides a clean, practical sans-serif for uppercase navigation, filters, and compact metadata. Ryhmes adds an elegant, light serif voice to larger project links and the closing studio introduction. A three-column portfolio grid dominates the page, with consistent image-led cards and restrained captions. Generous open space above the work creates a calm entrance, while compact gaps within the grid keep the portfolio cohesive. Thin black rules separate the closing information area; the overall treatment is flat, with no measured shadows, gradients, or decorative card surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | The uninterrupted page canvas behind the portfolio grid, navigation, and closing studio information. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary navigation, headings, project names, body copy, and the thin divider above the closing section. |
| Soft Graphite | `#999999` | `--color-soft-graphite` | neutral | Muted project-category labels and secondary text, including filter options and card descriptors. |
| Pale Graphite | `#b2b2b2` | `--color-pale-graphite` | neutral | Light secondary text detected in small amounts; use only for subdued supporting copy, not prominent labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#999999` (Soft Graphite) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 500, 300, 400 | Navigation, filters, project metadata, and body copy. | Inter |
| Ryhmes | `--font-display` | webfont | 300 | Large project links and the closing studio introduction. | Cormorant Garamond |

- **Neue Montreal:** Light body copy; medium uppercase navigation and eyebrow labels use widely tracked lettering. Keep the overall sans-serif voice clean and compact.
- **Ryhmes:** Light serif with a refined editorial feel; larger text uses tight negative tracking and a restrained line height.

### Type scale — Custom (ratio ≈ 2, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 300 | 1.1 | -0.03em | — | Ryhmes | Large light serif project titles and prominent editorial headings. |
| body | 16px | 300 | 1.5 | 0.02em | — | Neue Montreal | Studio description, contact copy, and supporting page text. |
| nav | 16px | 500 | 1.2 | 0.07em | uppercase | Neue Montreal | Uppercase name at left and contact link at right. |
| link | 32px | 300 | 1.1 | -0.03em | — | Ryhmes | Large serif studio links and prominent project links. |
| eyebrow | 16px | 500 | 1.2 | 0.07em | uppercase | Neue Montreal | Uppercase labels such as filter and section identifiers. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 24, 40, 120 px.
- Section rhythm 40px · element gap 4px · card padding — · max content width —.

A compact header anchors the page, followed by a broad three-column project grid with left-aligned captions. The first viewport leaves substantial white space between navigation and the filter row; thereafter, image cards form a dense, consistent rhythm. The final information section breaks from the grid into three columns, with a serif introduction alongside services and collaborator lists. Keep edges and alignments crisp; no measured maximum page width is available.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The measured design is flat: no shadows, gradients, or rounded card treatments are present. Images sit directly on the white canvas, with captions beneath rather than in raised containers. A thin black horizontal rule separates the closing information area from the portfolio above.

## Imagery

Project imagery is the main source of color: skincare packaging, interiors, outdoor scenes, brand graphics, and website mockups appear as varied client work. Use large rectangular image frames with minimal visible treatment and preserve each asset’s original palette. The imagery mixes photography, graphic identity applications, and screen captures; it is not unified by a site-wide filter.

## Components

### Top navigation

White-background header with uppercase, medium-weight Katherine Pihl at left and a contact link at right; typography uses Neue Montreal.

### Category filters

Compact All, Branding, and Web Design labels above the grid; the active filter is black and inactive labels are muted gray.

### Project card

Image-led portfolio item with a rectangular visual and a short caption underneath; project title is darker than its muted category label.

### Project grid

Three-column, left-aligned arrangement of client work, maintaining consistent gutters and a compact vertical rhythm.

### Studio introduction

Large light serif paragraph describing the designer and inviting contact, placed at the left of the closing information block.

### Services and collaborators

Small sans-serif lists in adjacent columns, with concise headings and tightly set entries.

### Footer links

Minimal bottom row with Instagram at left and the email address at right, set directly on white.

### Measured component styles

- **Link** (“Skinfix”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Neue Montreal
- **Navigation item** (“KATHERINE PIHL”): transparent background · text #000000 · radius 0px · padding 16px 0px · 500 16px Neue Montreal · uppercase

## Do

- Keep the interface canvas white and visually quiet.
- Use black for primary text and gray for secondary labels.
- Let project imagery supply most of the page’s color.
- Use a clear sans-serif for navigation and compact metadata.
- Reserve the light serif for expressive editorial moments.
- Align project images and captions in a disciplined grid.

## Don't

- Do not add brand-colored CTA fills or decorative gradients.
- Do not place project captions inside raised cards.
- Do not apply one color filter across varied client imagery.
- Do not introduce rounded corners or shadows without evidence.
- Do not make navigation larger or louder than the work.
- Do not crowd the opening area with extra promotional copy.

## Agent prompt

Build a new portfolio page in Katherine Pihl’s restrained visual style. Use Gallery White (#ffffff) as the canvas and Studio Ink (#000000) for primary text, navigation, and fine dividers; use Soft Graphite (#999999) and, sparingly, Pale Graphite (#b2b2b2) for secondary labels. Pair a clean, widely tracked sans-serif similar to Inter for navigation, filters, metadata, and body copy with a light editorial serif similar to Cormorant Garamond for prominent project links and studio introduction. Create a compact header, understated category filters, and a disciplined three-column image-led project grid with captions below each image. Keep client assets in their native colors. End with a thin-rule-separated studio introduction and concise service, collaborator, and contact details. Avoid shadows, gradients, rounded cards, and decorative color fills.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Portfolio grid with category filters and three project columns; image-first cards have left-aligned captions beneath. | Filter by discipline, Browse linked projects | Minimal filter labels, Image-led cards, Compact project captions |
| 2 | footer | Three-column closing block: serif studio introduction at left, services and collaborator lists alongside; contact links sit at the bottom. | Contact invitation, Service and collaborator discovery | Thin horizontal divider, Editorial serif copy, Compact sans-serif lists |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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