Canvas White
#ffffffPage background, card surface, text on dark tiles
Thomas Hedger
thomashedger.co.ukWebsite preview
The design language
Thomas Hedger is a designer's portfolio presented as a museum catalog: a nearly colorless white frame that stages loud, saturated work. The UI speaks in only two voices — flat white canvas and Diatype typography — and the portfolio tiles are the entire color story. The grid is a full-bleed 3-column mosaic with negligible internal padding, so project images abut each other like prints in a flat-file drawer. There are no shadows, no rounded corners, no brand color, no gradients, no semantic states. Navigation is dead-center honest: the designer's name, a single contact word, and three utility icons. Every aesthetic decision recedes so the work can shout.
Color palette
neutral
Ink Black
#000000Primary text, card and image borders, grid hairlines, nav accents
Carbon Plum
#29242bHeading text — a warm near-black that softens against pure Ink Black for editorial moments
Ash
#e5e5e5Subtle divider and muted border tone for low-emphasis separations
Typography
Type scale
Minor Third (1.2) · 19px baseheading
26px · 700 · 1.1The quick brown fox jumps
body
19px · 400 · 1.3The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
text-9
9px · 400 · 1.1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Diatype
- Weights
- 400
- Sizes
- 9px, 19px
- Line height
- 1.10–1.30
- Fallback
- Inter, Söhne, Helvetica Now
Body and small UI text at 19px; copyright/caption at 9px. Diatype is a contemporary neo-grotesque with humanist proportions — paired with the bold Variable cut, it creates a tight, modern-editorial feel without a serif in sight. The 9px caption is intentionally tiny, like a museum wall label.
Additional typeface
Diatype Variable
- Weights
- 500, 700
- Sizes
- 26px
- Line height
- 1.10
- Fallback
- Inter, Söhne, GT America
Primary navigation and section headings at 26px. The 500 weight is the default nav voice; 700 is reserved for emphasis and the designer's name. The 26px cap-height next to 19px body text creates a deliberate 7px gap that reads as confident hierarchy without loud type.
Additional typeface
Times
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.20
- Fallback
- Times New Roman, Source Serif
Occasional fallback or inherited editorial copy; not a primary voice. Appears at 13px as a quiet secondary tier.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Card padding
- 3px
- Element gap
- 19px
Border radius
all
0pxSpacing scale
3px19px296px317pxGuidelines
Do
- Use the full 3-column edge-to-edge mosaic for all portfolio work — pageMaxWidth is null, the grid bleeds to the viewport.
- Set every corner radius to 0px — no rounded surfaces anywhere in the UI.
- Use Diatype Variable at 26px 500/700 for all navigation and section headings; reserve 700 for the designer's name and active emphasis.
- Use Diatype 400 at 19px for body and 9px for copyright/footer — the 9px caption is a signature scale choice.
- Keep internal tile padding at 3px and inter-tile gaps at 0–3px for a print-flat-file feel.
- Let project images supply all color — never introduce accent or brand color into chrome elements.
- Pair Carbon Plum (#29242b) with Ink Black (#000000) only when you need editorial warmth in headings; otherwise stay in pure Ink Black.
Don’t
- Do not add shadows, gradients, or border-radius to any component — the design is intentionally flat.
- Do not introduce accent, brand, or semantic colors (no success green, no error red) — the palette is a closed two-tone system.
- Do not use a serif or display font for navigation — Diatype Variable is the only allowed heading voice.
- Do not add hover backgrounds, underlines, or animation to nav links — text alone is the interactive surface.
- Do not wrap the grid in a centered max-width container — the mosaic must reach the viewport edges.
- Do not use type sizes outside the 9/13/19/26 scale — interpolation breaks the editorial rhythm.
- Do not add card surfaces, elevated panels, or modal containers — if it needs a container, the project image should fill it directly.
Components
Top Navigation Bar
Sticky primary header spanning full viewport widthWhite background, 3-column flex layout: left-aligned 'THOMAS HEDGER' at 26px Diatype Variable 700, center-aligned 'CONTACT' at 26px Diatype Variable 500, right-aligned cluster of three icons (Behance, Instagram, cart) at 26px. All nav text is uppercase. No border, no shadow, no background fill — sits directly on canvas white.
Portfolio Grid Tile
Single project image cell in the 3-column mosaicFull-bleed image contained in a rectangle with 3px internal padding and a 1px #000000 border. No border-radius. Images are flush against each other — no inter-tile gap visible at viewport scale. Each tile owns its own aspect ratio; the grid is masonry-like, not uniform.
3-Column Mosaic Grid
Page-level layout for the portfolio bodyThree equal-width columns extending edge-to-edge, no max-width container. Tiles stack vertically within each column. The grid is the page — there is no surrounding wrapper, no margin, no padding outside the tiles.
Social Icon Link
Utility icon in the top-right of the navBehance glyph, Instagram glyph, and shopping cart glyph rendered as inline SVG or icon font at 26px in #000000. No background, no border, no hover state styling visible — the link is the icon itself.
Footer
Minimal page-end credit lineCentered single line: '©Thomas Hedger 2026' on the left and 'Thanks for looking ❤' on the right, both at 9px Diatype 400 in #000000. Sits directly on canvas white with no separator above it — the grid simply ends.
Nav Text Link
Uppercase navigation label26px Diatype Variable 500, #000000, uppercase, no underline, no hover decoration. The link and the text are indistinguishable — type is the interface.
Surfaces & elevation
Level 0
Canvas
#ffffffFull-bleed page background beneath the entire grid
Level 1
Tile Surface
#ffffffFlat project-image tiles with no container styling
Zero elevation. The design refuses shadows, borders-as-decoration, and surface layering. Depth comes from the images themselves, not from UI chrome. This is an editorial print-portfolio philosophy: paper is flat, only ink and image create visual weight.
Layout & imagery
Layout
Full-bleed 3-column masonry grid extending to the viewport edges, with no max-width container, no page margin, and no inter-tile gap. A single sticky top navigation bar — left name, center contact, right icons — sits above the grid. There is no sidebar, no secondary nav, no hero section: the grid begins immediately below the nav. The footer is a single centered credit line at the bottom. The page has one vertical rhythm: nav → grid → footer, with no alternating bands or section dividers. The density is compact and museum-like; the layout trusts the work to carry all visual interest.
Imagery
Imagery is the entire content of the site. The portfolio tiles contain saturated editorial illustrations, product photography, and 3D renders — vibrant pinks, deep blues, neon yellows, and rich greens — each filling its tile edge-to-edge with no padding or background visible. No lifestyle photography, no team shots, no abstract decorative graphics outside the work itself. The contrast between the colorless chrome and the chromatic tiles is the visual signature: the UI is the white mat, the work is the painting.
Design notes
Agent Guide
Quick Color Reference: - background: #ffffff - text: #000000 - heading: #29242b - border: #000000 - muted border: #e5e5e5 - primary action: no distinct CTA color Example Component Prompts: 1. Build a sticky top navigation: white background, 26px Diatype Variable 500 in #000000. Left: 'THOMAS HEDGER' at weight 700. Center: 'CONTACT' at weight 500. Right: three 26px black SVG icons (Behance, Instagram, cart) flush to the right edge. Zero padding inside the bar, 3px vertical breathing room. 2. Build a 3-column full-bleed mosaic grid: three equal-width columns, no max-width, no inter-column gap. Each cell is a project image at 1px solid #000000 border with 3px internal padding and 0px border-radius. Images can be any aspect ratio — masonry, not uniform grid. 3. Build a footer line: centered single row at 9px Diatype 400 in #000000. Left half: '©Thomas Hedger 2026'. Right half: 'Thanks for looking ❤'. No divider above, no background fill, sits directly on canvas white. 4. Build a project tile: full-bleed image, 1px #000000 border, 3px padding, 0px radius. The image is the content — no title, no caption, no overlay. 5. Build an editorial section heading: 'SELECTED WORK' in Diatype Variable 700 at 26px, #29242b, uppercase, left-aligned, 19px top margin above the heading, 0px below it — the grid starts immediately.
Similar brands
Pentagram
Same edge-to-edge image grid, monochrome chrome, type-as-navigation, zero decorative chrome — the partner studios are the only color
Studio Dumbar
Identical full-bleed portfolio mosaic with white canvas, uppercase nav, and no rounded surfaces — work-first composition
Aries Moross
Color-saturated editorial illustration portfolio framed by an almost colorless white grid — the contrast is the brand
Kasper-Florio
Single-row sticky nav, 3-column image mosaic, flat white background, and Diatype/Inter-class neo-grotesque type at the same scale
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
