Swiss and grid mood board

A swiss and grid mood board for web design: 12 references from live websites, one per site, picked from 306 swiss and grid sections in the save.design library.

Start a mood board All mood boards

What makes a design swiss and grid

International Typographic Style on the web: strict grids, grotesk type, asymmetric layouts and lots of alignment. Take the grid; it's what makes these feel inevitable.

Every tile opens the section it came from. Use the board as a starting point: keep the four or five references that fit your brief, and write next to each what you're taking from it.

Type and stack

What the sites on this board are set in and built with, read from their live pages.

Fonts

Built with

More mood boards

Brutalist Minimalist Dark Editorial Playful Luxury Retro 3D Monochrome Organic and natural Bold typography Gradient Neon Pixel and 8-bit Glass and frosted Illustrated and hand-drawn Collage Warm tones Futuristic

New to mood boards? Read how to make a mood board, with a template.

.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:

:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*

*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:

:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..

.:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--.

..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--

-..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.-

--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.

.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+

+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.

Make a board like this
from your own references.

Drop saved websites, sections and screen recordings onto an infinite canvas, group them into frames, and share one link.

Create a canvas