revid.ai

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.

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.