# heyclicky.com

Source: https://www.heyclicky.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, playful, retro-warm, playful, nostalgic, human, friendly, optimistic
Colors: #f4f4f4, #d3d7d1, #aab8a7, #342d28, #535751, #9c9282, #737d74, #9f0506
Type (h1): Inter · 88px/96.8px · 500 · tracking -2.64px — "heyclicky"
Type (h2): Inter · 56px/67.2px · 500 · tracking -1.68px — "heyclicky, your way"
Type (body): Inter · 16px/24px · 400 · tracking -0.48px — "from fl studio to claude code, jump into any tool, ask questions and heyclicky d"
Type (small): Inter · 12px/12px · 400 · tracking -0.36px — "5/30/26, 10:22 PM"
Type (button): Inter · 18px/27px · 500 · tracking -0.54px — "download for mac"
Button (primary): "download for macsend it to me" — text #000000, radius 999px, border 1px, padding 0px 20px 1px 16px, height 40px, type 18px/500
Radii: 999px (31), 8px (28), 16px (5), 4px (4), 4.49px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/heyclicky-com/hero.webp?v=4436b17f
- Page crop (mid-1): https://media.lvly.design/library/heyclicky-com/mid-1.webp?v=7abf5a3a
- Page crop (mid-2): https://media.lvly.design/library/heyclicky-com/mid-2.webp?v=4cf3ce95
- Hero (mobile): https://media.lvly.design/library/heyclicky-com/mobile-hero.webp?v=654eecf9
- Full page (desktop): https://media.lvly.design/library/heyclicky-com/full.jpg?v=bedc8ac2
- Full page (mobile): https://media.lvly.design/library/heyclicky-com/mobile-full.jpg?v=9e6471a4
- Clip preview (mp4): https://media.lvly.design/library/heyclicky-com/video-exr6xk.preview.mp4?v=1cbc4819

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- 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.
- Section labels are tiny outlined pills in caps ("THE DREAM") — the only uppercase on the page, so they scan as UI chrome, not headlines.
- 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.
- 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.
- 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.

## Style recipe

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.