# superfine.studio

Source: https://www.superfine.studio/
Captured: 2026-09-13
Tags: agency, landing, light, both, minimal, corporate-clean, confident, calm, trustworthy, premium
Colors: #fbfcfc, #0a2723, #cdd1d1, #687775, #a9b1b1, #8b908f, #4c5150, #313231
Type (h2): Inter · 22px/33px · 600 — "Startups don’t need big design teams. They need momentum"
Type (body): Inter Display · 18px/23.4px · 400 — "We help startups move fast and look sharp - across product, brand, motion, and b"
Type (small): Inter · 12px/16.8px · 400 — "AI Data Agent for your SQL"
Type (button): sans-serif · 12px/normal · 400 — "Book a Call"
Button (primary): "Book a Call" — fill #171717, text #ffffff, radius 100px, border 0px, padding 0px 26px, height 40px, type 12px/400
Radii: 60px (10), 8px (9), 12px (9), 6px (5), 100px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/superfine-studio/hero.webp?v=ab495b9f
- Page crop (mid-1): https://media.lvly.design/library/superfine-studio/mid-1.webp?v=76459df6
- Page crop (mid-2): https://media.lvly.design/library/superfine-studio/mid-2.webp?v=7d4e20a9
- Hero (mobile): https://media.lvly.design/library/superfine-studio/mobile-hero.webp?v=4b5f497c
- Full page (desktop): https://media.lvly.design/library/superfine-studio/full.jpg?v=3ec0cd59
- Full page (mobile): https://media.lvly.design/library/superfine-studio/mobile-full.jpg?v=0ed7a5cc
- Clip preview (mp4): https://media.lvly.design/library/superfine-studio/video-wdfge2.preview.mp4?v=8aafeeef

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.

## Steal-worthy details

- 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.
- Client logos rendered in light gray and masked with a horizontal fade at both ends, so the strip feels infinite without a marquee.
- 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.
- 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.
- 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.
- Headline set at 600 weight, tight tracking, two short lines, with a plain 18px sentence beneath — restraint does the selling.

## Style recipe

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.