# jkane.co

Source: https://www.jkane.co/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, bento, minimal, playful, playful, confident, friendly, energetic, human
Colors: #f8f8f8, #d1d5d8, #020202, #8bb5ce, #5255d8, #817be3, #7d8e9b, #b2b1ae
Type (h2): PPNeueMontreal · 20px/24px · 400 — "Playground"
Type (body): PPNeueMontreal · 20px/23px · 400 — "Join my newsletter to get updates on new projects and happenings."
Type (button): ui-sans-serif · 16px/24px · 400 — "Subscribe"
Button (primary): "Subscribe" — fill #ff66eb, text #000000, radius 9999px, border 0px, padding 6px 8px 6px 12px, height 36px, type 16px/400
Button (secondary): "contact@jkane.co" — text #000000, radius 9999px, border 1px, padding 6px 8px 6px 12px, height 38px, type 16px/400
Radii: 18px (172), 9999px (10), 24px (6), 12px (6), 11px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/jkane-co/hero.webp?v=e4ea98a5
- Hero (mobile): https://media.lvly.design/library/jkane-co/mobile-hero.webp?v=4f46fa3b
- Full page (desktop): https://media.lvly.design/library/jkane-co/full.jpg?v=3fc53ad7
- Full page (mobile): https://media.lvly.design/library/jkane-co/mobile-full.jpg?v=8b64ff30
- Clip preview (mp4): https://media.lvly.design/library/jkane-co/video-jrg45f.preview.mp4?v=6f57068c

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- 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.
- Client-logo strip as its own slim white bar between the bio and the work list, monochrome black marks at equal optical weight.
- 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.
- 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.
- 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.

## Style recipe

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.