# dock.cool

Source: https://www.dock.cool/
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/dock-cool/hero.webp?v=684594c8
- Page crop (mid-1): https://media.lvly.design/library/dock-cool/mid-1.webp?v=5b46b254
- Page crop (mid-2): https://media.lvly.design/library/dock-cool/mid-2.webp?v=7cd4dc9e
- Hero (mobile): https://media.lvly.design/library/dock-cool/mobile-hero.webp?v=95d75e41
- Full page (desktop): https://media.lvly.design/library/dock-cool/full.jpg?v=1cedbd47
- Full page (mobile): https://media.lvly.design/library/dock-cool/mobile-full.jpg?v=bddc270d
- Clip preview (mp4): https://media.lvly.design/library/dock-cool/video-tq2r8t.preview.mp4?v=8d1b628c

CoolDock (cooldock.app) is an Apple-idiom Mac utility landing: a soft, sun-bleached landscape photograph — mist, rolling green hills, matte gray boulders — sits behind an 80px Inter Display headline set at weight 700 with −4px tracking, and everything that isn't the photo is either near-black or warm off-white (`#efece8` ground, `#d2cec1`/`#b2af9b` mid-tones). The nav floats as a frosted white glass pill, the primary CTA is a pure black pill with an Apple glyph, and a fake MacBook menu bar with a notch cutout frames the product shot. Below the fold the page turns into a bento of large off-white cards (30px radius) on which the widgets themselves — pill-shaped black tiles at 13px radius — become the only color on the page, each brand mark (Shopify green, YouTube red, Drake cover art) reading as a jewel against the monochrome. The effect is very Cupertino: restraint in the page, richness in the product.

## Steal-worthy details

- Hero copy stack: small eyebrow with an Apple glyph, two-line 80px/80px display headline at −4px tracking, 20px gray deck, then a single black pill CTA — every line centered, nothing else competing.
- A floating frosted-glass nav pill (white at ~80% with blur, subtle hairline and drop shadow) that detaches from the page edge; the black "Download" button inside it is a miniature of the hero CTA.
- The hero photo is desaturated and lifted toward white at the top so the black headline sits on a near-solid ground while the landscape emerges lower down — a gradient wash instead of a scrim box.
- The product frame is a MacBook top bezel: rounded corners, a black notch cut out of the top edge, and a translucent menu bar with a "09:41" clock — device chrome without a full device render.
- Widget tiles as UI language: `#090909` capsules at 13px radius, 2-up in a row, big tabular figure at ~20px bold with an 11px muted caption beneath; a small brand badge in the corner carries the only saturated color.
- Bento section cards are off-white `#efece8`-ish panels on a slightly darker page, radius 30px, with a 28px semibold heading, two short paragraphs and an "Includes: …" list of integrations set in plain body text — no icons, no chips.
- The `Download` button spec is tiny and dense: 12px/700 label, 8×16 padding, 8px radius, 33px tall — a nav-scale control that still reads as the primary action because it is the only solid black shape.

## Style recipe

Build a light, Apple-flavoured product site. Ground: warm off-white `#efece8` page, cards in a slightly lighter or slightly darker step of the same warm gray (`#edeceb`, `#d2cec1` for borders/dividers). Ink: `#090909` for headlines and primary controls, `#56574e`/`#8f8f7f` for body and captions. No accent hue at all — color enters only through product imagery and third-party brand marks. Type: Inter Display (fallback Inter, SF Pro Display) everywhere; display headlines 64–80px, weight 700, tracking −0.05em, line-height 1.0; section headings 28–32px weight 600, tracking −0.02em; body 18–20px at weight 500–600 with −0.02em tracking, 1.5 line-height; captions 11–12px. Radii: 30px for large surface cards, 20px for medium panels, 13px for small tiles/widgets, 8px for buttons, 6px for inner chips. Primary button: solid `#000000`, white 12–16px bold label, fully rounded or 8px radius, optional leading glyph; there is exactly one button style. Navigation: a floating pill centered under the top edge, `rgba(255,255,255,0.8)` with `backdrop-filter: blur(20px)`, a 1px `rgba(0,0,0,0.06)` border and a soft 0 8px 24px shadow. Hero: one large, desaturated, low-contrast photograph with a white-to-transparent gradient from the top so the text sits on near-white; headline, deck and CTA centered; a row of 12px muted proof points below the CTA. Product shots should be framed by a suggestion of device chrome (bezel radius, notch, menu bar) rather than a full mockup. Feature sections are a 2-column bento of 30px-radius cards with generous 40px padding; inside them, dark `#090909` capsule tiles show live data with a large tabular numeral and a small muted label. Motion: minimal; let the photograph and product do the work.