Black and White Website Design Examples

1065 real sites · 19,886 sections

There are 1065 black and white website designs here — live sites that have no saturated brand colour — a black, white and grey palette, including Linear, Superpower, Anthropic, Cursor and Raycast — cut into 19,886 sections. 81% use a light theme and 19% a dark one; the most common headline fonts are Inter (38), Suisse Intl (12) and Geist (12). 575 of 1065 open with a hero, 60 show pricing on the homepage and 122 carry testimonials.

At a glance

Sites: 1065
Sections captured: 19,886
Light / dark: 81% light · 19% dark
Top heading fonts: Inter (38), Suisse Intl (12) and Geist (12)
Accent colours: neutral 1065
Most common sections: features (710), hero (575), statement (429) and showcase (422)
Top industries: Design & Agency (153), Fashion & Beauty (130) and Shopping (103)
Award winners: 325 of 1065

What makes a good black and white website design

Black-and-white sites let content and typography lead: no brand hue competes with photography or product screenshots, so the layout, spacing and type have to create the personality.

What these 1065 black and white websites have in common

Measured from the captures, not opinion — use it to plan a black and white website against what already works.

Sections they use

710 include features, 575 include hero, 429 include statement and 422 include showcase. 147 answer objections with an FAQ and 239 (22%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → showcase → call to action. Compare them side by side: features section examples, hero section examples, statement section examples.

Type and colour

Light layouts lead (81% vs 19% dark). Headlines are most often set in Inter (38), Suisse Intl (12) and Geist (12). The most common accent hues are neutral (1065). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 6,233px tall at desktop width — roughly 7 screens of scrolling, with Superpower the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.

1065 black and white website designs worth studying

Cal.com — “A fully customizable scheduling software for individuals, businesses taking calls and developers building scheduling platforms where users meet users.” 47 sections, headlines in Cal Sans, light theme, palette #898989 and #242424.
Dub — “Dub is the modern link attribution platform for short links, conversion tracking, and affiliate programs.” 65 sections, headlines in Satoshi, light theme, palette #ffffff and #fafafa; the homepage runs hero → features → logo cloud → features.
Convex — “All gas, no breakages. Convex is the reactive backend platform that keeps up with you and your agents.” 49 sections, headlines in Neue haas grotesk display, light theme, palette #f6eedb and #38383a; the homepage runs hero → logo cloud → features → integrations.
beehiiv — “Create, grow, and monetize your newsletter with easy-to-use newsletter tools. Build email newsletters and websites without any coding.” 49 sections, headlines in Clash Grotesk Font, light theme, palette #ffffff and #060419; the homepage runs hero → stats → faq → call to action.
Levels — “Levels helps you understand how food, sleep, exercise, and stress affect your body, so you can make changes that improve energy, appetite, and long-term metabolic health.” 34 sections, headlines in Tt Hoves, light theme, palette #ffffff and #131413; the homepage runs hero → features → stats → testimonials.
Superpower — “Take control of your health. A Superpower membership includes 150+ biomarker lab tests each year—no hidden fees, HSA/FSA eligible—a 24/7 care team in your pocket, and a health…” 27 sections, headlines in Nb international pro webfont, light theme, palette #ffffff and #18181b; the homepage runs hero → logo cloud → how it works → showcase.

How to use these references for a black and white website

Use one strong type pairing and a clear grayscale scale for hierarchy, and reserve any colour for state and interaction so it stands out. Start with Linear, Superpower and Anthropic, open each site at full size and compare their features and hero sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.