butter.video

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.

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.