# silt.app

Source: https://silt.app/
Captured: 2026-10-07
Tags: saas, landing, dark, both, dark-techno, minimal, playful, technical, playful, calm, human
Colors: #0c0c0c, #2c2c2b, #444c52, #5487ae, #707070, #858c8d, #edeef0, #adadad
Type (h2): saans · 35.936px/41.3264px · 400 · tracking -0.9px — "the product moves from code to canvas and back."
Type (h3): saans · 20px/26px · 500 · tracking -0.5px — "point, don't describe"
Type (body): saans · 75.0316px/78.7832px · 400 · tracking -3.00126px — "the blackboard b w l h a i c t k e b b o o a a r r d d for designers who design "
Type (button): saans · 14px/14px · 400 — "install"
Button: "install" — fill #161616, text #d4d4d4, radius 10px, border 1px, padding 8px 12px, height 32px, type 14px/400
Radii: 9999px (29), 24px (3), 20px (3), 10px (2), 12px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/silt-app/hero.webp?v=550a5b35
- Page crop (mid-1): https://media.lvly.design/library/silt-app/mid-1.webp?v=2d9d9dd7
- Page crop (mid-2): https://media.lvly.design/library/silt-app/mid-2.webp?v=f90f293c
- Hero (mobile): https://media.lvly.design/library/silt-app/mobile-hero.webp?v=851256d5
- Full page (desktop): https://media.lvly.design/library/silt-app/full.jpg?v=74fe0e3b
- Full page (mobile): https://media.lvly.design/library/silt-app/mobile-full.jpg?v=b53f9168
- Clip preview (mp4): https://media.lvly.design/library/silt-app/video-zddzvi.preview.mp4?v=ad61751d

A near-black (#0c0c0c) landing page that dresses itself as the product's own canvas: a pixel ruler runs across the top edge, hairline gutters frame the content column, and a vertical scroll-tick rail sits in the left margin like a design tool's chrome. Against that grayscale engineering frame, the color is all in the objects: a rainbow petal-flower logo, a 3D mossy card, a toggle switch and a doodled mascot floating as loose stickers, then painterly abstract artwork and pastel sticky notes further down. Type is one grotesk (Saans) set entirely in lowercase, light weight, very tight tracking, in soft gray (#d4d4d4) rather than white, which keeps a huge 75px headline quiet. The headline's key word wears a live selection box with teal-blue handles, so the hero performs the product's interaction instead of describing it.

## Steal-worthy details

- Pixel ruler as the page's top edge — a 24px strip of tick marks numbered every 100px in dim gray, fixed across the viewport, that turns the whole site into a canvas
- Selection box on one headline word — a 1px blue-gray frame with four small square teal handles wrapped around "designers", showing the product's core gesture inside the H1
- Vertical tick rail in the left gutter — a column of short hairline dashes with one longer white dash marking scroll position, a minimap instead of a progress bar
- Floating sticker objects in the hero — a rainbow flower, a tilted 3D moss card, an iOS-style toggle and a line-drawn mascot scattered loosely around the headline, the only saturated color above the fold
- All-lowercase voice in a light grotesk — 75px display at weight 400 with -3px tracking, nav and buttons lowercase too, so the brand reads casual and engineered at once
- Paired CTAs in two tones — a dark #161616 pill with a Slack glyph for "join community" beside a solid white pill for "sign in", fully rounded at 9999px
- Product video in a macOS window frame — traffic-light dots, centered gray title and a sun toggle on a #1a1a1a bar, with a squircle webcam bubble overlapping the demo
- Painterly abstract art as card headers — three dark feature cards topped with gestural paint-smear images instead of screenshots or icons, giving a dev tool texture
- Tabbed install panel split into prose and code — tabs on a #1e1e1e bar, a left pane with a white "read more" pill and a right pane of monospaced commands with purple and orange keyword tints
- Testimonials as tilted pastel sticky notes — four slightly rotated squares in sky, lilac, pink and mint with tiny role captions, the one light-colored moment on the page
- Tiny lowercase eyebrows above section heads — 11px wide-tracked gray labels ("the loop", "then ship") over 36px regular-weight headings

## Style recipe

Build on a near-black ground (#0c0c0c, panels #161616 to #1e1e1e, hairlines #2c2c2b) and treat the page as a design-tool canvas: a thin pixel ruler across the top, 1px vertical gutter lines framing a ~1100px content column, horizontal hairlines between sections, and a tick-mark scroll rail in the margin. Use one grotesk (Saans, or Inter as a fallback) for everything, all lowercase including nav and buttons. Display at 72–76px, weight 400, tracking -0.04em, line height 1.05; section heads at 36px weight 400, tracking -0.025em; card titles 20px weight 500; body 16–18px in #8a8a8a with comfortable 1.6 leading. Text is soft gray (#d4d4d4), never pure white. Keep the UI grayscale and let color arrive through objects: saturated stickers and 3D trinkets floating around the hero, painterly abstract images as card headers, and pastel sticky notes (sky, lilac, pink, mint) for social proof. The accent is a muted steel blue (#5487ae) used for selection frames and handles; mark one key word in a headline with a selection box and square handles. Buttons are 32–40px pills (9999px): a dark #161616 pill with a 1px #2c2c2b border for secondary, a solid white pill with near-black text for primary. Cards and panels round at 20–24px, small controls at 10–12px. Frame product media in a macOS window chrome with traffic-light dots. Code blocks are monospace on a slightly lifted panel with gray comments and purple and orange keyword tints. Keep density low and motion playful.