skip to content

[EXAMPLES] /examples

What I look at

Real sites, the design systems behind the best of them, breakdowns from the people who made them, and the way I read all of it.

Showing Sites

293 real sites in four families. Each section shows its first 12; open the rest when you want them. Every screenshot is full colour and links to the live site.

[01]

Principles

Sites I keep open for one idea: how they set type, use colour, lay out a page and make you look at the right thing first.

Type24 sites

[+] show all 24 (12 more)

Colour17 sites

[+] show all 17 (5 more)

Layout12 sites

Hierarchy13 sites

[+] show all 13 (1 more)

Specimens8 sites

Editorial8 sites

[02]

Sections

The parts every site needs. When I build a hero or a footer, I look here first.

Heroes15 sites

[+] show all 15 (3 more)

Bento grids13 sites

[+] show all 13 (1 more)

Components19 sites

[+] show all 19 (7 more)

[03]

Motion and 3D

Sites that move. Scroll stories, WebGL scenes and shaders (small programs that paint pixels on the graphics card).

Motion14 sites

[+] show all 14 (2 more)

Scroll17 sites

[+] show all 17 (5 more)

3D19 sites

[+] show all 19 (7 more)

Shaders14 sites

[+] show all 14 (2 more)

[04]

Kinds of site

Grouped by what the site is for, so I can see how others solved the same brief.

SaaS16 sites

[+] show all 16 (4 more)

AI products17 sites

[+] show all 17 (5 more)

Portfolios15 sites

[+] show all 15 (3 more)

Shops17 sites

[+] show all 17 (5 more)

Dark mode17 sites

[+] show all 17 (5 more)