screenity.io

Screenity — Privacy-friendly screen recorder & video editorsaved 26d ago · captured 26d ago

Eight details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #E4ECF4

ground#e4ecf4·70.36%#bdbec1·15.60%#bc5a08·2.89%#92969d·1.31%#6c7077·1.16%#a6c4f3·1.14%#b66e35·0.94%#2d2f33·0.88%

Sized by coverage · click to copy.

Typography2 families · 5 styles · Bricolage Grotesque, Public Sans

Record your screen. Build it, scene by scene

Bricolage Grotesque · 72/78 · 400 · -2.52px

From recording, to something worth sending.

Bricolage Grotesque · 56/56 · 400 · -1.4px

Record your screen.

Bricolage Grotesque · 19/24 · 600 · -0.266px

Body

Screenity is a screen recorder and video editor in one. Record your screen, add

Public Sans · 17/26 · 400 · normal

Small

Used by 280,000+ people

Public Sans · 13/normal · 500 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign up2 styles

Sign upGet started

primary · fill #4d8bf5 · label #ffffff · radius 9999px · border 0px · padding 0px 16.8px · height 40px · type 13px / 600

secondary · fill — · label #ffffff · radius 9999px · border 1px · padding 0px 40px · height 58px · type 16px / 600

Shape5 radii · 102 uses

999px55 uses · 54%

50%16 uses · 16%

28px11 uses · 11%

9999px10 uses · 10%

14px10 uses · 10%

AnalysisScreenity's landing page is a soft, airy SaaS surface — a near-white blue-gray ground (#f6f7fb) that fades into a pale sky-blue wash behind the hero — carrying a very large Bricolage Grotesque head…

Screenity's landing page is a soft, airy SaaS surface — a near-white blue-gray ground (#f6f7fb) that fades into a pale sky-blue wash behind the hero — carrying a very large Bricolage Grotesque headline (72px, weight 400, −2.5px tracking) whose second line drops to gray and boxes the word "scene" twice in a rounded blue keyline that mimics a selection frame, a wink at the product's own editing UI. Everything else is pill-shaped: the 40px solid blue "Sign up" button (#4d8bf5, 9999px radius), the "Get started" CTA, the social-proof avatar strip, the nav tabs. Below, the product itself is the imagery — a huge rounded app frame with a purple-orange gradient video canvas — and features unfold as a bento of white cards on the tinted ground with 28px radii and a whisper of shadow, each holding a floating, hand-composed prop (caption chips with a struck-out "uh", tilted device mockups, a type-animation picker) and a short Public Sans caption. The mood is bright, generous and unthreatening, with color supplied almost entirely by the screenshots and a single blue accent.

Style recipeBuild a light, friendly product site on a near-white blue-gray ground (#f6f7fb) with white cards (#ffffff) and one blue accent (#4d8bf5) reserved for primary buttons, links and emphasis frames.

Build a light, friendly product site on a near-white blue-gray ground (#f6f7fb) with white cards (#ffffff) and one blue accent (#4d8bf5) reserved for primary buttons, links and emphasis frames. Set display type in Bricolage Grotesque at weight 400 and very large sizes (64–72px) with tight tracking (−0.035em, line-height 1.08); use body copy in Public Sans at 17px/1.5 in a dark gray (#2d2f33), with secondary lines in #6c7077. Make every control a pill: 9999px radius, 40px tall, 13–15px semibold label, solid blue fill with white text for primary, white with a hairline for secondary. Frame key words in headlines with a 3px accent-coloured rounded keyline. Lay features out as a bento grid of white cards with 28px radius, 24–32px padding and a barely-there shadow (0 1px 2px rgba(0,0,0,.04) plus 0 8px 24px rgba(30,40,60,.06)); inside each card stage a single illustrative prop — a tilted mockup, a chip, a mini control panel — with a soft real shadow, then a bold sentence-case title ending in a period and a two-line gray caption. Wrap app screenshots in a large 28px-radius frame and let the screenshots carry the saturated color; keep the page chrome monochrome. Use pale blue gradient washes (#f6f7fb → #e4ecf4) behind hero sections instead of solid panels, and collapse the nav into a floating white pill bar on scroll.

Details8 worth noting

screenity.io — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Headline word-boxing keyline
Headline word-boxing: key words in the second line sit in a 3px blue rounded keyline with small notch marks at the corners, echoing the app's own selection handles — brand behavior turned into typography.
2Two-tone headline
Two-tone headline: line one near-black, line two mid-gray (#6c7077-ish), so the emphasis reads as a hierarchy rather than a color change.
3Social-proof avatar pill
Social-proof pill above the H1: overlapping avatars + "Used by 280,000+ people" in a white pill with soft shadow, a small trust signal that doesn't compete with the headline.
4Vertical blue hero fade
The hero ground is a vertical fade from off-white to a pale blue (#e4ecf4 / #a6c4f3 tints) that quietly frames the enormous product screenshot rather than a flat panel.
5Bento feature cards with staged props
Bento feature cards with 28px radius on a tinted ground; each card's illustration is a staged, slightly rotated prop with a real drop shadow, and the caption sits under it left-aligned with a bold sentence-case title ending in a full stop.
6Sticky nav collapses to pill bar
Sticky nav collapses into a floating white pill bar with a centered link cluster once scrolled — the same pill language as the buttons.
7Screenshots carry the color
Product screenshots supply the saturated color (orange/pink/purple gradients), so the page's chrome can stay almost monochrome and still feel lively.
8Privacy footnote under the CTA
A tiny "Made and hosted in Europe, privacy-friendly." line under the CTA — a trust footnote as a design element.