# caddis.app

Source: https://www.caddis.app/
Captured: 2026-09-13
Tags: saas, landing, dark, both, dark-techno, minimal, technical, edgy, energetic, confident, futuristic
Colors: #b93c2a, #b78223, #7a9974, #5c77af, #6f7192, #979050, #8f546d, #aa484e
Type (h1): Geist · 56px/56px · 400 — "Timeline-based, node-driven"
Type (h2): Geist · 36px/39.6px · 400 · tracking -1.08px — "Procedural power, on familiar ground."
Type (body): Geist · 16px/19.2px · 400 — "A new way to work in motion design. Caddis is built for experimentation and perf"
Type (button): sans-serif · 12px/normal · 400 — "Download Caddis"
Button (primary): "Download Caddis" — text #ffffff, radius 0px, border 0px, padding 12px 12px, height 36px, type 12px/400
Radii: 100px (5), 4px (5), 40px (2), 50px (2), 20px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/caddis-app/hero.webp?v=6f565695
- Page crop (mid-1): https://media.lvly.design/library/caddis-app/mid-1.webp?v=af3c0783
- Page crop (mid-2): https://media.lvly.design/library/caddis-app/mid-2.webp?v=9d7c00b0
- Hero (mobile): https://media.lvly.design/library/caddis-app/mobile-hero.webp?v=acb7bea1
- Full page (desktop): https://media.lvly.design/library/caddis-app/full.jpg?v=4b51c05a
- Full page (mobile): https://media.lvly.design/library/caddis-app/mobile-full.jpg?v=c104d568
- Clip preview (mp4): https://media.lvly.design/library/caddis-app/video-nhpmd0.preview.mp4?v=7d19b005

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.

## Steal-worthy details

- Hero gradient with visible grain/dither texture — noise on top of soft color bands keeps a huge gradient from looking like a stock mesh.
- Display headline at weight 400, tight 1.0 line-height, no tracking; restraint in the type lets the background be loud.
- 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.
- The pricing story sits under the hero as a single sentence of body copy ("$129 once — no subscription…") rather than a card.
- "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.
- Feature headings switch to a monospace face (~20px) while body copy stays in Geist — the mono signals "tool", the sans signals "marketing".
- Two-column screenshot pairs on the dark ground with no card, no border — the UI frames themselves, then a caption block beneath.
- Underlined tab strip ("Animate · Composite · Generate · Render") with a hairline running the full content width and only the active tab's underline in white.
- Product screenshots are real, dense, mid-workflow (a cursor in frame) — the density is the credibility.

## Style recipe

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.