# shotbase.com

Source: https://shotbase.com/
Captured: 2026-11-05
Tags: saas, landing, light, both, minimal, bento, corporate-clean, premium, calm, confident, friendly, human
Colors: #96849f, #18160f, #c8aab2, #413836, #7c6970, #604f4c, #d8cfd8, #f8f7f7
Type (h1): TWK Everett Medium · 56px/67.2px · 500 · tracking -1.4px — "Capture, edit, organize, and share in one place"
Type (h2): TWK Everett Medium · 48px/57.6px · 500 · tracking -1.4px — "Whatever's on your screen, capture it"
Type (h3): TWK Everett Regular · 28px/33.6px · 400 · tracking -1.4px — "Screenshots, exactly how you need them."
Type (body): Google Sans · 16px/24px · 400 · tracking -0.3px — "Beautiful screenshots, recordings, and more with private AI running on your Mac "
Type (small): Google Sans · 12px/18px · 600 · tracking -0.36px — "Includes 7-day free trial"
Type (button): sans-serif · 12px/normal · 400 — "Download"
Button: "Download" — fill #00a7f5, text #ffffff, radius 16px, border 0px, padding 16px 16px, height 42px, type 12px/400
Radii: 300px (10), 16px (7), 30px (3), 22px (1), 8px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/shotbase-com/hero.webp?v=0fa00aca
- Page crop (mid-1): https://media.lvly.design/library/shotbase-com/mid-1.webp?v=49b6567c
- Page crop (mid-2): https://media.lvly.design/library/shotbase-com/mid-2.webp?v=f937df24
- Hero (mobile): https://media.lvly.design/library/shotbase-com/mobile-hero.webp?v=5abf96f5
- Full page (desktop): https://media.lvly.design/library/shotbase-com/full.jpg?v=dbbf53ca
- Full page (mobile): https://media.lvly.design/library/shotbase-com/mobile-full.jpg?v=12dc7722
- Clip preview (mp4): https://media.lvly.design/library/shotbase-com/video-hk8f83.preview.mp4?v=353761c6

A macOS screen-capture app sold with Apple-keynote composure: a dusk alpine landscape in mauve and rose fills the first screen, then dissolves into a white page of centered headlines and soft gray cards. The tension comes from three unlike materials held in one system: a painterly natural backdrop, a near-black capsule nav that never leaves, and one saturated sky blue reserved for the action. TWK Everett at weight 500 with tight tracking gives the headlines a calm, grotesque authority, while Google Sans keeps the body copy approachable. The page ends in pure black, so the visitor leaves in a darker register than the one they arrived in.

## Steal-worthy details

- Dark capsule nav on every background: a centered, content-width #18160f pill with a soft shadow and a darker outer ring stays fixed down the page, reading equally well over the landscape, the white sections and the black footer because it carries its own ground.
- Beveled sky-blue button: #00a7f5 fill with white text, a white Apple glyph, a lit inner edge and a slightly deeper rim, so the one saturated control on the page looks physically pressable, like a macOS control rather than a flat web rectangle.
- Landscape dissolving into the page: the mountain image has no bottom edge; it feathers to pure white behind the product frame, turning an expensive-looking full-bleed hero into a seamless handoff to the white content below.
- Product frame straddling the fold: a wide, 16px-radius dark video window starts at 60% of the viewport height and overlaps the hero's fade, with its play button deliberately cut by the fold, so the first screen already asks for a scroll.
- Objection-handling microline: under the CTA, two 12px weight-600 facts, "Includes 7-day free trial" and "No card required", each get a tiny glyph and a mid-dot separator at reduced white opacity, so they answer the objection without competing with the button.
- Imagery melting into its card: inside #f8f7f7 tiles with a 30px radius, the portrait and 3D mockup fade into the tile's gray rather than sitting in a cropped frame, leaving a centered title and two-line description on what feels like one continuous surface.
- Single loud moment inside a quiet tile: a ringed "9s" countdown in saturated red on a white disc overlaps the portrait's top edge; it is the only red in the section, so one product behavior gets all the attention.
- Gray pill eyebrow over every section: a one- or two-word label such as "Organize" or "Loved by many" in a 300px-radius gray capsule, medium-weight and small, repeats above each centered headline and gives a long page a steady rhythm without numbering or rules.
- Social-post wall as testimonial masonry: four staggered columns of white cards with faint hairlines keep each quote's raw, lowercase voice, real handle and blue verified check, and full-color video reaction cards break up the text so the wall reads as live chatter rather than curated praise.
- Display stand vanishing into the footer: below the closing product shot, a gray monitor stand fades into pure #000000, using one gradient to bridge the final image and a sparse footer of white-headed link columns.
- One tracking value across the heading scale: -1.4px holds at 56px, 48px and 28px, which is relatively tighter as the type shrinks, so the smaller TWK Everett Regular subheads stay as compact and deliberate as the display lines.

## Style recipe

Build a composed, Apple-adjacent product page on a pure white canvas (#ffffff) with warm near-black ink (#18160f). Reserve one saturated accent, sky blue #00a7f5, for primary actions and small status marks such as verified checks; let everything else stay neutral.

Type: set headings in TWK Everett (or a similar neutral grotesque) at weight 500, 56px/67px for the h1 and 48px/58px for h2s, tracked -1.4px and center-aligned over two balanced lines. Use Everett Regular at 28px/34px, also -1.4px, for subheads. Set body in Google Sans 16px/24px at weight 400, tracked -0.3px, and fine print at 12px/18px, weight 600, tracked -0.36px. Keep body copy to two centered lines where possible, in a softened gray rather than full ink.

Shape: use 300px capsules for navigation and eyebrow labels, 30px radii for large content tiles, 22px for mid-size panels and 16px for buttons and media frames. Fill tiles with a barely-there #f8f7f7 and no visible border; give white cards a hairline and a very faint shadow only when they sit on white.

Controls: make the primary button a solid #00a7f5 with white text, a leading glyph, 16px padding and a 42px minimum height, then add a light inner top edge and a slightly darker rim so it feels tactile. Keep the navigation as a centered, floating, content-width near-black capsule with muted light-gray links, a persistent accent button at its right end, and a soft shadow, so it works over any background.

Atmosphere: open on one full-bleed, soft-focus natural image in a dusty mauve and rose range (around #96849f and #c8aab2), with white display type directly on it, and feather its lower edge into the page white. Overlap the transition with a large product frame that crosses the fold. Fade imagery into its surrounding surface instead of cropping it hard, and allow one small saturated element per tile as a focal point. Give sections generous vertical space, put a small gray capsule eyebrow above each centered headline, and punctuate the white with occasional near-black or deep navy full-width bands. Close in pure #000000.