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

# Ben Powell · Design System

> Quiet monochrome, led by confident type and open space.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.bpowell.co/ · **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 that foregrounds selected design and film projects through large, dark typography on a white canvas. Compact top-line details and a contrasting contact footer keep the experience personal and direct.

## North star

Let oversized, tightly tracked project typography and expansive white space carry the identity; keep every other element quiet.

## Overview

The visual identity is built from a strict two-colour palette: white (#ffffff) carries nearly the entire page, while near-black (#111111) supplies the text and the final contact band. There are no decorative gradients, shadows, or rounded cards; contrast and typography do the work. A compact header distributes the designer’s name, role, email, and availability across the width. Below it, project names form a prominent, left-aligned text list with generous surrounding whitespace. Design and film are separated into successive sections rather than boxed into cards. The measured layout uses a two-column structure for the project areas and a three-column services area, within a 1360px maximum page width. Diatype handles supporting text and links, while Teg gives the display and heading styles their characteristic scale and tight tracking. Media exists in the project content, but the page’s defining impression is its quiet, text-led presentation. A black contact footer closes the otherwise white page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas and background for the navigation, project lists, and services content. |
| Ink Black | `#111111` | `--color-ink-black` | neutral | Primary text and links on the white page; fills the contrasting contact footer. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#111111` (Ink Black) · `--color-text` → `#111111` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype | `--font-body` | webfont | 500 | Supporting body copy and project links | Inter |
| Teg | `--font-display` | webfont | 500 | Display and main headings, especially the prominent project-name list | Manrope |

- **Diatype:** Measured at weight 500; links and supporting text are clean sans-serif with no measured tracking.
- **Teg:** Measured at weight 500; large display text uses tight negative tracking and compact line height.

### Type scale — Custom (ratio ≈ 1.824, base 26px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86.5px | 500 | 1.05 | -0.033em | — | Teg | Oversized project names and dominant portfolio display text. |
| h1 | 57.5px | 500 | 1.04 | -0.017em | — | Teg | Major heading treatment, including the prominent contact email. |
| body | 26px | 500 | 1.15 | 0 | — | Diatype | Supporting descriptions and compact header information. |
| link | 26px | 500 | 1.05 | 0 | — | Diatype | Text links in project lists and contact details. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 8, 16, 24, 32, 40, 50, 54, 56, 101, 104, 108 px.
- Section rhythm 54px · element gap — · card padding — · max content width 1360px.

Use a broad page canvas capped at the measured 1360px maximum width. The header spreads four short identity and availability details across the top. Project sections use a two-column structure, with category labels and large text lists aligned to a consistent content area; services shift to three columns. Keep density comfortable and preserve long open intervals between content groups. The measured section rhythm is 54px, with a larger amount of whitespace apparent around the project lists. End with a full-width inverse contact section.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is flat: measured data reports no shadows, gradients, or radius scale. Avoid raised cards and layered surfaces. Sections are distinguished by whitespace and typography, with the #111111 contact band providing the clear contrast at the bottom; borders are not a prominent visual device.

## Imagery

Project sections contain image assets, but the supplied views make the text-led composition the defining feature. Treat project imagery as supporting work previews rather than decorative background: keep it associated with its project, preserve its natural visual character, and avoid adding gradients, illustration, or 3D embellishment. The screenshot does not establish a specific image treatment, framing style, or video behavior, so do not impose one.

## Components

### Top identity row

A single horizontal line of four concise details: name, professional role, email, and availability, spaced across the white canvas.

### Project category list

A small category label sits above a large, tightly set list of project-name links; design and film appear in separate sections.

### Services list

A three-column content section listing capabilities and selected clients without card containers.

### Contact footer

A full-width #111111 closing band with a prominent projects email and smaller supporting footer details.

### Measured component styles

- **Link** (“January”): transparent background · text #ffffff · radius 0px · padding 0px · 600 26px Beatricedisplay

## Do

- Use #ffffff as the dominant canvas.
- Set primary text in #111111.
- Make project names the strongest typographic element.
- Keep project links as plain text rather than buttons.
- Separate content groups with generous whitespace.
- Use a dark contact band to close the page.

## Don't

- Do not introduce accent colours beyond the measured palette.
- Do not add gradients, shadows, or rounded cards.
- Do not crowd the project lists with decorative UI.
- Do not turn text links into prominent filled CTAs.
- Do not treat project imagery as the page-wide background.
- Do not add unmeasured sizing or spacing values.

## Agent prompt

Build a new portfolio page in Ben Powell’s restrained, editorial style. Use Gallery White (#ffffff) as the canvas and Ink Black (#111111) for text and the contrasting contact area. Keep a compact, horizontally distributed identity row above a left-aligned content column. Use a strong display sans for large project names, with tight tracking and compact line spacing; use a clean sans for supporting details. Organize work into clearly labeled text-led groups, then include a straightforward services or capabilities section and a dark contact footer. Preserve generous whitespace and a flat visual treatment: no shadows, gradients, rounded cards, or invented accent colours. Keep links typographic and understated. Treat any work imagery as project-specific supporting content rather than decoration, and do not invent image styling unsupported by the reference.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Two-column project area with a category label and large text-led project links. | Scannable project list, Project-name links | Oversized type, White canvas, Open whitespace |
| 2 | content-feed | A second two-column project area continuing the text-led list treatment. | Browse film work, Project-name links | Large type, White canvas, Loose section separation |
| 3 | other | Three-column section for capabilities and selected-client information. | Scan service categories, Review capabilities | Text lists, Unboxed columns, White canvas |
| 4 | contact | Full-width dark contact band with a left-aligned email heading. | Direct email contact | #111111 background, White email text, Minimal footer details |

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