jkane.co

Jordan Jenkins Independent Creative Director & Designersaved 26d ago · captured 26d ago

Eight details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #F8F8F8

ground#f8f8f8·37.53%#d1d5d8·15.32%#020202·9.06%#8bb5ce·8.04%#5255d8·4.26%#817be3·3.90%#7d8e9b·3.52%#b2b1ae·2.19%

Sized by coverage · click to copy.

Typography1 family · 2 styles · PPNeueMontreal

Playground

PPNeueMontreal · 20/24 · 400 · normal

Body

Join my newsletter to get updates on new projects and happenings.

PPNeueMontreal · 20/23 · 400 · normal

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

ButtonsSubscribe2 styles

Subscribe[email protected]

primary · fill #ff66eb · label #000000 · radius 9999px · border 0px · padding 6px 8px 6px 12px · height 36px · type 16px / 400

secondary · fill — · label #000000 · radius 9999px · border 1px · padding 6px 8px 6px 12px · height 38px · type 16px / 400

Shape5 radii · 196 uses

18px172 uses · 88%

9999px10 uses · 5%

24px6 uses · 3%

12px6 uses · 3%

11px2 uses · 1%

AnalysisJordan Jenkins's studio site is a one-viewport, app-like desk: a pale gray ground (#f8f8f8) with white, 18px-rounded panels tiled across it like windows — a narrow left column (nav strip, bio card…

Jordan Jenkins's studio site is a one-viewport, app-like desk: a pale gray ground (#f8f8f8) with white, 18px-rounded panels tiled across it like windows — a narrow left column (nav strip, bio card with a cartoon avatar and a live clock, a client-logo strip, a scrolling project list, a contact footer) and a wide "Playground" pane on the right that is a masonry of work tiles bleeding off the bottom edge. Everything is set in PP Neue Montreal at a single 20px/400 size, so hierarchy comes from panel grouping and tone (near-black on white, gray for descriptions) rather than from type scale. The one loud color is a hot pink (#ff66eb) that marks the active nav pill and the outlined email chip; every other hue arrives through the work itself — the black flower mark, the billboard sky, the purple onboarding scene. Nothing scrolls the document; the panels scroll internally, and the page reads as a workspace you are looking into rather than a page you read down.

Style recipeBuild the page as fixed-height panels on a desk, not as a scrolling document.

Build the page as fixed-height panels on a desk, not as a scrolling document. Ground: #f8f8f8. Panels: #ffffff, radius 18px, no border, no shadow, 8–12px gutters between them; sub-cards inside a panel use a soft gray (#f0f0f0) at the same radius. Let panels scroll internally and crop content at their edges; let the widest panel bleed off the bottom of the viewport. Type: one grotesk (PP Neue Montreal or Inter/Helvetica Now), one size (20px, weight 400, line-height 1.15–1.2, normal tracking) for everything; make secondary text mid gray (#7d8e9b) rather than smaller. Text color near-black #020202. Accent: hot pink #ff66eb, used only for the active nav pill and one outlined contact chip — never on body text and never as a fill for large areas. Controls are 36px pills (radius 9999px), gray (#ebebeb) when inactive, pink when active, with a ⊕/⊖ glyph after the label to show open/closed state; secondary icon buttons are thin-ring circles. Let all other color come from imagery — keep chrome monochrome so the work tiles carry the palette. Nav is a slim white bar with a small black mark left and the pills right; metadata (language switch, live clock) sits in the top row of the first content card. On mobile, stack the panels full-width with the same radii and gutters.

Details8 worth noting

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

1Panels that scroll inside themselves
The whole site fits one viewport and behaves like a window manager: the document is fixed at 900px, and the project list and playground each scroll inside their own rounded panel with the content cropped at the panel edge.
2Pill nav with open/closed glyphs
Nav as pill toggles with ⊖ / ⊕ glyphs: the open section ("Info") is a filled pink pill with a minus, closed ones ("Contact", "Playground") are gray pills with a plus — state and affordance in one 36px control.
3One type size, tone for hierarchy
A single type size (20px, weight 400) across headings, body and nav; project descriptions drop to a mid gray (#7d8e9b-ish) instead of a smaller size, which keeps the grid quiet without any scale hierarchy.
4Avatar, language switch, live clock
Bio card pairs a loud cartoon avatar (the only illustration of the author) with an EN/CY language switch and a ticking local clock in the same top row — personality plus a small live signal.
5Client logo strip as its own bar
Client-logo strip as its own slim white bar between the bio and the work list, monochrome black marks at equal optical weight.
6Three tonal layers, no borders
Project rows are soft gray (#f0f0f0-style) sub-cards inside the white panel: square 112px thumbnail left, name + two-tone description right — three tonal layers deep (ground → panel → row) with no borders anywhere.
7Pink-outlined email chip
Contact bar: the email sits in a pink-outlined pill with a copy icon; social links are three thin-ring icon buttons pushed to the right.
8Mobile keeps the card radii and gutters
On mobile the left column becomes the page and the panels stack with their radii and gutters intact, so the "cards on a desk" idea survives the reflow.

portfolio · landing · light · bento, minimal, playful · playful, confident, friendly, energetic, human

johnhansportfolio.framer.website1

finnolivertaylor.com6

jkane.co

More like this