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

# Thomas Hedger · Design System

> A quiet canvas for vivid, varied work.

**Theme:** light · **Industry:** portfolio · **Source:** https://thomashedger.co.uk/ · **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 white portfolio shell puts a varied collection of graphic, illustration, and product-design projects in the foreground. Compact black navigation and a loose, image-led grid let each project bring its own palette and character.

## North star

Keep the interface quiet and neutral so the varied project artwork carries all the colour and visual emphasis.

## Overview

The page uses a white canvas and black typography as a neutral frame for a diverse portfolio, rather than imposing a strong colour system on the work. Bright yellow, pink, lime, and other hues appear inside project images; treat these as project-specific artwork, not interface colours. A compact, bold header sits above a closely packed, irregular multi-column gallery, with narrow white gutters separating images of differing proportions. The layout feels editorial and image-led: no prominent introductory copy competes with the work, and the expansive white canvas continues below the visible gallery. Diatype supplies the small regular text, while its variable bold counterpart handles the larger, emphatic links and identity text. Keep navigation black, direct, and visually light on the page. The overall strategy is deliberately flat and restrained, allowing contrasting illustration, typography, product imagery, and graphic compositions to define the mood from tile to tile.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, header background, and the narrow gutters that separate portfolio images. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Header wordmark, contact link, social and shop icons, and compact footer text. |

### Semantic aliases

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

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype | `--font-body` | webfont | 400 | Small regular supporting text and compact labels. | Inter |
| Diatype Variable | `--font-display` | webfont | 700 | Bold wordmark, navigation links, and prominent short labels. | Inter |

- **Diatype:** Regular weight; keep supporting text understated and untransformed.
- **Diatype Variable:** Bold, large, and direct; use uppercase for the wordmark and preserve tight, clean forms.

### Type scale — Custom (ratio ≈ 2.889, base 9px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 26px | 700 | 1.1 | 0 | — | Diatype Variable | Prominent bold identity or short headline treatment. |
| body | 9px | 400 | 1.1 | 0 | — | Diatype | Small, quiet supporting copy and compact labels. |
| link | 26px | 700 | 1.1 | 0 | — | Diatype Variable | Bold navigation and identity links in the header. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3 px.
- Section rhythm 317px · element gap — · card padding — · max content width —.

Use a slim full-width header, then move directly into a dense, asymmetrical portfolio gallery. The gallery uses multiple vertical columns with images of varied heights and proportions; thin white gutters create separation without card framing. Align the wordmark left, contact link centrally, and social or shop icons right. Preserve the measured spacious page canvas beneath the compact image cluster rather than filling every viewport with content. No fixed max width is measured.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface reads as flat: no measured shadows, gradients, or card treatments. Use white gutters to distinguish adjacent works rather than outlines or elevation. Keep the header visually integrated with the canvas. Project artwork may contain its own dark areas, highlights, or layered compositions; preserve those as part of each image rather than recreating them as interface effects.

## Imagery

Make the portfolio grid the visual focus, mixing illustration, graphic design, editorial layouts, and product imagery. Keep each project image in its own rectangular tile and retain its original artwork colours and composition. The bright yellows, pinks, greens, and dark backgrounds belong to project images, not the shared interface palette. Mix tile proportions to create a varied, collage-like rhythm.

## Components

### Header wordmark

Bold black “THOMAS HEDGER” text aligned at the left of the white header.

### Contact link

Prominent bold black contact label centered in the header.

### Social and shop links

Compact black social and shopping icons grouped at the right edge.

### Portfolio gallery

Asymmetrical multi-column arrangement of edge-to-edge project images with narrow white separators.

### Project tiles

Rectangular image-led works with differing proportions and no visible card chrome.

### Footer credit

Small black credit line over the gallery area near the end of the visible work.

### Measured component styles

- **Link** (“︎”): transparent background · text #000000 · radius 0px · padding 0px · 700 25.92px Diatype Variable

## Do

- Keep the shared page canvas white.
- Use black for the compact navigation and wordmark.
- Let project images provide the colour.
- Vary tile proportions in an irregular gallery.
- Separate images with clean white gutters.
- Keep interface decoration flat and restrained.

## Don't

- Do not turn artwork colours into global UI accents.
- Do not add prominent hero copy above the portfolio.
- Do not force every tile into one uniform ratio.
- Do not add shadows or decorative card borders.
- Do not crowd the header with extra navigation.
- Do not fill the long white canvas with invented content.

## Agent prompt

Build a new portfolio page in Thomas Hedger’s restrained, image-first style. Use Gallery White (#ffffff) as the continuous canvas and Ink Black (#000000) for the wordmark, navigation, and small icons. Place a compact header above an asymmetrical multi-column gallery; use varied rectangular image proportions and narrow white gutters rather than card borders. Keep the header simple, with identity on the left, a contact link centered, and social or shop actions on the right. Use bold Diatype-like typography for short navigation labels and regular sans-serif for supporting text. Let project imagery bring its own vivid colours and visual language; do not promote those image colours into the site palette. Avoid shadows, gradients, oversized introductory copy, and decorative UI. Preserve generous white space after the work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Compact full-width header above an irregular, multi-column image gallery on a white canvas. | Direct contact link, Social and shop shortcuts, Image-led project browsing | Black wordmark, Asymmetrical image tiles, Narrow white gutters, Flat presentation |

## Source CSS custom properties (selected)

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

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