# sohna.dev

Source: https://sohna.dev/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, playful, calm, confident, playful, technical, friendly
Colors: #fdfdfd, #cfcfcf, #0c0c0c, #b0b0b0, #303030, #707070, #4e4e4e, #8f8f8f
Type (h1): Inter · 76px/92px · 700 · tracking -3px — "Tools for designers and engineers who care about craft"
Type (h2): Inter · 24px/32px · 700 · tracking -0.16px — "Sohna Waterlemon"
Type (body): Inter · 18px/24px · 400 — "Generate consistent icons for your product with AI Skills"
Type (button): Inter · 18px/24px · 700 — "Join Waitlist"
Button (primary): "Join Waitlist" — fill #020202, text #fbfbfb, radius 14px, border 0px, padding 16px 24px, height 56px, type 18px/700
Radii: 24px (3), 14px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/sohna-dev/hero.webp?v=5953ef6f
- Hero (mobile): https://media.lvly.design/library/sohna-dev/mobile-hero.webp?v=eb2b3a9a
- Full page (desktop): https://media.lvly.design/library/sohna-dev/full.jpg?v=82cf7bc5
- Full page (mobile): https://media.lvly.design/library/sohna-dev/mobile-full.jpg?v=22ad3807
- Clip preview (mp4): https://media.lvly.design/library/sohna-dev/video-wx2l29.preview.mp4?v=e7c99faa

A one-screen studio page that fits its entire pitch above the fold: a small clover-mark wordmark, a two-line Inter headline at 76px/700 with −3px tracking, and a row of three identical product cards on a barely-there off-white ground. The palette is deliberately empty — near-white, mid grays and near-black — so the only color on the page comes from three glossy 3D app icons (a yellow watermelon slice, an orange motion ribbon, a blue glass cube) that behave like Apple app icons on a shelf. Everything else is restraint: 24px card radius, 14px pill-ish black buttons, one weight of gray body text, and a footer that is just a copyright line. It reads as a design-engineer's calling card — precise type, generous whitespace, and toy-like illustration doing all the personality work.

## Steal-worthy details

- The headline ends with a ghosted, light-gray copy of the logo mark as punctuation — the brand sits inside the sentence instead of above it.
- Zero chrome: no nav, no links, no hero image. Logo, headline, three cards, copyright. The page height (904px) is the viewport.
- Cards are tonal, not outlined: `#f7f7f7`-ish fill on `#fdfdfd` page, 24px radius, no border, no shadow — the hierarchy is a one-step tint.
- Every card is a fixed template — icon top-left, ~110px of air, bold title, two-line description, black CTA — so the differing icons carry all the differentiation.
- The 3D icons are rendered with soft top-light and a slight tilt, giving a flat page real depth without any gradient in the layout itself.
- Buttons: solid `#020202`, 14px radius, 16×24 padding, 18px/700 label, height 56 — chunky, tactile, and the only hard black shapes below the headline.
- Tight negative tracking on the display size (−3px at 76px) against untracked 18px body: one typeface, two voices.

## Style recipe

Build a light, one-typeface, single-screen page. Use Inter for everything: display at 72–80px / weight 700 / letter-spacing −3px / line-height ~1.2; body at 18px / 400 / line-height 24px, color `#303030`; card titles 22–24px / 700 near-black `#0c0c0c`. Page ground `#fdfdfd`; surfaces one step darker (`#f6f6f6`–`#f7f7f7`) with 24px radius, no border, no shadow. Keep the palette achromatic — the only saturated color lives in illustration or icons, ideally rendered 3D objects with soft top lighting on a transparent ground, sized ~110–120px and left-aligned in their card. Primary buttons are solid `#020202` with `#fbfbfb` text, 14px radius, 16px 24px padding, 18px/700 labels, ~56px tall; use one style everywhere and never a secondary variant. Layout: a 1140px content column with a small wordmark top-left, headline occupying ~40% of the viewport, then an equal-width 3-up grid with ~32px gutters, then a single-line footer. Strip navigation entirely if the page has fewer than four destinations. Use a ghosted gray logo glyph as an inline ornament at the end of a headline. Prefer everything above the fold over any scrolling narrative.