cooldock.app

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.

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.