Blue Website Design Examples
Mercury
Stripe
Notion
LovableThere are 639 blue website designs here — live sites that use blue as their most saturated brand colour, including Mercury, Stripe, Notion, Lovable and Resend — cut into 18,675 sections. 90% use a light theme and 10% a dark one; the most common headline fonts are Inter (24), Poppins (19) and Montserrat (15). 411 of 639 open with a hero, 85 show pricing on the homepage and 130 carry testimonials.
At a glance
- Sites
- 639
- Sections captured
- 18,675
- Light / dark
- 90% light · 10% dark
- Top heading fonts
- Inter (24), Poppins (19) and Montserrat (15)
- Accent colours
- blue 639
- Most common sections
- features (581), hero (411), statement (312) and call to action (272)
- Top industries
- Lifestyle (117), Health & Fitness (67) and Finance (65)
- Award winners
- 62 of 639
Filter1
What makes a good blue website design
Blue is the default colour of trust — finance, software, healthcare and enterprise lean on it — so the challenge is standing out while still feeling dependable.
What these 639 blue websites have in common
Measured from the captures, not opinion — use it to plan a blue website against what already works.
Sections they use
581 include features, 411 include hero, 312 include statement and 272 include call to action. 189 answer objections with an FAQ and 272 (43%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → call to action → statement. Compare them side by side: features section examples, hero section examples, statement section examples.
Type and colour
Light layouts lead (90% vs 10% dark). Headlines are most often set in Inter (24), Poppins (19) and Montserrat (15). The most common accent hues are blue (639). Every example lists its exact fonts and hex palette on its page.
Page length
The average homepage here is about 7,040px tall at desktop width — roughly 8 screens of scrolling, with Mercury the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.
639 blue website designs worth studying
- Loom — “Best free online screen recording tool with advanced video editing and video storage trusted by over 22 million people and easy sharing from Loom.com.” 58 sections, headlines in Charlie Display, light theme, palette #101214 and #1868db; the homepage runs hero → logo cloud → features → showcase.
- Productboard — “Productboard is the only comprehensive agentic product management system built for product makers. Understand customers, prioritize features, and ship the right thing.” 54 sections, headlines in Eina, light theme, palette #0100ff and #010000; the homepage runs hero → features → statement → features.
- Help Scout — “Help Scout delivers all the features you need to deliver exceptional support at a fraction of the cost of other customer service platforms.” 40 sections, headlines in Scoutie Sans, light theme, palette #131b24 and #304ddb; the homepage runs hero → showcase → features → call to action.
- Zed — “Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.” 56 sections, headlines in Plex Serif, light theme, palette #0000107 and #010000; the homepage runs hero → testimonials → features → stats.
- tldraw — “The tldraw SDK provides tools, services, and APIs to build beautiful whiteboards and infinite canvas applications with real-time collaboration and a powerful React-based canvas.” 43 sections, headlines in Archivo, light theme, palette #fefefe and #404047; the homepage runs hero → features → showcase → features.
- Causal — “Transform your financial strategy with xP&A: unified insights, enhanced collaboration and cloud connectivity to make smarter decisions and unlock business potential.” 44 sections, headlines in Lucanet, light theme, palette #002a42 and #ffffff; the homepage runs hero → features → stats → features.
How to use these references for a blue website
Pick a distinctive blue (more violet, more teal, or very deep) and pair it with a warm accent; test it against the blues your competitors already own. Start with Mercury, Stripe and Notion, 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.
Related searches
Browse all websites or the full A–Z of popular searches.
How this list is built: 639 sites from the UIDiscovery library that use blue as their most saturated brand colour, matched on each product's own title, description and headline copy, captured styles, colours and fonts. Ordered by popularity.
Library updated