# butter.video

Source: https://www.butter.video/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, swiss, playful, confident, playful, technical, premium, calm
Colors: #e9e9e9, #55544f, #b0b2b3, #908f8d, #30302f, #706f6e, #151514, #40e72e
Type (h1): DieGrotesk · 107.568px/106.708px · 400 · tracking 0.344219px — "Engineered for Creativity Engineered for Creativity"
Type (h2): DieGrotesk · 60.4px/58.588px · 400 · tracking 0.3624px — "Butter is the first video editor where creatives can build and remix custom desi"
Type (h3): DieGrotesk · 45.4526px/43.6345px · 400 · tracking 0.363621px — "Your new all-in-one video editor. Your new all-in-one video editor."
Type (body): DieGrotesk · 13px/16.25px · 400 · tracking 0.56875px — "Browse 1000s of butter blocks Browse 1000s of butter blocks"
Type (button): DieGrotesk · 16px/21px · 400 · tracking 0.7px — "Try for free"
Button (primary): "Try for free" — text #ebebeb, radius 10px, border 1px, padding 8px 15px, height 39px, type 16px/400
Radii: 11px (4), 50px (4), 8px (2), 10px (2), 12px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/butter-video/hero.webp?v=d6125da6
- Page crop (mid-1): https://media.lvly.design/library/butter-video/mid-1.webp?v=a70001d5
- Page crop (mid-2): https://media.lvly.design/library/butter-video/mid-2.webp?v=f3ef1b5c
- Hero (mobile): https://media.lvly.design/library/butter-video/mobile-hero.webp?v=540b59fc
- Full page (desktop): https://media.lvly.design/library/butter-video/full.jpg?v=f84e46dc
- Full page (mobile): https://media.lvly.design/library/butter-video/mobile-full.jpg?v=9e35df71
- Clip preview (mp4): https://media.lvly.design/library/butter-video/video-rlb468.preview.mp4?v=1cbea82d

Butter's landing page is a pale-gray studio in which a single grotesk does almost all the work. The ground is a flat #e9e9e9 with the faintest vertical fade to white; the header is not a bar but two floating pill capsules (logo + menu on the left, Login + a near-black "Try for free" on the right) that read as objects sitting on the page rather than chrome bolted to it. The hero is a ~108px DieGrotesk at weight 400 with tight ~1.0 line-height — "Engineered for Creativity" set large and light, not bold — beneath a hyper-real 3D keyring of chrome, hot-pink and acid-green charms that supplies every drop of color the page allows itself. Further down, a dark near-black product panel with tiny mono labels (ROTATION 75/100, MATERIAL Shiny Silver) sits beside a huge left-aligned headline whose words are interrupted by inline rendered dials and slider icons, and a monospaced eyebrow ("Infinitely customizable.", "Templates inspired by leading brands") in mid-gray introduces each section. The effect is a Swiss-clean typographic system that lets playful 3D objects and colorful template thumbnails be the loud part.

## Steal-worthy details

- Header as two detached pill capsules (50px radius, slightly darker gray than the page) instead of a full-width bar — logo/menu left, auth right, nothing in between.
- Display type at ~108px / weight 400 / line-height ≈ 1.0 / +0.3px tracking: scale and tightness instead of weight for impact, so the huge headline still feels light.
- A single near-black CTA (#1e1e1e on #fafafa text, 8px radius, 10×14 padding, 18px label) is the only "button" color; everything else is gray.
- Hero object doing all the color work: photoreal 3D charms in chrome, magenta and acid green (#40e72e is the only saturated hue in the sampled palette) on an otherwise achromatic page.
- Inline rendered UI icons (a dial, a slider bank) placed mid-sentence in the headline, at x-height scale, so the copy demonstrates the product as it describes it.
- Monospaced, letter-spaced gray eyebrows above each section headline — a small technical counterpoint to the grotesk.
- Dark product panel (#151514) with 11px rounded inner cards and tiny uppercase mono labels, embedded at large radius in the light page; the contrast between the dark tool and the light gallery frames "creative code" without saying it.
- Section containers in a slightly darker gray (#e0e0e0-ish) with ~40px radius holding colorful template thumbnails — tonal layering rather than borders.

## Style recipe

Build on a flat light-gray ground (#e9e9e9) that fades a touch toward white at the bottom of each viewport; never pure white for the page. Use one neo-grotesk (DieGrotesk or a close cut like Neue Haas Grotesk / Helvetica Now) for everything, at weight 400 throughout — get hierarchy from size, not weight. Display: 96–110px, line-height 1.0, tracking +0.3px, near-black (#1e1e1e). Section headlines: 56–64px, same rules, left-aligned in a right-hand text column when paired with media. Body: 13–18px, line-height 1.25, tracking +0.5px. Eyebrows: a monospace at 12–13px, letter-spaced ~0.1em, mid-gray (#908f8d), sentence case with a full stop. Palette is achromatic — #e9e9e9 ground, #b0b2b3 / #908f8d / #706f6e grays, #30302f and #151514 for dark panels — plus one saturated accent used only inside imagery or 3D objects (acid green #40e72e, magenta), never on UI. One CTA style: solid #1e1e1e, #fafafa text, 8px radius, 10px 14px padding, 18px label; secondary actions are plain text. Navigation lives in detached pill capsules (50px radius, ground one step darker than the page, e.g. #e0e0e0) that float at the corners, not in a bar. Containers use tonal layering — a slightly darker gray rounded 32–48px — instead of hairlines or shadows; inner cards 8–12px radius. Dark product/tool surfaces are #151514 with 11px inner radii and tiny uppercase mono labels. Let a photoreal or rendered 3D object supply all the color and personality; keep layout, type and controls strictly restrained. Generous vertical whitespace between sections (200px+), content max width ~1300px, 48px side gutters.