dock.cool

CoolDock — Smart Second Dock with Live Widgets for Macsaved 26d ago · captured 26d ago

Seven details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #EFECE8

ground#efece8·45.97%#d2cec1·16.38%#b2af9b·10.31%#8f8f7f·8.08%#38382f·8.07%#56574e·5.70%#71726a·3.02%#090909·1.96%

Sized by coverage · click to copy.

Typography1 family · 5 styles · Inter Display

A useful Dock for live widgets.

Inter Display · 80/80 · 700 · -4px

Everything useful, one Dock away

Inter Display · 60/60 · 700 · -3px

Apps, Files & Quick Access

Inter Display · 30/30 · 700 · -1.5px

Body

Your smart second Dock Your smart second Dock

Inter Display · 20/20 · 600 · -0.4px

Small

One-time purchase

Inter Display · 12/19 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsDownload1 style

Download

primary · fill #000000 · label #ffffff · radius 8px · border 1px · padding 8px 16px · height 33px · type 12px / 700

Shape5 radii · 84 uses

13px42 uses · 50%

20px17 uses · 20%

30px11 uses · 13%

6px8 uses · 10%

8px6 uses · 7%

AnalysisCoolDock (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 headlin…

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.

Style recipeBuild a light, Apple-flavoured product site.

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.

Details7 worth noting

dock.cool — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Centered hero copy stack
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.
2Floating frosted-glass nav pill
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.
3Gradient wash instead of a scrim
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.
4MacBook bezel with a notch
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.
5Black capsule widget tiles
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.
6Off-white bento section cards
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.
7Dense nav-scale download button
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.