V4 attempts to corral all design settings into one area that are applied globally. Rather than updating the styling on components that are dropped on to the page in the page builder, you instead setup the design in the theme area beforehand.
The goal is to give production or content editors the ability to update content without needing to worry about the design.
The Theme page is divided into two main tabs:
A style is a set of design choices tied to the page (body) or a specific component. Styles include font settings, margins, padding, border widths, etc.
Each site starts with a beginner set of styles that are required, for example 'Button', 'Secondary Button', 'H1 Header', 'H2 Header', etc. With the exception of the 'body' style, you can create new versions of any of these styles.
Styles do not include anything relating to the color.
All V4 themes must have a minimum of three color schemes, however you can add as many color schemes as you like. The UI will allow you to delete all but the first three color schemes. Feel free to rename the color schemes on the client site to better reflect the colors used.
For every Style created, an entry for that Style is created in each Color Scheme. Another way of looking at the theme is like so:
Color Scheme 1
Color Scheme 2
Color Scheme 3
Now imagine if you were to create a new button style, "Small Header Button", you'd then find in the Color Scheme:
Color Scheme 1
Color Scheme 2
Color Scheme 3
At the top of the page you can "Import Theme". From here you can navigate to any site and apply that theme. Importing a theme does not overwrite the current theme until you save so you can shop around for different themes and then save when you're satisfied with your selection.
At the top of the theme page you'll find a button (defaults to the homepage) that will allow you to select a new page to preview the page.