tella.com

Tella | All-in-One AI Video Creationsaved 3h ago · captured 3h ago

Nine details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #F9F9F9

ground#f9f9f9·71.33%#dcd6ce·16.43%#b79a8b·3.59%#997266·2.24%#c1b5ac·1.60%#84544c·0.92%#5c6049·0.82%#6659f8·0.80%

Sized by coverage · click to copy.

Typography2 families · 5 styles · oracle, Inter

All-in-one video creation

oracle · 32/38 · 400 · -0.64px

High production, low effort. Tella transforms your videos into brilliant content

oracle · 52/62 · 400 · -1.04px

Publish

Inter · 18/28 · 600 · normal

Body

Record, edit, and share every video you need

oracle · 32/38 · 400 · -0.64px

Small

Help Center Walkthru

Inter · 13/16 · 600 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign up1 style

primary · fill #5e51f8 · label #ffffff · radius 9999px · border 0px · padding 4px 24px · height 31px · type 15px / 500

Shape5 radii · 116 uses

9999px60 uses · 52%

12px22 uses · 19%

2px13 uses · 11%

9px11 uses · 9%

20.5px10 uses · 9%

AnalysisTella's homepage is a quiet, near-white (#f9f9f9) product page that lets real faces and real UI do the selling.

Tella's homepage is a quiet, near-white (#f9f9f9) product page that lets real faces and real UI do the selling. Everything is set in the custom grotesk "oracle" at regular weight with tight negative tracking. The hero is a small, left-aligned two-line statement: a black first line over a gray second line. Below it, a huge rounded frame holds a tabbed video carousel. The only saturated color is one blue-violet (#5e51f8) on pills, "Learn more" links and the odd duotone screen. A faint pixel-glitch shimmer of pastel noise bleeds into the edges of every showcase card. It's the page's one decorative signature, and it reads as "video" without a single gradient blob. Further down, the page alternates wide feature cards (pale-gray tray, copy on one side, a live-looking app mock on the other) with rows of outlined pill chips. A three-up card grid, an FAQ and a glitch-framed closing CTA finish the page.

Style recipeBuild on a near-white page (#f9f9f9) with pure white (#ffffff) for raised surfaces, near-black ink (#111) and one mid-gray (#8a8a8a) for secondary text.

Build on a near-white page (#f9f9f9) with pure white (#ffffff) for raised surfaces, near-black ink (#111) and one mid-gray (#8a8a8a) for secondary text. Use a single blue-violet accent, #5e51f8 (a lighter #6659f8 for hover and decals), and only for primary pills, text links and the occasional full-bleed duotone screen inside a mock. Set everything in one neutral grotesk at weight 400 with negative tracking of -0.02em: display 52/62, h1 32/38, lead 20–24/1.4 in gray, buttons 15px/500 at -0.3px. Fall back to Inter 600 at 13–18px for UI labels. Build hierarchy from value, not weight: pair a black line with a same-size gray line, and lift key words in a gray paragraph to black instead of bolding them. Keep the radius system strict: 9999px pills for every button, tab and chip, 12px for app mocks, about 20px for large tray cards, and 2px for tiny inner details. Present features as wide pale-gray (#f3f3f3) trays with a hairline border: copy on one side (title, gray description, violet "Learn more"), a cropped, overflowing slice of real product UI on the other. Use soft, low shadows on floating UI only, none on cards. Under a feature, a centered row of outlined white pill chips can list its variants, with a small solid accent "New" badge where needed. Add character with one texture only: faint pastel pixel-glitch smears (pink, lime, lavender) confined to card edges and the final CTA band. Use real photography of people and real-looking data rather than illustration, and keep the layout spacious with 120–160px between sections.

Details9 worth noting

tella.com — the captured page — Landing, 1440 × 900 · captured Oct 30, 2026

1Two-tone same-size hero headline
A two-tone hero headline. The product name in near-black and the promise in mid-gray (#8a8a8a-ish), both at the same size and weight, so the hierarchy comes from value, not scale or boldness.
2Undersized hero handing off to product
A small, left-aligned hero (32px h1, about 300px of copy and one wide pill CTA) that hands the fold straight to a full-width product frame instead of competing with it.
3White-pill tab switcher inside frame
A segmented use-case switcher floating inside the showcase frame. Inactive tabs are gray text with a small glyph. The active one becomes a white pill with a hairline shadow and a violet bar icon.
4Pixel-glitch texture on card edges
Pastel pixel-glitch noise (scanline smears of pink, lime and lavender) bleeds only into the outer edges of the rounded showcase cards. It's a motion-suggesting texture that stays out of the content.
5Ghost and solid pill CTA pair
Header CTAs as a matched pair of short pills: "Log in" with a white fill and hairline border, "Sign up" with a solid violet fill. Both are 31px tall, with no shadow.
6Gray paragraph with black-lifted keywords
A stated thesis in one centered paragraph, mostly gray with select words ("transforms", "brilliant content", "anywhere") lifted to black. It reads as emphasis by contrast, never by bold.
7Capability chip row under feature cards
Each feature card is followed by a centered row of outlined capability chips (macOS, Windows, Chrome, Web, plus "Auto Capture" with a violet "New" badge) acting as a sub-nav for that feature.
8Cropped real-UI slices as card art
A three-up card grid where every card's top is a cropped, overflowing slice of real UI (analytics stats, an invite list, stacked playlist panels), with a plain title, gray description and violet link below.
9Glitch-band closing CTA
The closing CTA reuses the glitch texture as a full-width band behind a centered headline and violet pill, which bookends the hero's frame.