- Industry
- Creative
- Site type
- Landing, Blog
- Platform
- Custom code
- Tech
- Next.js, Three.js
- Style
- Minimal, Brutalist, High Contrast, Product Centric
- Business model
- Software, Agency
- Presence
- Online
- Components
- Navigation Bar, Hero, Logo Strip, Product UI, Feature Collection, Gallery, Primary Button, Ghost Button, Footer, Floating UI Mockup, Pill Navigation
- Score
- 56.1/100 · 100% evidence · Review pending
- Typography
- Display — DieGrotesk; Heading — DieGrotesk; Body — DieGrotesk; Mono — ABCDiatype
- Palette
- OG image
Design analysis
Butter's design language is minimal and slightly brutalist, featuring a stark palette primarily of off-white and deep black, creating a high-contrast environment. The typography is entirely sans-serif, using 'DieGrotesk' in various weights and sizes to establish a clear hierarchy, from massive display headings to smaller functional body copy. 'ABCDiatype' makes occasional appearances for specific, technical-feeling elements. The layout relies heavily on generous whitespace and a rigid grid, particularly noticeable in the feature cards and template galleries. Componentry is restrained, using dark, rounded rectangles for buttons and floating product UI mockups. The overall aesthetic is highly
- Spacing
- Generous and airy. Sections are separated by large amounts of vertical whitespace.
- Shape
- Rounded. Most structural elements like floating navigation, buttons, and feature cards use significant border radii. Large radii are used extensively, creating pill shapes for buttons and navigation, and soft corners for large UI mockups.
- Borders
- Minimal. Borders are rarely used, relying instead on color contrast (dark UI elements on light background) to define boundaries.
- Buttons
- Solid dark fills with rounded corners and light text for primary actions. Text-only for secondary actions.
- Width
- Wide but constrained. The content flows in a centered column, utilizing a wide grid for feature layouts.
- Density
- Low density. The design prioritizes large imagery and significant whitespace over packing in information.
