The design studio

Design takes the whole screen: a list of sections down the left, their controls beside it, and your blog on the right. Change something on the left and the right redraws. Nothing is live until you save, and a discard puts everything back.

The preview is the real renderer with your real posts, not a mock-up. What you see is what a reader gets, at the width you choose: desktop, tablet or phone.

The sections are in three groups. The look is the design itself: presets, colours, type and layout. Around the writing is the header, the footer and how each kind of page is built. When this is not enough is your own CSS, and every design you have published.

Start from a preset

Eight of them, and each is a whole design rather than a palette: type, spacing, whether posts appear as cards or as a list, how covers are cropped, what the front page leads with.

Applying a preset replaces the design. It never touches a post, a picture, an author or a category, so trying them all costs nothing but the time.

Once you have changed things, the preset is a starting point you have moved away from. Applying it again resets you to it, and the panel says so before it does.

Colours

Seventeen colours, each with a name that says where it lands rather than what it is: page background, body text, quiet text for dates and captions, the accent, the text that sits on the accent, links and links hovered, raised and recessed surfaces, lines and rules, header and footer, code, and the selection highlight.

Two are worth thinking about longer than the rest.

Accent is the one that carries the brand. It is on buttons, active links and the small marks throughout, so a colour that works on a large button can be hard to read as a thin underline.

Text on the accent has to be readable on the accent. The studio does not stop you making white text on pale yellow, and the preview is where you notice.

Light and dark

Three choices: follow the reader, light only, or dark only.

Following the reader means you are designing two blogs. The studio asks which palette you are editing and shows that one in the preview, so a colour that only works in one is obvious immediately rather than depending on what your own machine is set to. If you do not want to think about it, pick one and design that one properly.

Type

A typeface for headings and one for the body, from a set of pairs that were chosen together. Some are the fonts already on the reader's machine, which load instantly and cost nothing; the rest are web fonts.

Every stack ends in a generic family, so a font that fails to load falls back to something reasonable instead of to whatever the browser feels like.

Then the details: heading weight, body size, the measure the text is set to, how tight the lines are, and whether small labels are normal, small caps or a serif italic.

Layout and spacing

Density is compact, regular or large, and it moves everything at once rather than one gap at a time.

Width is regular, wide or full. Full width is right for a design that runs pictures to the edge and wrong for one that is mostly text.

Then the per-area decisions: what the header holds and whether it sticks, whether there is a sidebar and what is in it, what the footer says, and what the front page leads with.

Navigation

The header's links are yours to arrange: pages, categories, an external link, and an optional call to action button with its own label and style.

A link to a page you later delete does not become a broken link in the header; it is dropped when the page is drawn. Worth knowing so that tidying up pages does not mean auditing the navigation afterwards.

The home page

The front page has a hero with a title and a subtitle of your own, or none at all.

Below it is the run of posts, in whichever arrangement the preset uses, with anything you have pinned at the top. Pinning is per post, in the editor's Layout panel.

Earlier versions

Every design you publish is kept. Earlier versions lists them, and restoring one brings it back as a draft: readers keep seeing the published design until you publish again, so restoring is never a live change you have to undo in a hurry.

What the studio cannot do

It cannot change the shape of a post's page beyond the switches it offers. If you need something specific, the Settings code tab has a box for your own CSS, applied after the design's own stylesheet so it wins. See adding your own code.

It cannot give two categories different designs. One blog, one design.

It cannot break a post. Everything here is presentation: the writing, the addresses and the pictures are untouched by anything on this screen.