silt.app

Silt: the digital blackboard for ai-native teamssaved 2d ago · captured 2d ago

Eleven details, eleven pinned.

View as Markdown ↗

Colors8 colors · ground #0C0C0C

ground#0c0c0c·86.96%#2c2c2b·4.37%#444c52·2.55%accent#5487ae·2.09%#707070·1.54%#858c8d·0.98%#edeef0·0.46%#adadad·0.12%

Sized by coverage · click to copy.

Typography1 family · 3 styles · saans

the product moves from code to canvas and back.

saans · 36/41 · 400 · -0.9px

point, don't describe

saans · 20/26 · 500 · -0.5px

Body

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

saans · 75/79 · 400 · -3.00126px

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

Buttonsinstall1 style

install

primary · fill #161616 · label #d4d4d4 · radius 10px · border 1px · padding 8px 12px · height 32px · type 14px / 400

Shape5 radii · 38 uses

9999px29 uses · 76%

24px3 uses · 8%

20px3 uses · 8%

10px2 uses · 5%

12px1 use · 3%

AnalysisA 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 ra…

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.

Style recipeBuild 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…

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.

Details11 worth noting

silt.app — the captured page — Landing, 1440 × 900 · captured Oct 7, 2026

1Pixel ruler page edge
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
2Selection handles around a headline word
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
3Scroll-tick minimap rail
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
4Scattered sticker objects
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
5All-lowercase light display type
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
6Dark and white pill CTA pair
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
7macOS window frame around demo
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
8Paint-smear feature card headers
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
9Split prose and code install panel
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
10Pastel sticky-note testimonials
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
11Tracked lowercase section eyebrows
Tiny lowercase eyebrows above section heads — 11px wide-tracked gray labels ("the loop", "then ship") over 36px regular-weight headings

saas · landing · dark · dark-techno, minimal, playful · technical, playful, calm, human

silt.app

More like this