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 and ask the chat to use it. The rest of the palette shifts to match.
  • Header, footer and shared styles reach every page.
  • The editor asks before a change goes site-wide.
  • Use two fonts at most.
  • Check it on a phone before you save.

Your colors

Tell the chat your brand color: "my brand color is #1d6fa5", or just "make it a deep green". Your main accent becomes exactly that color, and every other tinted color on the site, pale backgrounds and darker shades included, shifts to go with it while keeping the design's lightness and contrast. You see the colors before and after, with a live preview, and nothing changes until you press Apply. There is nothing to match up by hand.

In website settings, under Brand, you can keep up to four colors. They show up as ready-made choices in the editor's color tools, so the same colors are one click away wherever you are.

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. When that happens the editor asks whether to keep it on every page or undo it, and for a shared style it offers to pull it back to just this page. Restyling something used elsewhere asks first whether to change it everywhere it is used or just there.

Read that question 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 and on a phone's home screen. We make one automatically, your initials on your first brand color, and you can upload your own. Both are under Site icon in website settings, on the Brand tab.

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 button above the 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.