Butter

How it’s built

Layout

A large light-gray rounded page panel floats within a dark-charcoal outer field. Compact rounded navigation at upper left and login/trial actions upper right; pale sculptural mark balances upper right. A long dark timeline/player panel crosses the middle with time labels and colorful square media tiles; a rotated tile floats above the row. Pale oversized script texture sits low behind a centered short headline. Outer charcoal may be gallery framing; the page design is the light panel.

Type

Handwritten/script logo and large low-contrast background script; compact plain sans-serif navigation/title and tiny timeline labels. Exact family/metrics unknown.

Color and surface

Pale cool gray in-panel field, dark timeline surface, white/gray text, vivid blue/red/pink/cyan thumbnails, gray sculptural mark. Outer charcoal is uncertain presentation context.

Components

In-page account/navigation row, abstract decoration, timeline strip with media tiles, short caption, low-contrast script texture.

What makes it work

• Light open page
• One dominant horizontal media strip
• Distinct media thumbnails
• Compact supporting navigation

Measured

Computed CSS at 1440px, 2026-10-24.

Live behavior

Today

Butter has a light gray-to-near-white hero with a glossy metallic keychain-like cluster hanging from the top center: silver key/ring surfaces and orange, hot pink and green accents. Large regular black sans headline is centered below, followed by short supporting line and a dark rounded action. A light rounded navigation capsule sits upper left and separate login/try capsule upper right. A large charcoal consent overlay occupies the lower view, with white copy, switches and yellow accept action; this overlay masks the design and is not a permanent design invariant.

Responsive

At768px the main header simplifies to a wide rounded identity/menu capsule and the heading wraps to two lines, with the hanging object prominent above. At390px the header is a narrower rounded identity/menu capsule, but consent covers the lower roughly68 percent of the viewport and hides the hero headline/support/action. DOM still measures the phone headline and its two-line layout; that geometry is not presented as visibly confirmed text. Consent itself uses a two-column switch arrangement and wide yellow accept pill. Unobstructed mobile page requires recovery.

Scroll

Actual scroll750 in14798px document reveals a centered muted supporting label and a horizontal black brand-mark strip with cropped edge items. Header remains at top, with the left capsule reduced to identity/menu while login/try remains at right. Consent overlay remains and hides the measured lower content. A large later heading is measured at y877 but sits behind the overlay, so no visible later section composition claimed. Whether the mark strip is animated is not isolated.