caddis.app

Caddis - Professional Motion Design Toolsaved 26d ago · captured 26d ago

Nine details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #B93C2A

ground#b93c2a·24.98%#b78223·16.03%#7a9974·14.09%#5c77af·11.24%#6f7192·10.08%#979050·9.62%#8f546d·5.61%#aa484e·3.19%

Sized by coverage · click to copy.

Typography1 family · 3 styles · Geist

Timeline-based, node-driven

Geist · 56/56 · 400 · normal

Procedural power, on familiar ground.

Geist · 36/40 · 400 · -1.08px

Body

A new way to work in motion design. Caddis is built for experimentation and perf

Geist · 16/19 · 400 · normal

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

ButtonsDownload Caddis1 style

Download Caddis

primary · fill — · label #ffffff · radius 0px · border 0px · padding 12px 12px · height 36px · type 12px / 400

Shape5 radii · 16 uses

100px5 uses · 31%

4px5 uses · 31%

40px2 uses · 13%

50px2 uses · 13%

20px2 uses · 13%

AnalysisCaddis opens on a full-bleed, film-grained diagonal gradient — green, mustard, blue, red banding like light through a prism — with a thin, pale Geist headline ("Timeline-based, node-driven") floati…

Caddis opens on a full-bleed, film-grained diagonal gradient — green, mustard, blue, red banding like light through a prism — with a thin, pale Geist headline ("Timeline-based, node-driven") floating dead center at weight 400, an outlined 1px download button, and a small plain-text price line doing the honest work of a pricing page. Scroll past it and the palette collapses to a near-black #0a0a0a product canvas: two-up screenshots of the timeline and node graph, framed hairlines, and section headings set in a monospace face that reads as the tool's own UI chrome. The contrast between the saturated, analogue-feeling hero and the austere, technical body is the whole idea — color is the output of the product, the interface is the product.

Style recipeGround the page on `#0a0a0a`; text is off-white (~`#e8e8e8`) for headings, ~55% white for body.

Ground the page on #0a0a0a; text is off-white (~#e8e8e8) for headings, ~55% white for body. Set everything in Geist: display at 56px/56px weight 400 with normal tracking, body 16px/1.2 weight 400, small print 12–13px. Use a monospace face (Geist Mono or similar, ~20px, weight 400) for section and feature headings only. Reserve color for one saturated, grain-textured multi-stop diagonal gradient (red #b93c2a, mustard #b78223, sage #7a9974, blue #5c77af) used as a full-bleed hero or a single large panel — never as tints on UI. Overlay it with 4–8% monochrome noise. Buttons: 1px outline in the current text color, 4px radius, 12px padding, no fill; hover to a low-alpha white fill. Secondary actions are icon + bold small text with no container. Separate sections with 1px hairlines at ~15% white running the full content width; no cards, no shadows, no rounded panels beyond 4px. Show product UI as raw, edge-to-edge screenshots in two-column pairs, captions beneath in a mono heading + sans paragraph. Navigation is centered, 16px, plain text links; one text-only action on the right. Keep pill radii (100px) to small chips only. The rule: the interface is monochrome and technical; the only chromatic thing on the page is the artwork the tool produces.

Details9 worth noting

caddis.app — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Grained full-bleed hero gradient
Hero gradient with visible grain/dither texture — noise on top of soft color bands keeps a huge gradient from looking like a stock mesh.
2Light-weight display headline
Display headline at weight 400, tight 1.0 line-height, no tracking; restraint in the type lets the background be loud.
3Outlined CTA, boxless secondary
Primary CTA is a 1px outlined rectangle (no fill, ~4px radius) with a leading icon; the secondary action is icon + bold 12–13px text with no box at all.
4Pricing as one sentence
The pricing story sits under the hero as a single sentence of body copy ("$129 once — no subscription…") rather than a card.
5Mouse-glyph scroll cue
"Scroll to explore" with a mouse glyph at the bottom edge of the hero — a quiet, dated-on-purpose cue that fits the analogue mood.
6Monospace headings, sans body
Feature headings switch to a monospace face (~20px) while body copy stays in Geist — the mono signals "tool", the sans signals "marketing".
7Borderless two-up screenshot pairs
Two-column screenshot pairs on the dark ground with no card, no border — the UI frames themselves, then a caption block beneath.
8Full-width underlined tab strip
Underlined tab strip ("Animate · Composite · Generate · Render") with a hairline running the full content width and only the active tab's underline in white.
9Dense mid-workflow screenshots
Product screenshots are real, dense, mid-workflow (a cursor in frame) — the density is the credibility.

saas · landing · dark · dark-techno, minimal · technical, edgy, energetic, confident, futuristic

caddis.app

More like this