# revid.ai

Source: https://www.revid.ai/
Captured: 2026-09-20
Tags: saas, landing, dark, both, dark-techno, bento, confident, technical, energetic, futuristic
Colors: #0d0e11, #635a4a, #34302d, #a5967e, #8e7454, #696e71, #7daa95, #b08e52
Type (h1): __euclid_360c19 · 54px/62.1px · 400 · tracking -1.35px — "Where short-form creators grow"
Type (h2): __euclid_360c19 · 42px/52.5px · 400 — "Every Viral Video Has A Structure. Revid Reads It."
Type (h3): __Inter_f367f3 · 18px/22.5px · 600 — "Your ideas deserve more views"
Type (body): __Inter_f367f3 · 18px/29.25px · 400 — "Anyone can generate a video now. Growing a channel is the hard part. Revid write"
Type (small): __Inter_f367f3 · 11px/16.5px · 600 · tracking 0.275px — "Loved by 14,258+ creators"
Type (button): __euclid_360c19 · 16px/24px · 500 — "Try for free"
Button: "Try for free" — fill #a8ffc8, text #101215, radius 9999px, border 0px, padding 4px 4px 4px 16px, height 48px, type 16px/500
Radii: 16px (55), 12px (54), 9999px (21), 10px (7), 24px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/revid-ai/hero.webp?v=d8535bbf
- Page crop (mid-1): https://media.lvly.design/library/revid-ai/mid-1.webp?v=c0de4b8b
- Page crop (mid-2): https://media.lvly.design/library/revid-ai/mid-2.webp?v=d6244661
- Hero (mobile): https://media.lvly.design/library/revid-ai/mobile-hero.webp?v=58c8ab2f
- Full page (desktop): https://media.lvly.design/library/revid-ai/full.jpg?v=b7fe233b
- Full page (mobile): https://media.lvly.design/library/revid-ai/mobile-full.jpg?v=14ea28e2
- Clip preview (mp4): https://media.lvly.design/library/revid-ai/video-4a1uub.preview.mp4?v=d9142905

Revid.ai runs 17,000 pixels deep and stays legible because every surface is one rung on a four-step near-black ladder: near-black gutters (`#07080A`), a section panel a shade up (`#0F1012`, the body computes `#101215`), cards a shade up again (`#1C1D21`), and a `#16171B` hairline instead of a shadow anywhere. Color is rationed to two notes — a high-luminance mint (`#a8ffc8`) that only ever means "do this," on the CTA pill, the active segment, the stat numerals and the small icon glyphs, and a pale cyan (`~#BFFBFF`) spent on exactly one word of the hero headline. Type is a two-family split: a light geometric sans (Euclid, weight 400) at 54px/62px with −1.35px tracking for the hero and 42px/52px for section heads, over Inter at 18px/29px for body and 18px/600 for card titles, with 11px/600 at +0.275px tracking for eyebrows and stats. The section heads are two-tone — the setup clause in a cool gray `#9EA2AC`, the claim in pure white on the next line — which does the work a bold weight usually does. Every section is a large 16px-radius panel inset from the viewport with short drafting ticks at its corners, and the content inside is almost never an illustration: it is product UI drawn at rest, timelines, model pickers, a tool switcher, an analysis panel full of skeleton bars. The page argues by showing the machine working rather than describing it, and a sticky dark slab keeps a single glowing CTA on screen for the entire scroll.

## Steal-worthy details

- Mint pill CTA with an inset arrow chip — `#a8ffc8` fill, `#101215` label at 16px/500, 48px tall, padding `4px 4px 4px 16px` so a dark circular arrow badge sits flush inside the trailing end instead of beside the label; an italic "No credit card required" sits 12px under it
- One cool word carries the headline — the hero is white except for a single verb set in pale cyan `~#BFFBFF`, a hue the page never uses again; mint stays reserved for things you can click, so the two accents never compete
- Two-tone section headline — the setup line is `#9EA2AC` and the claim lands in pure white on the line below, both at the same 42px/400 weight, so emphasis comes from value contrast rather than from a second weight
- Drafting ticks on every section frame — each full-width rounded panel gets short hairline cross-ticks inset a few pixels from its four corners, a blueprint cue that makes a plain dark rectangle read as a measured frame rather than a box
- Capability switcher as one pill rail — seven labeled options with tiny full-color app glyphs ride inside a single `9999px` track, the active one a filled mint pill; it replaces a tab row, a dropdown and a feature grid at once
- Input, analysis, output triptych — source clip left, the machine's read of it center, the regenerated version right, stitched by a small circular arrow button sitting on the seam so the causality is drawn, not captioned
- Skeleton bars standing in for copy — the analysis panel shows gray placeholder rules where sentences would be, with only the labels ("Visual hook", "Scroll-stopper", a `0:04` timestamp) set live, so the eye reads the shape of the output instead of trying to read the output
- Sticky CTA slab with an aurora halo — a dark rounded bar floats clear of the content edges for the whole scroll, two-line value claim left, button right; the button is near-black with a cyan-to-violet glow, the page's only shadow of any kind, and on mobile the same slab collapses to that one full-width glowing button

## Style recipe

Build a four-rung near-black ladder and never leave it: gutters `#07080A`, section panels `#0F1012`, cards `#1C1D21`, and a 1px `#16171B` hairline separating every surface. There is no shadow in the system except one colored glow reserved for the single most important button. Pick exactly one action accent — a high-luminance mint such as `#a8ffc8` — and spend it only on the primary CTA fill, the active segment of a control, small icon glyphs and big stat numerals; never on body text, never as a background wash. Allow yourself one second hue, a pale cyan around `#BFFBFF`, used for a single emphasized word in the top headline and nowhere else.

Type is two families. Headings in a light geometric sans at weight 400: 54px/62px at −1.35px tracking for the hero, 42px/52px at normal tracking for section heads. Body in Inter 18px/29px at 400 in white-at-72%; card titles Inter 18px/22px at 600 in pure white; eyebrows, stat captions and micro-labels at 11px/600 with +0.275px tracking. Set section heads over two lines and split them by value — cool gray `#9EA2AC` for the setup clause, pure white for the claim — instead of reaching for a bolder weight.

Geometry is two radii and a pill. 16px on section containers, media frames and stat panels; 12px on cards, icon tiles and inputs; `9999px` on every button, chip and segmented track. Buttons are 48px tall with `4px 4px 4px 16px` padding so a circular icon badge can sit inset at the trailing edge. Icon tiles are 40px squares at 12px radius, filled one rung above the card, with a mint glyph inside. Eyebrows are small dark pills with a mint icon and a 13px white label.

Rhythm: wrap each section in one large rounded panel inset ~48px from the viewport, mark its corners with short hairline ticks, center the section header, and lay the content out as a two- or three-column card grid with 24px gutters and 24–32px interior padding. Give every card a product surface — a timeline, a picker, a code strip, a checklist — as its top two-thirds and two lines of left-aligned text below; never an illustration. Where a process needs explaining, draw it as before, middle and after in one row and put a circular arrow button on each seam. Where a panel would otherwise hold paragraphs, show gray skeleton bars with only the labels set live.

Motion stays at 150–200ms: fades, 1px lifts, a hairline that brightens to mint on the hovered card, muted loops autoplaying inside the media frames. Pin one CTA slab to the bottom for the entire scroll, and close the page with a hairline-divided stat strip whose numerals are mint at ~34px, a full-width FAQ accordion of one-line rows with `+` toggles, and a four-column link directory set at 13px in white-at-45% on a 36px row rhythm.