soffi.ai

Soffi | Development environment for designers and product managerssaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors7 colors · ground #F5F5F6

ground#f5f5f6·94.81%#cdcdcf·2.97%#b0b0b3·1.74%#939496·0.21%#242528·0.17%#6e6f70·0.05%#4f4f53·0.05%

Sized by coverage · click to copy.

Typography4 families · 4 styles · Atacama, Geist, Instrument Sans, ui-monospace

Built for product teams

Atacama · 40/50 · 400 · -0.8px

Soffi AI Summary

Geist · 17/17 · 600 · normal

Body

Edit your design system, see updates live, and ship changes as production-ready

Instrument Sans · 18/23 · 400 · normal

Small

editor-dashboard-content.tsx

ui-monospace · 12/16 · 400 · normal

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

ButtonsBook a demo3 styles

Book a demoTypographyGet free access

primary · fill #1c1d21 · label #ffffff · radius 6px · border 0px · padding 6px 12px · height 32px · type 14px / 400

secondary · fill — · label #3e515b · radius 4px · border 1px · padding 4px 8px · height 27px · type 11px / 400

tertiary · fill — · label #171717 · radius 6px · border 0px · padding 6px 12px · height 32px · type 14px / 400

Shape5 radii · 87 uses

4px28 uses · 32%

6px26 uses · 30%

9999px23 uses · 26%

8px8 uses · 9%

20px2 uses · 2%

AnalysisSoffi's landing page is a near-monochrome, editorial take on a dev-tool: a warm off-white ground (#f5f5f6) laid over a faint dashed design-canvas grid with tiny corner handles, so the whole page re…

Soffi's landing page is a near-monochrome, editorial take on a dev-tool: a warm off-white ground (#f5f5f6) laid over a faint dashed design-canvas grid with tiny corner handles, so the whole page reads as an artboard the product might have been built on. The hero is a 44px Atacama serif at weight 400 with tight -0.88px tracking and generous 55px leading — bookish, not techy — paired with Instrument Sans at 18px for the body, and the only "color" is the ink-black (#1c1d21) "Book a demo" pill and the product's own UI. Below the fold the product appears as a floating editor chrome peeking up from the bottom edge (file tree, toolbar, "Ask Soffi" chat, design-system token panel) and then a full-width demo video with soft feathered top edges; section headers repeat the serif with an italic flourish word, and inline your repo/your tokens code spans in mono ground the prose in engineering reality. The result feels like a quiet studio journal about software rather than a SaaS pitch, and it is confident enough to let the product screenshots carry all the visual weight.

Style recipeBuild on a warm near-white ground (#f5f5f6) with ink (#1c1d21) as the only strong color; use grays #cdcdcf, #b0b0b3, #939496 for hairlines, chips and secondary text, and never introduce a saturated…

Build on a warm near-white ground (#f5f5f6) with ink (#1c1d21) as the only strong color; use grays #cdcdcf, #b0b0b3, #939496 for hairlines, chips and secondary text, and never introduce a saturated accent. Draw a faint dashed 1px grid (#cdcdcf, 6–8px dash) behind page content with small square handles at cell corners so the layout reads as a design canvas. Set display type in a humanist serif (Atacama or a close cousin such as Fraunces/Newsreader) at weight 400, 44–56px, letter-spacing -0.02em, line-height 1.25; reserve italics for one emphasised word per heading. Set body in Instrument Sans 18px/1.3, secondary text 14px, no weight above 500 anywhere. Inline technical nouns as mono code spans on a soft gray chip (#e8e8ea, 4px radius). Buttons are 32px tall, 6px radius, 6px 12px padding, 14px weight 400: primary solid #1c1d21 on white text, secondary white with a 1px #cdcdcf border; pills at 9999px only for tiny status tags. Radii otherwise stay small — 4px for chips, 6px for controls, 8px for panels. Show product UI as real chrome cropped by the viewport edge rather than in device frames, and let media dissolve into the ground with a feathered blur on its top edge. Keep sections wide-margined and single-column, with copy left-aligned inside the grid cells; motion should be limited to gentle fades on entrance.

Details8 worth noting

soffi.ai — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Dashed artboard grid with corner handles
The dashed artboard grid with square corner handles, drawn faintly behind the hero content so the page itself becomes a canvas — a wordless statement of what the product is.
2Light serif display over sans body
Serif display at weight 400 with negative tracking (44px / 55px / -0.88px) against a geometric sans body: editorial contrast without any bold weights on the page.
3Product UI cropped by the viewport
Product UI shown as fragments cropped by the viewport edge (editor drawer rising from the bottom, tokens panel bleeding off the right) instead of a framed screenshot — implies depth and scale.
4Feathered video edge
The demo video's feathered, blurred top edge dissolving into the page ground rather than a hard bezel.
5Status strip as a video caption
A tiny status strip under the video — green dot, "Updated 20hr ago", secondary "Watch product demo" button — tucked into the grid cell like a caption.
6One italic word per heading
One italic word per section heading ("Starts from your live *product*") as the only rhetorical emphasis.
7Mono code chips inside body copy
Inline code spans in a serif-adjacent mono with a soft gray chip behind them, treating repo/token names as first-class vocabulary in body copy.
8Single small black CTA pill
A single 32px solid-black 6px-radius CTA at 14px/400 — small, quiet, unmistakable.

saas · landing · light · editorial, minimal · calm, elegant, technical, confident, trustworthy

soffi.ai

More like this