# cleanshot.com

Source: https://cleanshot.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, corporate-clean, minimal, bento, confident, friendly, trustworthy, energetic, technical
Colors: #f7fbfe, #949697, #193341, #c5cdd6, #737374, #4c5155, #abafb5, #0f1514
Type (h1): Google Sans Flex · 60px/66px · 600 · tracking -2% — "There are average capture apps. And there's CleanShot."
Type (h2): Google Sans Flex · 40px/48px · 600 · tracking -2% — "Always one drag away"
Type (h3): Google Sans Flex · 20px/28px · 600 · tracking -2% — "Add your camera"
Type (body): Google Sans Flex · 18px/30.06px · 450 · tracking 1% — "The Mac-native toolkit for screenshots, recordings and collaboration. Trusted by"
Type (small): Google Sans Flex · 13px/15.99px · 450 · tracking 1% — "By subscribing, you agree to receive marketing emails from CleanShot. You can un"
Type (button): Google Sans Flex · 15px/24px · 550 · tracking 1% — "Buy now"
Button (primary): "Buy now" — fill #0d44e8, text #ffffff, radius 14px, border 0px, padding 0px 16px, height 40px, type 15px/550
Button (secondary): "Product" — text #161618, radius 14px, border 0px, padding 0px 13px 0px 16px, height 40px, type 15px/550
Radii: 20px (36), 14px (18), 100% (9), 40px (6), 48px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/cleanshot-com/hero.webp?v=3e94999f
- Page crop (mid-1): https://media.lvly.design/library/cleanshot-com/mid-1.webp?v=ff79fb58
- Page crop (mid-2): https://media.lvly.design/library/cleanshot-com/mid-2.webp?v=12c36f4a
- Hero (mobile): https://media.lvly.design/library/cleanshot-com/mobile-hero.webp?v=e4819eb4
- Full page (desktop): https://media.lvly.design/library/cleanshot-com/full.jpg?v=7a9a4b4c
- Full page (mobile): https://media.lvly.design/library/cleanshot-com/mobile-full.jpg?v=8d6e3156
- Clip preview (mp4): https://media.lvly.design/library/cleanshot-com/video-fhdtfe.preview.mp4?v=8bdda152

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.

## Steal-worthy details

- One accent, three jobs: `#0d44e8` is the nav pill, the primary CTA and the two coloured words in the headline — and appears nowhere else, so it always means "act".
- The headline is a comparison in two lines ("There are average capture apps. / And there's CleanShot.") with only the punchline words tinted blue — color as emphasis, not decoration.
- Button geometry: 40px tall, 14px radius, 15px at weight 550, 16px side padding; the secondary is white with a 1px hairline and a play glyph, sitting flush beside the primary.
- A black eyebrow pill with a play icon announces the new feature above the headline — dark on the pale ground so it reads before anything else.
- A tiny "30-Day Money-Back Guarantee ›" link under the CTA pair carries the reassurance without a badge or a trust bar.
- Hero media is a split two-up: a wide video card (poster over a macOS wallpaper) and a narrow testimonial card with prev/next arrows — the proof sits beside the demo.
- Bento tiles at 20px radius with product-derived fills (navy sweep, pastel sky, pink-cyan wash, charcoal rings) and a white or dark title depending on the fill; an outlined ISO 27001 chip inside the security tile.
- Section headers are left-aligned with the section CTA pushed to the right on the same row — headline, one-line body, button in a single band.
- Radii vocabulary is deliberate: 20px for cards, 14px for buttons, 40–48px for the large media panels, full round for the arrow controls.

## Style recipe

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.