# tella.com

Source: https://www.tella.com/
Captured: 2026-10-30
Tags: saas, landing, light, both, minimal, bento, calm, confident, friendly, human
Colors: #f9f9f9, #dcd6ce, #b79a8b, #997266, #c1b5ac, #84544c, #5c6049, #6659f8
Type (h1): oracle · 32px/38.4px · 400 · tracking -0.64px — "All-in-one video creation"
Type (h2): oracle · 52px/62.4px · 400 · tracking -1.04px — "High production, low effort. Tella transforms your videos into brilliant content"
Type (h3): Inter · 18px/28px · 600 — "Publish"
Type (body): oracle · 32px/38.4px · 400 · tracking -0.64px — "Record, edit, and share every video you need"
Type (small): Inter · 13px/16.25px · 600 — "Help Center Walkthru"
Type (button): oracle · 15px/22.5px · 500 · tracking -0.3px — "Sign up"
Button: "Sign up" — fill #5e51f8, text #ffffff, radius 9999px, border 0px, padding 4px 24px, height 31px, type 15px/500
Radii: 9999px (60), 12px (22), 2px (13), 9px (11), 20.5px (10)

## Images

- Hero (desktop): https://media.lvly.design/library/tella-com/hero.webp?v=53dbc0d6
- Page crop (mid-1): https://media.lvly.design/library/tella-com/mid-1.webp?v=f00f8465
- Page crop (mid-2): https://media.lvly.design/library/tella-com/mid-2.webp?v=0f8541e3
- Hero (mobile): https://media.lvly.design/library/tella-com/mobile-hero.webp?v=ac430b62
- Full page (desktop): https://media.lvly.design/library/tella-com/full.jpg?v=3df73fe4
- Full page (mobile): https://media.lvly.design/library/tella-com/mobile-full.jpg?v=59683ab4
- Clip preview (mp4): https://media.lvly.design/library/tella-com/video-i9jnwo.preview.mp4?v=6a415910

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.

## Style recipe

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.