# dannpetty.com

Source: https://dannpetty.com/
Captured: 2026-10-16
Tags: portfolio, landing, dark, both, bento, minimal, dark-techno, confident, premium, human, calm
Colors: #090808, #37302b, #f2f4f4, #919394, #5b514a, #78716c, #361308, #d0d1d2
Type (body): ui-sans-serif · 14px/17.5px · 400 — "Helping host the Space X + Cursor + Quiver.AI event in San Francisco"
Type (small): ui-sans-serif · 12px/16.68px · 400 — "Clients"
Type (button): ui-sans-serif · 16px/24px · 400 — "Try Reframe"
Button: "Try Reframe" — fill #ffffff, text #000000, radius 9999px, border 0px, padding 10px 16px, height 44px, type 16px/400
Radii: 20px (73), 9999px (47), 10px (10), 4px (5), 14px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/dannpetty-com/hero.webp?v=b241c935
- Page crop (mid-1): https://media.lvly.design/library/dannpetty-com/mid-1.webp?v=4121125c
- Page crop (mid-2): https://media.lvly.design/library/dannpetty-com/mid-2.webp?v=aaebd064
- Hero (mobile): https://media.lvly.design/library/dannpetty-com/mobile-hero.webp?v=412e8632
- Full page (desktop): https://media.lvly.design/library/dannpetty-com/full.jpg?v=a936047e
- Full page (mobile): https://media.lvly.design/library/dannpetty-com/mobile-full.jpg?v=516cb2d2
- Clip preview (mp4): https://media.lvly.design/library/dannpetty-com/video-qzpr31.preview.mp4?v=26a7c2e3

A designer's portfolio built as one endless four-column masonry of rounded tiles on pure black, with no header, no hero headline and no section breaks. The work does the talking: each tile is a full-bleed screenshot of a client site, so the color on the page comes entirely from the shots, while the chrome stays near-black (#090808) with warm stone grays (#37302b, #5b514a, #78716c) and off-white text (#f2f4f4). The person shows up as a small sticky profile card in the bottom-left corner, a live location widget and a client-logo strip. The columns start at different heights, so the grid reads as a scattered board rather than a page with a top.

## Steal-worthy details

- Columns start at staggered heights: the right column begins ~280px down and the left ~590px, so the first screen has no common top line and reads like a pinboard
- The bio lives in a profile card pinned to the lower-left, with a 64px avatar, a 20px semibold name, gray body text and white underlined links. The identity sits in the corner instead of taking over a hero
- A live location tile shows city, "Formerly SF / CA" and the local time over a dotted-halftone globe with a single glowing dot. It's a cheap, human signal of where the person is right now
- The client logos sit in a horizontally clipped row of 36px circular brand-colored badges under a "Clients · 2014 – 2026" label. The last badge is cut off at the tile edge to hint at scrolling
- The photo carousel puts its caption in a dark translucent pill in the bottom-left. In the bottom-right, the pagination is a row of dots where the active one stretches into a white dash
- A product tile closes with a full-width white pill CTA ("Try Reframe": #ffffff on #000, 44px tall, 16px regular). It's the only solid-white object on the page, so it becomes the call to action without any color
- Work tiles are framed screenshots inset ~16px inside a tinted card (a dusty mauve or teal pulled from the shot itself), so every project gets its own matte without a uniform border
- After scrolling, the profile card collapses into a floating translucent pill with avatar, name and an up-arrow back-to-top. The identity stays one tap away

## Style recipe

Build the page as a four-column masonry of rounded tiles on pure black (#000, card fill around #090808) with ~20px gutters. Skip the header and the headline. Start each column at a different vertical offset so the first screen has no common top edge. Tiles use a 20px radius and a 1px hairline in a warm stone (#37302b). Interactive and status shapes are full pills (9999px), and inner frames use 10px. Use a single system sans (ui-sans-serif) throughout at modest sizes: 14px/1.25 body, 12px labels, 16–20px semibold names. Body text is warm gray (#78716c to #919394), and names and links are off-white (#f2f4f4), with links underlined and no colored link styling. The chrome has no accent hue. Color comes only from the imagery: full-bleed photos and screenshots, each inset in a matte tinted to match it. If you need an emphasis color, use #78716c stone or a solid white pill (#ffffff fill, #000 text, 44px tall, 10px 16px padding, regular weight). Use the white pill for at most one CTA per tile. Make small utility tiles feel personal: local time, location and a logo strip of 36px circular badges that bleeds off the tile edge. Overlay captions go in dark translucent pills, and carousel pagination uses dots where the active one stretches into a dash. On scroll, keep the identity reachable as a floating translucent name pill with a back-to-top arrow.