# supaste.com

Source: https://www.supaste.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, confident, calm, premium, friendly, optimistic
Colors: #1384f9, #5bbcfe, #9eddfe, #0f44cd, #060809, #38a5fe, #262a29, #ecf2f7
Type (h1): Inter Display · 20px/20px · 600 · tracking -0.4px — "Clipboard history"
Type (h2): Inter Display · 60px/60px · 700 · tracking -3px — "Your clipboard, wherever you need it"
Type (h3): Inter Display · 50px/50px · 700 · tracking -2.5px — "Smarter, Faster, and Connected Across Your Mac"
Type (body): Inter Display · 20px/28px · 400 · tracking -0.2px — "Supaste saves your clipboard and screenshots in a beautiful visual history, auto"
Type (small): Inter Display · 12px/16.8px · 600 — "Download"
Type (button): sans-serif · 12px/normal · 400 — "Download"
Button (primary): "Download" — fill #ffffff, text #000000, radius 8px, border 0px, padding 8px 16px, height 33px, type 12px/400
Radii: 30px (45), 4px (21), 12px (13), 100px (8), 16px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/supaste-com/hero.webp?v=d60960ea
- Page crop (mid-1): https://media.lvly.design/library/supaste-com/mid-1.webp?v=7ccdd40d
- Page crop (mid-2): https://media.lvly.design/library/supaste-com/mid-2.webp?v=a55140de
- Hero (mobile): https://media.lvly.design/library/supaste-com/mobile-hero.webp?v=49412a8a
- Full page (desktop): https://media.lvly.design/library/supaste-com/full.jpg?v=726eb910
- Full page (mobile): https://media.lvly.design/library/supaste-com/mobile-full.jpg?v=d6817a5c
- Clip preview (mp4): https://media.lvly.design/library/supaste-com/video-u4g927.preview.mp4?v=e7d52008

Supaste is a Mac clipboard-history app sold the Apple way: one saturated sky-blue gradient fills the whole hero (deep #0f44cd at the top fading through #1384f9 to a pale #9eddfe haze), white Inter Display set at 80px/700 with −4px tracking says "Copy once." and a light italic serif answers "Reuse anytime." beneath it, and everything else is white on white. The nav is a floating black pill fused to the top edge with rounded 30px shoulders, echoed at the bottom of the hero by a notch-shaped product mock that slides up out of the fold like a MacBook notch panel. Below, each feature lives in a full-width off-white (#ecf2f7-ish) rounded panel holding a single screenshot on a lush Sonoma-style wallpaper, with a huge tight black headline underneath. Corner radii run big — 30px panels, 100px pills, 12–16px cards — and the palette is disciplined to blue, black and white, so the product's own bright blue icon is the only color that ever competes with the hero.

## Steal-worthy details

- The top nav is a black pill that hangs from the viewport edge with rounded lower corners and inverted "shoulders" blending it into the page top, so it reads as part of the chrome rather than a bar.
- Two-line hero headline mixing a heavy tight sans ("Copy once.") with a light italic serif ("Reuse anytime.") — one contrast move, then everything else stays sans.
- Hero gradient runs vertically from deep royal blue to a near-white sky, so the white headline sits on the dark end and the product mock emerges at the light end.
- Product mock is shaped like a macOS notch panel: a wide dark bar with a raised center section and rounded shoulders, peeking up from the fold with a tabbed "History 24 · Prompts 24 · Colors 24" pill row and a horizontal card strip.
- A small Apple-glyph eyebrow ("Clipboard history") and Apple-glyph CTAs ("Download for macOS") in a white 100px pill with black text — the platform logo as the brand's kicker.
- Three tiny trust lines under the CTA in muted small text ("One-time purchase · Fully offline and privacy · macOS Sonoma 14.0 or later") instead of a badge row.
- Feature sections are full-width 30px-radius off-white panels containing one large 16px-radius screenshot on a photographic wallpaper, followed by an oversized centered headline ("Multi-Clip Copy") — screenshot first, words second.

## Style recipe

Build a light, Apple-adjacent product landing. Base is pure white #ffffff; sectional panels are a barely-there cool gray (#f5f7fa to #ecf2f7) with 30px radius and 16–24px inset. The one color is a saturated blue ramp: #0f44cd → #1384f9 → #38a5fe → #5bbcfe → #9eddfe, used as a single vertical hero gradient (dark on top, pale at the bottom) and as the app-icon blue nowhere else. Ink is near-black #060809; secondary text #262a29 at 60–70% opacity. Type is Inter Display throughout: display 72–80px / 700 / line-height 1.0 / letter-spacing −4px (about −0.05em); section headlines 48–56px / 700 / −2px; body 20px / 400 / 28px line-height / −0.2px; fine print 12–13px. Allow exactly one contrasting display move: a light italic high-contrast serif for the second line of the hero headline, same size as the sans line. Navigation is a black (#060809) floating pill fused to the top edge, 100px radius on the lower corners, white links at 15px/400, with a white pill CTA inside it. Primary buttons are white 100px pills, black text 16px/600, 16px × 28px padding, with a platform glyph before the label; secondary actions are text-only. Radii scale: 100px pills, 30px panels, 16px screenshots, 12px cards, 4px chips. Shadows are soft and large only under floating mocks (0 24px 60px rgba(0,0,0,.25)); flat everywhere else. Screenshots sit on photographic or wallpaper backgrounds inside their panels, never on plain gray. Center-align hero and section headlines; keep body copy to a 560–620px measure. No borders, no icons beyond the platform glyph, no second accent.