To create consistent Typo Styles, it's important that you first add your colors and fonts to the Style Guide. Once you've done this, you can start using a Typo Style by adding the appropriate Smart Block.

The structure of the Smart Block allows you to define the font on the left-hand side with attributes such as type of font, font size, and so on.
In the middle of the text you can see a sample text according to the definition you made on the left.
On the right side you can define the allowed text and background color combinations. We will explain this topic in detail further down.

Text colors and background colors
Based on the colors defined in the Style Guide, you can define which text color may be combined with which background color in the Typo Styles.

To prepare, it makes sense to create a matrix with the color definitions. This makes working with the Color Pickers much easier.

First of all, select all the text colors based on your matrix. After you've selected all the allowed colors for your text – click "white space" to close the color picker.

Next step is to select one of the text colors, which also defines the background colors. Let's take red.
By selecting red, you see that the text color in the box changes. Now click on the edit icon. In the black window, you can read that you are now configuring the background colors for the red text color.
Now choose the two colors defined within your matrix and close the window by clicking into a white space.

Do the same with the other text colors. First, select the text color and then click on the edit icon to select the allowed background colors.
If you click on the next text color you will see that no background colors are allowed at the moment. These colors are marked, accordingly, as forbidden.
What might be a bit confusing is that when you click on the edit icon, the background colors defined in the first text color are marked with a check mark. 

You have to ignore them now. If you need them for this second text color, just click on them twice, making the forbidden-mark disappears.

In this example, white is already combined with another text color. You can see that there's a double click for adding white to another text color.

As a viewer you can now quickly see which colors are allowed, by choosing a text or background color. The check mark shows which colors are currently active and displayed in the sample text.

As an example, you can see here that the red text color is allowed to combined with "Green Vogue", and "White". Active color for text is "Red", for the background it's "Green Vogue".

This example shows you an active text color, "White" with "Turquoise", and "Steel Blue" and "Black", as allowed background colors. The white text with the turquoise background is active.