cleanshot.com

CleanShot's homepage is the polished Mac-indie landing done at Apple's own register: a cool near-white ground (#f7fbfe, three quarters of the page) with a faint sky-blue radial glow behind the hero, one saturated electric blue (#0d44e8) doing every job the brand needs — the pill "Buy now" in the nav, the primary CTA, and the two words of the 60px headline it chooses to color ("apps." / "Shot."). The type is Google Sans Flex at 600 for display with −2% tracking and a soft 450 for body, so the headline reads big and warm rather than tight and technical. The hero is a classic centered stack — a black "Introducing Studio Mode" pill with a play glyph, a two-line headline, an 18px subhead, a blue-plus-white button pair, a small money-back reassurance link — and then hands the eye to a two-up of a video card and a rotating testimonial card, both at 20px radius. Further down the page turns into a bento of 20px-radius tiles whose fills are the product itself: pastel and deep-navy gradients, a pink-to-cyan wash, a charcoal "Enterprise-grade security" tile with an ISO badge, each carrying a short bold title and one line of body. Depth comes from tonal cards and gradient fills rather than borders; nothing on the page is outlined except the secondary button.

Build a light, confident Mac-app landing. Ground #f7fbfe (a cool near-white, never pure white) with a soft sky-blue radial glow behind the hero; cards are white or gradient-filled at border-radius: 20px, with no borders — depth is tonal. Text: primary #0f1514, secondary #4c5155, muted #949697. Exactly one accent, #0d44e8, used for the primary button, the nav's buy pill and one or two emphasised words in the headline; use no other chroma in the chrome. Type in Google Sans Flex (fallbacks SF Pro Display, Helvetica Neue): display 60px/66px at weight 600 with letter-spacing: -0.02em; body 18px/30px at weight 450 with +0.01em; card titles ~24px at 600. Buttons are 40px tall, border-radius: 14px, 15px text at weight 550, 16px horizontal padding; the primary is solid #0d44e8 on white text, the secondary is white with a 1px #c5cdd6 hairline, and an announcement pill is black with white 14px text and a small icon. Center the hero stack (eyebrow pill, two-line headline, subhead, button pair, one small reassurance link) and follow it with an asymmetric two-up of media and testimonial. Compose feature sections as bento grids of 20px-radius tiles whose fills are gradients drawn from the product (deep navy, pastel sky, pink-to-cyan, charcoal), each with a short bold title and one line of body; switch text to white on dark fills. Put section headlines on the left and the section CTA on the right of the same row. Radii: 20px cards, 14px controls, 40–48px large panels, 9999px circular icon buttons.