# joshmillgate.co.uk

Source: https://www.joshmillgate.co.uk/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, minimal, bento, calm, confident, technical, elegant
Colors: #fafafa, #d4d5d5, #b2b2b2, #5d5d5d, #89d0db, #b7e3ed, #8a8a8a, #383838
Type (h1): Inter · 14px/21px · 500 · tracking -0.28px — "Josh Millgate Product Designer"
Type (h2): index · 11.5px/18.4px · 500 · tracking 0.115px — "PRODUCTS"
Type (body): Geist · 14px/23.1px · 400 · tracking -0.28px — "Multi-disciplinary designer specialising in UI/UX and Design Engineering. I craf"
Type (small): IBM Plex Mono · 9.8px/15.68px · 500 · tracking -0.14px — "WIP"
Type (button): Inter · 12px/19.2px · 500 — "View work"
Button (primary): "View work" — fill #3a3a3a, text #ffffff, radius 8px, border 0px, padding 6px 10px, height 31px, type 12px/500
Radii: 8px (22), 16px (10), 12px (6), 50% (3)

## Images

- Hero (desktop): https://media.lvly.design/library/joshmillgate-co-uk/hero.webp?v=9659e5b1
- Page crop (mid-1): https://media.lvly.design/library/joshmillgate-co-uk/mid-1.webp?v=65977eda
- Page crop (mid-2): https://media.lvly.design/library/joshmillgate-co-uk/mid-2.webp?v=08773a02
- Hero (mobile): https://media.lvly.design/library/joshmillgate-co-uk/mobile-hero.webp?v=ead184f1
- Full page (desktop): https://media.lvly.design/library/joshmillgate-co-uk/full.jpg?v=a9a4c41e
- Full page (mobile): https://media.lvly.design/library/joshmillgate-co-uk/mobile-full.jpg?v=beb8ab3b
- Clip preview (mp4): https://media.lvly.design/library/joshmillgate-co-uk/video-mkztx2.preview.mp4?v=9af72b61

Josh Millgate's portfolio is a one-column résumé rendered as an interface: a 536px text measure on a near-white `#fafafa` ground, one small teal gradient orb standing in for a headshot, name and role stacked at 14px, two short paragraphs, a single dark `#3a3a3a` pill button and three ghost social circles. Below the fold the work becomes a ledger — hairline-separated sections ("PRODUCTS", "DESIGN") of two-column rows, project name left in Inter, description right in a monospace caption with a tiny arrow — and then a full-width bento of white rounded cards, each holding a floating, shadowed product screenshot on acres of padding. Every element is 14px or smaller and letterspacing is tightened (−0.28px), so the whole page reads as quiet, technical and deliberately under-designed, letting the work inside the cards supply all the color.

## Steal-worthy details

- Micro-scale type system: heading and body both 14px with −0.28px tracking; hierarchy comes from weight (500 vs 400) and color (near-black vs gray), never size.
- The "ledger" list: project name left, monospace caption right-aligned, a hairline between sections, an outbound-arrow glyph only on rows that link — a portfolio index in four rows per group.
- Section eyebrows as 11px uppercase monospace labels with a 12px Lucide-style icon (box for Products, pencil for Design).
- Avatar replaced by a 48px circle with a soft teal→pale-teal gradient (`#89d0db` → `#b7e3ed`) — the only saturated color above the fold.
- The CTA is tiny and dark: 31px tall, 12px/500 text, 6×10px padding, 8px radius, solid `#3a3a3a` on white — a button sized like a tag.
- Social links as 36px hairline-bordered circles with 16px monochrome icons, evenly spaced under the CTA.
- Work grid: 2-up white cards at 16px radius with a 1px `#d4d5d5`-ish border, each screenshot floated in the middle with generous 80–120px margins and its own soft drop shadow, occasionally cropped by the card edge for depth.
- Underlined inline links in body copy (Ultramock, Cuppa) are the only in-paragraph emphasis — no bold, no color.
- Radii ladder is disciplined: 8px for controls, 12px for inner screenshots, 16px for cards, 50% for avatar and icon buttons.

## Style recipe

Build a quiet, monochrome, engineer's portfolio system. Ground: `#fafafa` page, `#ffffff` cards, hairlines in `#d4d5d5`, text in `#383838` (primary) and `#5d5d5d`/`#8a8a8a` (secondary/tertiary). Reserve one soft accent — teal `#89d0db` fading to `#b7e3ed` — for a single decorative element and nothing else; buttons are solid `#3a3a3a` with white text. Type: Inter for headings, Geist for body, a monospace (Geist Mono) for captions and eyebrows; base size 14px, line-height 1.5–1.65, letterspacing −0.02em everywhere; hierarchy by weight 500 vs 400 and by gray level, not by size — never exceed ~16px for display. Layout: a single centered column of ~540px for prose, widening to a ~1140px 2-column bento for work; sections separated by 1px hairlines, not headings. Lists are two-column rows: label left, monospace meta right-aligned, 36px row height, arrow glyph for external links. Cards: white, 1px border, 16px radius, no card shadow — instead float a screenshot inside with 80px+ padding and give the screenshot its own soft shadow and 12px radius. Controls: 8px radius, 31px height, 12px/500 text; icon buttons 36px circles with a hairline border. Icons: 12–16px Lucide, monochrome. Motion: subtle load fade/rise only. Keep whitespace generous (64–96px between sections) and let saturated color come only from the content in the cards.