shotbase.com

Shotbase — Capture, Record, Edit, and Share in One Placesaved 3h ago · captured 3h ago

Eleven details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #96849F

ground#96849f·40.15%#18160f·25.74%#c8aab2·16.16%#413836·4.67%#7c6970·4.46%#604f4c·3.11%#d8cfd8·2.05%#f8f7f7·1.51%

Sized by coverage · click to copy.

Typography3 families · 5 styles · TWK Everett Medium, TWK Everett Regular, Google Sans

Capture, edit, organize, and share in one place

TWK Everett Medium · 56/67 · 500 · -1.4px

Whatever's on your screen, capture it

TWK Everett Medium · 48/58 · 500 · -1.4px

Screenshots, exactly how you need them.

TWK Everett Regular · 28/34 · 400 · -1.4px

Body

Beautiful screenshots, recordings, and more with private AI running on your Mac

Google Sans · 16/24 · 400 · -0.3px

Small

Includes 7-day free trial

Google Sans · 12/18 · 600 · -0.36px

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 #00a7f5 · label #ffffff · radius 16px · border 0px · padding 16px 16px · height 42px · type 12px / 400

Shape5 radii · 22 uses

300px10 uses · 45%

16px7 uses · 32%

30px3 uses · 14%

22px1 use · 5%

8px1 use · 5%

AnalysisA 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…

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.

Style recipeBuild a composed, Apple-adjacent product page on a pure white canvas (#ffffff) with warm near-black ink (#18160f).

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.

Details11 worth noting

shotbase.com — the captured page — Landing, 1440 × 900 · captured Nov 5, 2026

1Self-contained dark capsule nav
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.
2Beveled macOS-style CTA
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.
3Hero image feathered into white
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.
4Product video cut by the fold
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.
5Icon-led trial reassurance line
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.
6Card media fading into tile gray
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.
7Red countdown disc as focal point
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.
8Pill eyebrow above centered headlines
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.
9Tweet-style testimonial masonry
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.
10Monitor stand fading into footer
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.
11Fixed heading tracking across sizes
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.