# screenity.io

Source: https://screenity.io/
Captured: 2026-09-13
Tags: saas, landing, light, both, corporate-clean, bento, playful, friendly, optimistic, confident, playful, trustworthy
Colors: #e4ecf4, #bdbec1, #bc5a08, #92969d, #6c7077, #a6c4f3, #b66e35, #2d2f33
Type (h1): Bricolage Grotesque · 72px/77.76px · 400 · tracking -2.52px — "Record your screen. Build it, scene by scene"
Type (h2): Bricolage Grotesque · 56px/56px · 400 · tracking -1.4px — "From recording, to something worth sending."
Type (h3): Bricolage Grotesque · 19px/23.75px · 600 · tracking -0.266px — "Record your screen."
Type (body): Public Sans · 17px/25.5px · 400 — "Screenity is a screen recorder and video editor in one. Record your screen, add "
Type (small): Public Sans · 13px/normal · 500 — "Used by 280,000+ people"
Type (button): Public Sans · 13px/normal · 600 · tracking -0.065px — "Sign up"
Button (primary): "Sign up" — fill #4d8bf5, text #ffffff, radius 9999px, border 0px, padding 0px 16.8px, height 40px, type 13px/600
Button (secondary): "Get started" — text #ffffff, radius 9999px, border 1px, padding 0px 40px, height 58px, type 16px/600
Radii: 999px (55), 50% (16), 28px (11), 9999px (10), 14px (10)

## Images

- Hero (desktop): https://media.lvly.design/library/screenity-io/hero.webp?v=59c23512
- Page crop (mid-1): https://media.lvly.design/library/screenity-io/mid-1.webp?v=4e687608
- Page crop (mid-2): https://media.lvly.design/library/screenity-io/mid-2.webp?v=258e8858
- Hero (mobile): https://media.lvly.design/library/screenity-io/mobile-hero.webp?v=81854e9e
- Full page (desktop): https://media.lvly.design/library/screenity-io/full.jpg?v=99f810a2
- Full page (mobile): https://media.lvly.design/library/screenity-io/mobile-full.jpg?v=77944ca2
- Clip preview (mp4): https://media.lvly.design/library/screenity-io/video-s1iizm.preview.mp4?v=d42dc548

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- 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.
- 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.
- Sticky nav collapses into a floating white pill bar with a centered link cluster once scrolled — the same pill language as the buttons.
- Product screenshots supply the saturated color (orange/pink/purple gradients), so the page's chrome can stay almost monochrome and still feel lively.
- A tiny "Made and hosted in Europe, privacy-friendly." line under the CTA — a trust footnote as a design element.

## Style recipe

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.