heyclicky.com

heyclicky - an ai buddy on your macsaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #F4F4F4

ground#f4f4f4·60.08%#d3d7d1·6.54%#aab8a7·6.19%#342d28·5.96%#535751·4.99%#9c9282·3.16%#737d74·2.66%accent#9f0506·2.34%

Sized by coverage · click to copy.

Typography1 family · 4 styles · Inter

heyclicky

Inter · 88/97 · 500 · -2.64px

heyclicky, your way

Inter · 56/67 · 500 · -1.68px

Body

from fl studio to claude code, jump into any tool, ask questions and heyclicky d

Inter · 16/24 · 400 · -0.48px

Small

5/30/26, 10:22 PM

Inter · 12/12 · 400 · -0.36px

Specimens are the page's own words at their measured metrics.

Buttonsdownload for macsend it to me1 style

download for macsend it to me

primary · fill — · label #000000 · radius 999px · border 1px · padding 0px 20px 1px 16px · height 40px · type 18px / 500

Shape5 radii · 71 uses

999px31 uses · 44%

8px28 uses · 39%

16px5 uses · 7%

4px4 uses · 6%

4.49px3 uses · 4%

Analysisheyclicky's landing page is a Mac desktop pretending to be a website.

heyclicky's landing page is a Mac desktop pretending to be a website. The whole thing sits on a pale #f5f5f5 ground with a faint dot grid, and a fake menu bar (wifi, battery, "2:23 PM") replaces the nav. The hero is a scatter of tilted macOS windows — QuickTime-style players with red/yellow/green traffic lights, each captioned with a lowercase filename like it-draws-too-omg.mov — plus a Trash can, blue Finder folders, a "HELLO my name is" sticker, kaomoji (^ ω ^, ¯\_(ツ)_/¯) and a spinning beachball. In the middle, the only typographic authority: "heyclicky" in Inter 500 at 88px with -3% tracking, one lowercase tagline, and two 40px pill buttons — one a glossy Aqua-blue gradient, one an outlined gray. Further down the page keeps the bit going: an Aqua-gel pill logo, a Notes.app window carrying the manifesto with a yellow highlighter swipe, and pixel-cube rainbow snakes crawling behind it. Everything is lowercase, the copy reads like a group chat, and the "retro" is very specifically 2003–2007 OS X and early web, not generic 90s.

Style recipeBuild a light page on a near-white ground (`#f5f5f5`) with a faint 1px dot grid at ~24px spacing.

Build a light page on a near-white ground (#f5f5f5) with a faint 1px dot grid at ~24px spacing. Set everything in Inter: display 500 at 80–96px with -3% letter-spacing, body 400 at 16px/24px with -0.03em tracking, all copy lowercase except tiny caps section labels. Palette is grays (#342d28 ink, #535751 secondary, #d3d7d1/#aab8a7 surfaces) with color arriving only through media and one or two saturated props (a deep red #9f0506, Aqua blue, candy pinks/greens). Radii: 999px for buttons and labels, 8px for windows and media, 16px for large frames. Buttons are 40px pills at 18px/500 — the primary one a glossy Aqua gradient with a top white highlight, the secondary a 1px outline. Frame every image or video as a macOS window (traffic lights, 1px border, soft blurred shadow) and give it a lowercase filename caption in muted gray below. Scatter secondary windows and small props around the hero with 2–6° random rotations and staggered z-order, leaving a clear vertical column for the headline and CTAs. Use retro-OS artefacts as decoration (Finder folders, Trash, Notes window, beachball, kaomoji) sparingly and at the margins. Section headers are outlined 999px pills with 11–12px caps text. Keep the tone informal: lowercase, sentence fragments, filenames as captions.

Details8 worth noting

heyclicky.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Total desktop metaphor
The desktop metaphor is total: fake menu bar with system tray glyphs, window chrome with traffic lights, captions styled as filenames, a Trash icon at the margin. The site *is* the product's habitat.
2Tilted scattered windows
Scattered windows are each rotated 2–6° and cast a soft macOS drop shadow, which makes the pile read as physical objects on a desk rather than a grid gone wrong.
3One weight, one huge word
Type does almost nothing: one weight (Inter 500), one huge lowercase word at 88px/-2.64px, everything else 16px/24px with -0.48px tracking. Restraint in the type is what lets the clutter be charming.
4Aqua glass primary button
Primary CTA is a literal OS X Aqua button — glossy blue gradient, white highlight along the top, pill radius — next to a plain 1px-outlined gray pill. The nostalgia is carried by one control, not the whole system.
5Outlined caps section pills
Section labels are tiny outlined pills in caps ("THE DREAM") — the only uppercase on the page, so they scan as UI chrome, not headlines.
6Narrow column beside framed video
Feature blocks pair a short lowercase heading with a video in a device-like frame, with the paragraph left-aligned in a narrow ~280px column.
7Manifesto in a Notes window
The manifesto lives inside a Notes.app window with a real highlighter swipe on the key phrase; a nod to how people actually share hot takes.
8Junk props kept at the margins
Decorative junk (Clippy-era cat, "You've Got Mail", Pikachu, a flip phone, rainbow pixel-cube snakes) is dropped at the page edges, never over the reading column.