superfine.studio

Superfine Studio | Top-tier product and brand designsaved 26d ago · captured 26d ago

Six details, five pinned.

View as Markdown ↗

Colors8 colors · ground #FBFCFC

ground#fbfcfc·78.96%#0a2723·9.79%#cdd1d1·5.05%#687775·2.55%#a9b1b1·1.51%#8b908f·0.86%#4c5150·0.66%#313231·0.47%

Sized by coverage · click to copy.

Typography2 families · 3 styles · Inter, Inter Display

Startups don’t need big design teams. They need momentum

Inter · 22/33 · 600 · normal

Body

We help startups move fast and look sharp - across product, brand, motion, and b

Inter Display · 18/23 · 400 · normal

Small

AI Data Agent for your SQL

Inter · 12/17 · 400 · normal

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

ButtonsBook a Call1 style

Book a Call

primary · fill #171717 · label #ffffff · radius 100px · border 0px · padding 0px 26px · height 40px · type 12px / 400

Shape5 radii · 37 uses

60px10 uses · 27%

8px9 uses · 24%

12px9 uses · 24%

6px5 uses · 14%

100px4 uses · 11%

AnalysisSuperfine's landing is a Framer-built studio site that sells "design, done right" by looking like the cleanest SaaS page in the room.

Superfine's landing is a Framer-built studio site that sells "design, done right" by looking like the cleanest SaaS page in the room. A near-white ground (#fbfcfc) carries a heavy, tight Inter Display headline set dead center, one ghost pill and one glossy near-black pill (#171717, 100px radius, a soft drop shadow that makes it read as a physical button), then a faded client-logo strip that dissolves at both edges. The first case study is framed in a deep forest-green slab (#0a2723) with 60px corners, and the "why us" section is three raised white cards whose top halves are miniature product UIs — Slack roster, Kanban badges, a Figma layer list with a live cursor — each fading out before it ends. The mood is calm, expensive and frictionless: nothing is loud, every edge is rounded, and the only color is the work itself. A floating pill nav with the SF monogram replaces the header once you scroll.

Style recipeUse a near-white page ground (#fbfcfc, or pure #ffffff) with white cards raised by a hairline (#cdd1d1 at low alpha) and a soft, wide, low-opacity shadow.

Use a near-white page ground (#fbfcfc, or pure #ffffff) with white cards raised by a hairline (#cdd1d1 at low alpha) and a soft, wide, low-opacity shadow. Type is Inter throughout: display lines in Inter Display at 600 weight, letter-spacing −0.02em, 56–72px, centered, two short lines max; body in Inter 18px/1.3 in a gray-green mid tone (#687775); headings in cards at 22px/600 in #171717. Text color is near-black #171717, never pure black. Buttons are pills (radius 100px, height 40, padding 0 26px, 12–15px text): primary is #171717 with a subtle top-light gradient and a shadow like 0 8px 20px rgba(0,0,0,.25); secondary is a flat #f1f3f3 pill with #171717 text and no border. Radii otherwise live at 8/12px for inner elements and 60px for hero-scale media frames. Introduce exactly one saturated field per page — a deep forest green (#0a2723) slab with 60px corners — and keep every other surface white or gray. Illustrate features with faded, cropped miniature UI (real-looking rows, badges, cursors) that dissolves into the card via a vertical white gradient mask. Fade logo strips at both edges with a horizontal mask rather than animating them. On scroll, swap the full-width header for a floating centered pill nav with a small square monogram and the CTA pill inside it. Generous vertical rhythm (120–160px between sections), everything centered, no rules or dividers — separation comes from cards, tonal shifts and whitespace alone.

Details6 worth noting

superfine.studio — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Two-tier pill button pair
Two-tier button hierarchy in one row: a flat pale-gray ghost pill beside a near-black pill with a faint vertical gradient and a spread shadow, so the primary action looks physically raised.
2Edge-faded client logo strip
Client logos rendered in light gray and masked with a horizontal fade at both ends, so the strip feels infinite without a marquee.
3Deep green case-study slab
The case-study reel opens in a deep green (#0a2723) frame with 60px corners on a white page — a single dark slab that gives the section weight without switching the whole scheme dark.
4Cropped mini-UI feature cards
Feature cards whose illustrations are cropped, faded mini-UIs (a Slack availability list, task-status badges, a Figma layer panel with a "Superfine" cursor) — the product shows itself and then vanishes into white before the copy starts.
5Floating pill nav on scroll
Sticky nav collapses into a floating white pill with a square monogram at the left and the CTA at the right, shadowed so it hovers over content.
6Two-line restrained headline
Headline set at 600 weight, tight tracking, two short lines, with a plain 18px sentence beneath — restraint does the selling.