animos.app

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.

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.