# getopen.so

Source: https://getopen.so/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, bento, calm, trustworthy, friendly, confident, technical
Colors: #fcfdfd, #d3e0cc, #9bbff1, #b2b3b4, #cedaf6, #8d8c8b, #7492e9, #466fe1
Type (h1): interTight · 60px/63.6px · 500 · tracking -1.5px — "A simple, easy-to-use Google Analytics alternative"
Type (h2): interTight · 36px/40px · 400 · tracking -0.9px — "Three steps from nothing to numbers, and the first one is a copy-paste."
Type (h3): interTight · 16px/24px · 500 · tracking -0.4px — "Add it to your site"
Type (body): interTight · 24px/32px · 400 — "Understand your website traffic, visitors, and conversions without the complexit"
Type (small): interTight · 11px/16.5px · 500 · tracking 2.2px — "YOU'RE IN GOOD COMPANY"
Type (button): interTight · 14px/20px · 500 — "Get Started Free"
Button (primary): "Get Started Free" — fill #3567f6, text #ffffff, radius 9999px, border 0px, padding 6px 16px, height 36px, type 14px/500
Radii: 10px (25), 9999px (20), 8px (12), 28px (6), 32px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/getopen-so/hero.webp?v=94522922
- Page crop (mid-1): https://media.lvly.design/library/getopen-so/mid-1.webp?v=b40b1314
- Page crop (mid-2): https://media.lvly.design/library/getopen-so/mid-2.webp?v=cf999098
- Hero (mobile): https://media.lvly.design/library/getopen-so/mobile-hero.webp?v=5f52d797
- Full page (desktop): https://media.lvly.design/library/getopen-so/full.jpg?v=5ffc70e2
- Full page (mobile): https://media.lvly.design/library/getopen-so/mobile-full.jpg?v=f8d83744
- Clip preview (mp4): https://media.lvly.design/library/getopen-so/video-7olvxz.preview.mp4?v=00b0ed1b

Open Analytics sells "Google Analytics without the complexity" and the page performs that promise: a near-white ground (#fcfdfd), Inter Tight at 60px/500 with −1.5px tracking, and a single cornflower blue (#466fe1) that is spent on exactly the words that matter — the second line of the headline and a soft highlight pill behind "without the complexity". Everything else is grayscale and generously spaced. The hero cascades from a "NEW · See what's new" pill to a two-line headline, a two-line subhead, a blue pill CTA with a white circular chevron beside a gray secondary pill, then a row of laurel-flanked proof points in letterspaced small caps (Product Hunt #2, AGPLv3, hosted in Helsinki, no cookie banner). Below, features are laid out as a three-column bento of pale-gray rounded cards, each with a floating white mock of the actual UI (a countries table, three ring gauges, an MCP chat thread) above a tinted circle icon, a coloured feature title and two lines of plain 18px prose. The sticky header floats as a translucent pill. It reads as calm, competent European SaaS — Plausible's neighbourhood, with a little more Apple in the type.

## Steal-worthy details

- Two-tone headline: line one in near-black, line two (the product category) in the brand blue — one color doing the work of a subhead.
- The subhead's key phrase sits in a soft blue-tinted highlight pill (rounded, ~4px inset), like a marker stroke — quieter than bold, more pointed than italics.
- Primary CTA pill carries a white circular chevron badge at its right edge, inside the button; the secondary is the same pill in light gray with dark text.
- Proof points framed by thin laurel-wreath glyphs, with a letterspaced 10px uppercase label above a 14px value — a trust strip without logos.
- Feature cards are pale gray (#f5f6f7-ish) at 28–32px radius with a white product mock floating inside at 10px radius, so the mock reads as a window sitting on a mat.
- Each feature title takes its own hue (pink Filters, green Funnels, blue MCP) matched to a tinted outline-circle icon above it — color as a per-feature key, not decoration.
- Ring gauges for funnel steps: three thin arcs in graded hues with the percentage inside and a tiny caption below, plus a faint helper line ("2% make it all the way through").
- Sticky nav shrinks to a translucent, blurred pill that floats over content, holding logo, three links and the one blue CTA.
- A live-visitor list uses generated animal aliases ("Amber Falcon", "Nimble Lynx") with monospace paths and flag/browser/OS icon triplets — playful privacy made visible.
- Two-tone closing statement: first clause in near-black, the second half in mid-gray, at display size.

## Style recipe

Build on a near-white ground (#fcfdfd, cards on #f4f5f6) with near-black text (#26262a) and exactly one accent, cornflower blue #466fe1 — use it for one line of the headline, link-coloured feature titles, the primary CTA and nothing structural. Set everything in Inter Tight: display 60px/500 with −1.5px tracking and ~1.06 line-height, subheads 24px/400 in a mid-gray, body 18px/400, labels 10–11px uppercase with +0.15em tracking. Radii come in two sizes: pills (9999px) for buttons, badges and the floating nav; 28–32px for large section cards, 8–10px for product mocks and inner tables. Buttons are 40px pills, solid blue with white text (primary) or light gray with dark text (secondary); the primary may carry a white circular icon badge inside its right end. Compose feature sections as a three-column bento of equal gray cards, each stacking a white UI mock, a 40px tinted-outline circle icon, a coloured 22px title and two lines of gray prose, with 24–32px inner padding. Emphasise a phrase inside prose by wrapping it in a rounded blue-tinted highlight (rgba(70,111,225,0.12), 4px radius) instead of bold. Shadows are minimal: mocks get a 1px hairline border plus a soft, wide, low-alpha shadow; the sticky nav gets backdrop blur and 60–70% white. Use additional hues (pink, green, purple) only as per-item keys across a set of siblings, never as a second brand color. Keep vertical rhythm generous (120–160px between sections) and let whitespace, not rules, separate content.