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

# Charlie Phipps · Design System

> Oversized type meets immersive project imagery

**Theme:** light · **Industry:** portfolio · **Source:** https://phippscharlie.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 designer portfolio pairs oversized typography and spacious project storytelling with immersive photography. A near-monochrome interface keeps attention on the work, while the opening hero uses a full-bleed image beneath fine white navigation and copy.

## North star

Keep the interface quiet and spacious so oversized type and project photography carry the visual impact.

## Overview

The portfolio uses a restrained near-monochrome interface to let project imagery supply most of the visual colour. The opening hero places fine white navigation and copy over a full-bleed photograph, with an oversized Helvetica Neue title extending beyond the viewport. Elsewhere, white content sections use black, regular-weight typography, generous empty space and left-aligned project descriptions. Small metadata labels sit apart from the larger narrative copy, making each case study easy to scan without adding boxes or decorative UI. Project images appear as broad, standalone bands between text sections; their own palettes belong to the featured work rather than the site chrome. Black and charcoal surfaces occur in the opening and project sequence, while image panels may sit against a pale grey band. The layout is deliberately sparse: typography and photography provide hierarchy, and transitions rely on whitespace rather than borders, cards, or shadows. Large email and social links form a typographic closing gesture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main background for the case-study text sections and closing contact area. |
| Soft Ink | `#020202` | `--color-soft-ink` | semantic | Near-black heading and link text, including prominent display typography. |
| Night Charcoal | `#101011` | `--color-night-charcoal` | surface | Measured dark canvas for the opening and project sequence; also used in inverse link contexts. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Black text on light sections, including large email links and project descriptions. |
| Mist Grey | `#ededed` | `--color-mist-grey` | surface | Pale grey band behind project imagery; a supporting image-stage surface. |
| Pale Type | `#e8e8e8` | `--color-pale-type` | neutral | Low-frequency text colour in measured data; not a defining page surface. |
| Quiet Grey | `#888888` | `--color-quiet-grey` | neutral | Subtle link text, secondary to the black typography and project content. |
| Muted Graphite | `#8e8e8e` | `--color-muted-graphite` | neutral | Occasional muted link and text colour, used for secondary information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#101011` (Night Charcoal) · `--color-surface-2` → `#ededed` (Mist Grey) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#020202` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#101011` | 1.1:1 | fail |
| `#000000` | `#ededed` | 17.94:1 | AAA |
| `#020202` | `#ffffff` | 20.75:1 | AAA |
| `#020202` | `#101011` | 1.09:1 | fail |
| `#020202` | `#ededed` | 17.72:1 | AAA |
| `#ffffff` | `#101011` | 19.02:1 | AAA |
| `#ffffff` | `#ededed` | 1.17:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | system | 400 | Display titles, project headings, descriptions, metadata, and links throughout the portfolio. | Inter |

- **Helvetica Neue:** Regular weight throughout; oversized display text uses tight negative tracking, while labels remain small and understated.

### Type scale — Custom (ratio ≈ 2.12, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 162px | 400 | 0.9 | -0.012em | — | Helvetica Neue | Oversized opening title layered over the hero photograph. |
| h1 | 155px | 400 | 1 | -0.01em | — | Helvetica Neue | Primary portfolio and project narrative headings. |
| h2 | 63.5px | 400 | 1 | -0.024em | — | Helvetica Neue | Section and project titles, including prominent supporting headings. |
| body | 17px | 400 | 1.2 | -0.012em | — | Helvetica Neue | Project descriptions and the introductory designer statement. |
| caption | 15.5px | 400 | 1 | -0.013em | — | Helvetica Neue | Small project metadata, roles, navigation, and footer details. |
| link | 155px | 400 | 1 | -0.01em | — | Helvetica Neue | Oversized email call-to-action and prominent text links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 6, 8, 9, 10, 13, 15, 26 px.
- Section rhythm 39px · element gap — · card padding — · max content width 1388px.

The measured content max width is 1388px, with a comfortable, open density and a measured section gap of 39px. Use a single-column full-bleed hero, followed by broad white content regions that arrange small project metadata beside larger left-aligned descriptions. Project imagery spans wide horizontal bands between text blocks. The page alternates spacious narrative areas and image-led pauses; avoid enclosing content in cards. The footer returns to large typographic links and a fine, low-key information row.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat, with no measured shadows or radius scale. Separate text and image sections through whitespace and changes between white, charcoal, and pale grey backgrounds rather than card borders. Any depth comes from the photography and its depicted screens or physical settings, not interface elevation.

## Imagery

Photography is the dominant visual material: full-bleed hero imagery and wide project photographs show digital work in real-world contexts. Keep images large and rectangular, with minimal framing and no decorative treatment. The photography may carry strong colours, but those tones belong to individual projects, not the persistent interface palette. The measured project area also includes mockups within the imagery.

## Components

### Overlay navigation

Small white links sit over the full-bleed hero photograph, contrasting with the extremely large title below.

### Hero title

Oversized, regular Helvetica Neue display lettering stretches across the hero and can extend beyond the viewport edge.

### Project metadata

Small uppercase project number, client, year, and role labels sit apart from the main description.

### Project narrative

Large regular-weight black text is left aligned in open white sections, with a simple arrow link following the copy.

### Project image band

Broad standalone project photographs divide text sections; a pale grey band can provide a quiet backdrop.

### Contact links

Email and social links appear as oversized black typography in the closing section.

### Footer information

A compact row of portfolio, work, and date details closes the page with restrained text and a subtle dividing line.

### Measured component styles

- **Link** (“EMAIL”): transparent background · text #000000 · radius 0px · padding 0px 0px 15.5px 0px · 400 154.8px Helvetica Neue

## Do

- Use Helvetica Neue or a close neutral sans-serif substitute.
- Keep the interface near-monochrome outside project photography.
- Let the hero title extend broadly across the image.
- Separate project metadata from the larger narrative copy.
- Use open white sections and generous visual pauses.
- Present project images as broad, unframed bands.

## Don't

- Do not add gradients, shadows, or decorative card treatments.
- Do not turn project photography into small thumbnails.
- Do not introduce a persistent bright accent colour.
- Do not make metadata compete with the project narrative.
- Do not compress the sections into a dense grid.
- Do not mistake colours inside project imagery for interface colours.

## Agent prompt

Build a designer portfolio page with a quiet editorial feel. Use Gallery White (#ffffff) for open content areas, Night Charcoal (#101011) for dark sections, and Soft Ink (#020202) or Pure Ink (#000000) for typography. Reserve Mist Grey (#ededed) for a restrained image-stage band; the other measured greys should remain subtle secondary text. Use regular-weight Helvetica Neue, or Inter as a free substitute, with tight tracking for oversized titles and small understated metadata. Start with a full-bleed photograph and fine overlaid navigation. Arrange each case study with separated labels, a large left-aligned description, a simple arrow link, and a broad project image. Keep spacing generous, layouts flat, and transitions driven by whitespace. Use vivid colour only when it comes from the featured project imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed image with overlay navigation, oversized title, introduction, and edge-anchored links. | Overlay navigation, Scroll cue, Social and email links | White text over photography, Oversized title, Transparent image-led canvas |
| 2 | other | Open section with small section label beside a large, left-aligned heading and introduction. | Section introduction, Project overview | White canvas, Black typography, Generous whitespace |
| 3 | feature-split | Project labels and roles sit beside a large narrative block with an arrow link. | Case-study summary, Project link | White background, Small metadata, Large black copy |
| 4 | product-showcase | Broad project-image band set apart from surrounding text. | Visual project proof | Pale grey image stage, Centered project mockup |
| 5 | feature-split | Open project section with separated metadata and a large narrative paragraph. | Case-study summary, Project identification | White canvas, Large black text, Small role labels |
| 6 | product-showcase | Large horizontal project photograph with substantial surrounding whitespace. | Visual project proof | Wide photography, Unframed image |
| 7 | feature-split | Project metadata accompanies a large left-aligned narrative and simple arrow link. | Case-study summary, Project link | White background, Large black text, Compact labels |
| 8 | product-showcase | Wide image band presenting the featured digital experience. | Visual project proof | Project photography, Unframed wide image |
| 9 | feature-split | Separated project and role labels sit beside a large narrative block and arrow link. | Case-study summary, Project link | White canvas, Large black text, Compact metadata |
| 10 | product-showcase | Full-width campaign photograph as a standalone horizontal band. | Visual project proof | Wide photography, Image-led composition |
| 11 | contact | Open closing area with small contact notes, oversized email and social links, then a compact footer row. | Email contact, Social links, Portfolio information | White canvas, Oversized black links, Subtle footer divider |

## Source CSS custom properties (selected)

```css
--following-animation-duration: 450ms;
```

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