Spandrel

Making it look the way you want

Colors, type and spacing, set once and applied everywhere. The point of the site-wide settings is that you change one thing rather than forty.

The short version

  • Pick one brand color. The rest is worked out from it.
  • Header, footer and shared styles reach every page.
  • A banner tells you when a change is going site-wide.
  • Use two fonts at most.
  • Check it on a phone before you save.

Your colors

Choose a brand color and everything else is derived from it: the shade for hovering over a button, a pale tint for highlighted panels, and a version dark enough to read as text. There is nothing to match up by hand.

That last one is why your links may not be exactly the color you picked. A pale color works beautifully as a button and is unreadable as small text, so text uses a deepened version. It is recognizably your color, just legible.

One color is genuinely enough. Sites that look designed usually use one color and a lot of restraint, not five colors and a gradient.

Fonts

Two at most: one for headings and one for everything else. One is fine. Three is where a site starts looking like a ransom note.

Set them site-wide rather than page by page. Consistent type is most of what makes a site feel deliberate.

Changes that reach every page

The header, the footer and shared styles appear on every page, so editing them anywhere changes them everywhere. A banner appears when that happens, offering to keep it site-wide or pull it back to just this page.

Read that banner rather than clicking past it. A color change meant for one page and one meant for the whole site look identical while you are making them.

Hover and focus states

When you style a button, the way it looks under the mouse is worked out for you. You do not have to set it, and it will be consistent across your site.

If you set a hover style explicitly, yours is kept.

Your icon

The little picture in the browser tab. We make one from your site's name and colors automatically, and you can upload your own.

It is small and it is worth getting right, because it is how somebody finds your tab among fifteen others. A logo with fine detail turns to mush at that size; a single letter or a simple shape does not.

Spacing

The most common fixable problem with a page is that everything is too close together. Space between sections is what tells a reader where one idea ends and the next begins.

If a page feels cramped and you cannot say why, add space before you change anything else.

Check it on a phone

The mobile preview switches the editor to phone width. More than half your visitors will be on one, and a layout that works on a wide screen can fall apart on a narrow one.