# animos.app

Source: https://animos.app/
Captured: 2026-09-16
Tags: saas, landing, dark, both, dark-techno, minimal, technical, confident, premium, energetic
Colors: #09090a, #292a27, #4d4d4b, #93928f, #6f6f6e, #aeaeae, #4676fa, #cecac5
Type (h1): Geist · 64px/65.28px · 500 · tracking -1.6px — "Showcase your designs in motion."
Type (h2): Geist · 41.6px/47.84px · 500 · tracking -1px — "Made with animos"
Type (h3): Geist · 28px/42px · 500 · tracking -0.6px — "Pick a template"
Type (body): Geist · 18px/27px · 400 · tracking -0.36px — "Pick a template, drop in your images or videos, tweak the settings, and export a"
Type (small): Geist · 10px/15px · 500 · tracking 0.5px — "BETA"
Type (button): Geist · 15px/22.5px · 500 — "Try it Free"
Button (primary): "Try it Free" — fill #3f6ff8, text #ffffff, radius 9999px, border 0px, padding 12px 24px, height 47px, type 15px/500
Button (secondary): "Sign in" — text #ffffff, radius 8px, border 1px, padding 6px 12px, height 34px, type 13px/400
Button (tertiary): "How it works" — text #b3b3b3, radius 9999px, border 0px, padding 8px 14px, height 37px, type 14px/500
Radii: 12px (57), 16px (23), 9999px (17), 30px (4), 8px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/animos-app/hero.webp?v=c28f7eed
- Page crop (mid-1): https://media.lvly.design/library/animos-app/mid-1.webp?v=65306bcb
- Page crop (mid-2): https://media.lvly.design/library/animos-app/mid-2.webp?v=0456e4ae
- Hero (mobile): https://media.lvly.design/library/animos-app/mobile-hero.webp?v=9a65895d
- Full page (desktop): https://media.lvly.design/library/animos-app/full.jpg?v=8417f8db
- Full page (mobile): https://media.lvly.design/library/animos-app/mobile-full.jpg?v=55e75d81
- Clip preview (mp4): https://media.lvly.design/library/animos-app/video-tu34o5.preview.mp4?v=8922b92e

animos is a near-black browser-tool landing page that keeps every surface monochrome and lets the product's own renders carry all the color. The ground is a flat `#09090a` with a slightly warmer `#292a27` tier for panels; type is Geist throughout — a 64px/65 white headline at weight 500 tracked −1.6px ("Showcase your designs in motion."), an 18px/27 mid-gray subline at −0.36px, and 15px/500 button labels. One accent does everything: a royal blue `#3f6ff8` pill, 47px tall with 12/24 padding and no border, sitting alone under the subline. The header is a two-sided bar — an 8-petal blue mark plus a small outlined "BETA" capsule on the left, four plain text links centered, and a text-only "Open editor" beside an outlined dark "Sign in" pill on the right — with no background of its own, so it dissolves into the page. Below the fold the hero shot is the trick: the editor UI is shown at a slight 3D tilt inside a dark device frame, and behind it a photographic green hillside bleeds out of the frame's left and right edges into the black page, so the dark ground appears to be lit by the work inside it. The feature run below is a stack of full-width `#0f0f0f` cards at a 30px radius that overlap as you scroll, each holding a short heading ("Pick a template") and one sentence on the left with a rounded mock on the right that runs off the card's bottom-right corner. Social proof is a three-column masonry wall of real screenshotted tweets, kept dark so it reads as part of the page rather than an embed. Quiet, technical, and deliberately colorless except where the product speaks.

## Steal-worthy details

- The hero mock's own artwork bleeds past the device frame: a photographic grassy hillside escapes the editor canvas left and right and fades into the black page, lighting the ground without a gradient or a glow layer.
- Chromeless header — no bar fill, no border, no blur — with the nav links optically centered and the two account actions weighted differently (bare text link vs. outlined pill) so the CTA wins without color.
- "BETA" as a small outlined capsule locked to the wordmark's baseline rather than a colored badge — it reads as part of the logo lockup.
- Exactly one blue object in the first viewport: the CTA pill. The logo mark is the only other place the accent appears, so the eye has one destination.
- Stacked feature cards at a 30px radius that overlap vertically as they scroll, each mock bleeding off the card's bottom-right corner — the section reads as a deck being dealt rather than a list.
- Inside the product mocks, the in-app chrome is shown honestly: a left template rail with labeled thumbnails, a right inspector of labeled sliders with numeric readouts, and an aspect-ratio row (16:9 / 4:3 / 1:1 / 4:5 / 9:16) where the active tile carries a blue outline. Showing real control density sells a browser tool better than a simplified render.
- Testimonials are full screenshots of the tweets — avatars, verification ticks, reply counts, embedded video scrubbers — laid out in three uneven masonry columns; the dark-mode captures sit flush on the page ground with no card behind them.
- Radii are disciplined: 12px is the workhorse (57 uses), 16px for larger panels, 9999px for every button, and the single 30px reserved for the big feature cards.

## Style recipe

Build a near-black product page around one saturated accent. Ground `#09090a`; panels one step up at `#0f0f0f`–`#292a27` with no border, relying on the tonal step for edges; separators and thumbnails around `#4d4d4b`. Text: pure white for headings, `#93928f` for sublines and `#6f6f6e` for fine print. Set everything in Geist (or Inter as the fallback) — display at 56–72px, weight 500, letter-spacing −0.025em, line-height 1.02, centered in the hero; body at 18/27 with −0.02em; button labels at 15px weight 500. One accent only, a royal blue `#3f6ff8`, used for the primary CTA fill, the logo mark and the active state inside product UI — never for decoration. Every button is a full pill (`9999px`) at 47px with 12px/24px padding and no border: primary solid blue with white text, secondary a dark fill with a hairline. Use a 12px radius for small surfaces, 16px for panels and a single larger 30px for the feature cards. Give the header no ground at all — mark plus a small outlined beta capsule on the left, centered text links, a bare text link and one pill on the right. Put the hero's product shot in a tilted dark device frame and let a photographic or colorful element from inside the canvas bleed past the frame edges into the page, so the imagery lights the ground instead of a gradient. Run features as full-width cards that overlap on scroll: three-to-five-word heading, one sentence of body, and a rounded mock on the opposite side that bleeds off the card's bottom corner. For social proof, use dark-mode screenshots of real posts in a three-column masonry with no card chrome. Keep every remaining surface monochrome.