# soffi.ai

Source: https://soffi.ai/
Captured: 2026-09-13
Tags: saas, landing, light, both, editorial, minimal, calm, elegant, technical, confident, trustworthy
Colors: #f5f5f6, #cdcdcf, #b0b0b3, #939496, #242528, #6e6f70, #4f4f53
Type (h2): Atacama · 40px/50px · 400 · tracking -0.8px — "Built for product teams"
Type (h3): Geist · 17px/17px · 600 — "Soffi AI Summary"
Type (body): Instrument Sans · 18px/23.4px · 400 — "Edit your design system, see updates live, and ship changes as production-ready "
Type (small): ui-monospace · 12px/16px · 400 — "editor-dashboard-content.tsx"
Type (button): Instrument Sans · 14px/20px · 400 — "Book a demo"
Button (primary): "Book a demo" — fill #1c1d21, text #ffffff, radius 6px, border 0px, padding 6px 12px, height 32px, type 14px/400
Button (secondary): "Typography" — text #3e515b, radius 4px, border 1px, padding 4px 8px, height 27px, type 11px/400
Button (tertiary): "Get free access" — text #171717, radius 6px, border 0px, padding 6px 12px, height 32px, type 14px/400
Radii: 4px (28), 6px (26), 9999px (23), 8px (8), 20px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/soffi-ai/hero.webp?v=1c7562fd
- Page crop (mid-1): https://media.lvly.design/library/soffi-ai/mid-1.webp?v=24462b21
- Page crop (mid-2): https://media.lvly.design/library/soffi-ai/mid-2.webp?v=49dbebd1
- Hero (mobile): https://media.lvly.design/library/soffi-ai/mobile-hero.webp?v=2d139782
- Full page (desktop): https://media.lvly.design/library/soffi-ai/full.jpg?v=c227ae27
- Full page (mobile): https://media.lvly.design/library/soffi-ai/mobile-full.jpg?v=32c04029
- Clip preview (mp4): https://media.lvly.design/library/soffi-ai/video-oh68og.preview.mp4?v=598640ac

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- The demo video's feathered, blurred top edge dissolving into the page ground rather than a hard bezel.
- 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.
- One italic word per section heading ("Starts from your live *product*") as the only rhetorical emphasis.
- 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.
- A single 32px solid-black 6px-radius CTA at 14px/400 — small, quiet, unmistakable.

## Style recipe

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.