joshmillgate.co.uk

Josh Millgate – Brand & product designersaved 26d ago · captured 26d ago

Nine details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #FAFAFA

ground#fafafa·97.42%#d4d5d5·1.91%#b2b2b2·0.32%#5d5d5d·0.18%#89d0db·0.11%#b7e3ed·0.02%#8a8a8a·0.02%#383838·0.02%

Sized by coverage · click to copy.

Typography4 families · 4 styles · Inter, index, Geist, IBM Plex Mono

Josh Millgate Product Designer

Inter · 14/21 · 500 · -0.28px

PRODUCTS

index · 12/18 · 500 · 0.115px

Body

Multi-disciplinary designer specialising in UI/UX and Design Engineering. I craf

Geist · 14/23 · 400 · -0.28px

Small

WIP

IBM Plex Mono · 10/16 · 500 · -0.14px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsView work1 style

View work

primary · fill #3a3a3a · label #ffffff · radius 8px · border 0px · padding 6px 10px · height 31px · type 12px / 500

Shape4 radii · 41 uses

8px22 uses · 54%

16px10 uses · 24%

12px6 uses · 15%

50%3 uses · 7%

AnalysisJosh 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 ro…

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.

Style recipeBuild a quiet, monochrome, engineer's portfolio system.

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.

Details9 worth noting

joshmillgate.co.uk — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Micro-scale 14px type system
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.
2Two-column ledger project list
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.
3Monospace section eyebrows with icon
Section eyebrows as 11px uppercase monospace labels with a 12px Lucide-style icon (box for Products, pencil for Design).
4Gradient orb instead of headshot
Avatar replaced by a 48px circle with a soft teal→pale-teal gradient (#89d0db → #b7e3ed) — the only saturated color above the fold.
5Tag-sized dark CTA button
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.
6Hairline circle social buttons
Social links as 36px hairline-bordered circles with 16px monochrome icons, evenly spaced under the CTA.
7Floating screenshots in bento cards
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.
8Underlines as the only emphasis
Underlined inline links in body copy (Ultramock, Cuppa) are the only in-paragraph emphasis — no bold, no color.
9Disciplined radii ladder
Radii ladder is disciplined: 8px for controls, 12px for inner screenshots, 16px for cards, 50% for avatar and icon buttons.

portfolio · landing · light · minimal, bento · calm, confident, technical, elegant

joshmillgate.co.uk

More like this