Live Example
Dark + Product Screenshot rendered as a live HTML page
2018
interface

Dark + Product Screenshot

Show the product.

Founded by Stripe, Vercel · Stripe, Vercel, Linear marketing sites, 2019 onward
Philosophy
The product screenshot is the hero. Surround it with enough contrast, hierarchy, and space that it becomes the entire argument.
The Story
This aesthetic is so common now it is almost invisible. A dark background. A large, crisp product screenshot in the center. A headline in a bold sans-serif. A one-line description. A CTA. The entire visual vocabulary exists to say: look at what we built. Stripe pioneered this approach with their homepage redesign in 2018. The genius was in the details: screenshots with subtle drop shadows, browser frames that made the product feel embedded, and a color palette that kept the product screenshots as the brightest element on the page. The lesson: when your product is genuinely excellent, the design should step aside and let it speak.
Design Parameters
Color Palette
Background
#09090B
Text
#FAFAFA
Accent
#6366F1
Alt
#27272A
Typography
Inter, sans-serif
Mood
Technical, confident, product-forward
Best For
SaaS marketing
Product launches
Developer tool landing pages
Notable Examples
Stripe homepage
Vercel homepage
Linear homepage
Figma homepage