Guide · 8 October 2026
How to Make a Website Moodboard: A Step-by-Step Guide
A website moodboard is a decision document, not a collage. Here is what goes on one, how to build it in an afternoon, and how to turn it into a site.
Guides to building websites with taste
Moodboards, colour, type, spacing and layout: what we have learned from reading hundreds of websites, written down so you can use it.
List · 8 October 2026
14 Hero Section Layouts (and When to Use Each)
The hero is the most important band on any page. Here are 14 layouts, from the dependable split to the sliced and interlocked, and when each one earns its place.
Guide · 8 October 2026
How to Choose a Color Palette for Your Website
A website palette is a set of jobs, not a set of swatches. Here is how to assign roles, balance them with 60-30-10, pass contrast and test before you ship.
List · 8 October 2026
15 Google Font Pairings for Websites That Actually Work
Fifteen free Google Font pairings that hold up on real websites, from Instrument Serif with Instrument Sans to Anton with Work Sans, with the weights and sizes that make them work.
List · 8 October 2026
20 Website Design Moods and How to Design for Each
Mood is what a visitor feels before they read a word. Here are the 20 moods we use to sort real websites, and the palette, type and imagery behind each.
List · 8 October 2026
Landing Page Sections: 12 Sections and the Order That Works
Twelve landing page sections, each with its job, what goes in it and the mistakes to avoid, plus a recommended order for a SaaS page and for a portfolio or brand page.
Guide · 8 October 2026
Type Scale for Websites: How to Set Font Sizes
A type scale turns font sizes from guesses into a system. Here is how to choose a base and a ratio, set line height and letter spacing, and make the whole thing fluid.
Guide · 8 October 2026
Spacing Systems for Web Design: The 8-Point Grid and Beyond
Consistent spacing is what makes a layout feel calm and deliberate. Here is how to build a spacing scale on the 8-point grid, name it as tokens, and apply it everywhere.
Guide · 8 October 2026
Design Tokens Explained: From Moodboard to Code
Design tokens are the named values that carry a visual direction from a moodboard into code. Here is what they are, how to name them, and how they become CSS variables and a Tailwind theme.
List · 8 October 2026
10 Ways to Use Design Inspiration Without Copying
Inspiration and copying start from the same references and end in very different places. Ten practical habits for learning from great websites while making something that is yours.