# cooldock.app

Source: https://cooldock.app/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, bento, glassmorphic, calm, premium, technical, confident, elegant
Colors: #efece8, #d2cec1, #b2af9b, #8f8f7f, #38382f, #56574e, #71726a, #090909
Type (h1): Inter Display · 80px/80px · 700 · tracking -4px — "A useful Dock for live widgets."
Type (h2): Inter Display · 60px/60px · 700 · tracking -3px — "Everything useful, one Dock away"
Type (h3): Inter Display · 30px/30px · 700 · tracking -1.5px — "Apps, Files & Quick Access"
Type (body): Inter Display · 20px/20px · 600 · tracking -0.4px — "Your smart second Dock Your smart second Dock"
Type (small): Inter Display · 12px/19.2px · 400 — "One-time purchase"
Type (button): Inter Display · 12px/12px · 700 — "Download"
Button (primary): "Download" — fill #000000, text #ffffff, radius 8px, border 1px, padding 8px 16px, height 33px, type 12px/700
Radii: 13px (42), 20px (17), 30px (11), 6px (8), 8px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/cooldock-app/hero.webp?v=684594c8
- Page crop (mid-1): https://media.lvly.design/library/cooldock-app/mid-1.webp?v=5b46b254
- Page crop (mid-2): https://media.lvly.design/library/cooldock-app/mid-2.webp?v=7cd4dc9e
- Hero (mobile): https://media.lvly.design/library/cooldock-app/mobile-hero.webp?v=95d75e41
- Full page (desktop): https://media.lvly.design/library/cooldock-app/full.jpg?v=1cedbd47
- Full page (mobile): https://media.lvly.design/library/cooldock-app/mobile-full.jpg?v=bddc270d
- Clip preview (mp4): https://media.lvly.design/library/cooldock-app/video-sn0f7z.preview.mp4?v=ac65ff35

CoolDock sells a second macOS Dock, and the page borrows Apple's own product-launch grammar to do it: a warm stone ground (#edeceb, palette #efece8 → #d2cec1) under a misty mountain wallpaper, an 80px Inter Display headline set at weight 700 with -4px tracking, and a black pill CTA with a real Apple logo. A floating frosted-glass nav bar (rounded, white-translucent, blurred over the photo) and a MacBook display notch peeking into the hero make the site feel like macOS itself. Further down, the catalog of widgets turns into a bento of large, soft, pale cards (30px radius), each holding rows of black glass widget tiles at 13px/20px radii — the product's dark UI rendered as the sole strong color against a near-monochrome page. It is minimal in copy, dense in artefacts, and entirely tonal: no brand hue beyond black-on-stone and whatever the widgets' third-party logos bring.

## Steal-worthy details

- Nav is a floating capsule detached from the top edge, glass over the hero photograph, with a solid black "Download" pill as its only filled element.
- Headline sets two short lines at 80/80 with -4px tracking — the extreme negative tracking is what gives it the SF Pro Display look while actually using Inter Display.
- Hero art is a landscape photo with foreground rocks and a translucent Mac menubar plus a notch cut into the top of the mockup; the product literally frames the wallpaper.
- Under the CTA, a row of tiny (≈11px) muted qualifiers — "One-time purchase · Live widgets · Customizable second Dock · macOS Sonoma 14.0 or later" — answers the objections without a section.
- Widget catalog as a 2-column bento: pale #f5f4f2-ish cards with 30px corners, titled in ~30px bold display, a two-sentence body, an "Includes: …" line of integrations, then a free-flowing cluster of real widget tiles at true size.
- The widgets are dark glass (#090909–#38382f) with 13px radii, so the page's color lives inside the product screenshots, not in the layout.
- Primary button: black #000000, white text, 8px radius in the nav at 33px tall, scaled up to a full pill in the hero.

## Style recipe

Build a light, Apple-adjacent product page on a warm stone ground: page background #edeceb, raised cards #f5f4f2 with no visible border, text near-black #090909, secondary text #56574e, tertiary #8f8f7f. Use Inter Display (fallback Inter, SF Pro Display) everywhere: display headlines 64–80px, weight 700, line-height 1.0, letter-spacing -4px (≈-0.05em); section titles 28–32px weight 700 tracking -0.03em; body 18–20px weight 400–600 tracking -0.02em, line-height 1.4. One accent only: solid black #000000 buttons with white text, weight 700, 12–16px label, 8px radius at small size and a full pill (30px radius) at hero size; every other control is glass — white at 60–70% with 20px backdrop blur and a hairline white/40 border. Radii come in three sizes: 13px for small tiles, 20px for panels, 30px for large cards. Set the navigation as a floating rounded capsule inset from the top edge, translucent over whatever sits behind it. Lay out feature content as a two-column bento of large pale cards with 40px padding, each card mixing a short title, a two-line paragraph, an "Includes:" integration line, and a cluster of dark-UI artefacts (#1a1a1a–#38382f, 13px radius) shown at real size. Put photographs behind heroes only, blur-soft landscapes in beige-green tones, with subtle top-down white fade so the type stays legible. Keep copy sparse, qualifiers tiny (11px, #8f8f7f) in a single row beneath the CTA, and let the product's dark widgets be the only saturated color on the page.