A library of website design styles
Copy the idea, not the code.
Website Design Explorer is a library for exploring website design styles. Each style is shown as a live, original example page you can view at phone, tablet and desktop width. When one fits, take away the idea behind it: a short recipe of principles, palette, type and spacing you can hand to a designer, a design tool or an AI assistant.
How it works
From a look you like to a brief you can use
See it live
Open a style's example page and switch between phone, tablet and desktop width to see how it holds up.
Understand the rules
Read what makes the style work: its principles, palette, type pairing, spacing, and the do's and don'ts that keep it consistent.
Copy the recipe
Copy the style as a ready-to-use brief and paste it into your design tool or AI assistant. You take the idea; the code stays yours to write.
Featured styles
Six ways to design a website
Each style has its own original example page, written for this library for a fictional brand. Open one to see the style at work.
- Swiss gridA strict grid, big sans-serif type and asymmetric layout do all the work; nothing is there for decoration.See the example
- Editorial magazineReads like a well-set magazine: confident serif headlines, generous columns, pull quotes and fine rules.See the example
- Neo-brutalistRaw, loud and honest: thick black borders, hard offset shadows, flat clashing colours and unpolished type.See the example
- Soft minimalCalm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.See the example
- Playful roundedFriendly and bouncy: chunky rounded type, pill-shaped buttons, bright candy colours and wobbly shapes.See the example
- Dark luxuryQuiet expense: a deep dark ground, a refined serif, thin gold lines, slow fades and very little on screen.See the example