Set your colors, fonts and scales

The colors, fonts and scales of your site are set once and used on all your pages. This article teaches you how to set the system colors and your brand colors, install your fonts, create your scale values and clean up the inventory.

Before you start

• The Design System screen is in the Appearance menu. It is reserved for site administrators.
• Brand colors, sizes, spacings and radii are created from the editor. Creating or editing them is reserved for site administrators, like the Design System screen. Other roles choose among the existing values.
• Every change is saved as soon as you make it. It goes live at the next publication of the site.
• To set a ready-made palette and fonts in one go, use the design catalog.

Find each setting

A value you reuse is created in the editor, on the block that uses it. Colors with a fixed role and fonts stay on the Design System screen.

Choose light or dark mode

At the top of the colors on the Design System screen, the Light and dark modes menu sets the mode your site shows.

Changing the choice saves and reloads the screen. A dark value that the screen no longer shows stays saved: you get it back by switching to Both.

Set the system colors

The system colors have a fixed role in the product. Their name does not change but you choose their value. They are arranged in four cards.

1. In the administration menu, open Appearance then Design System.
2. Scroll down to the card of the color, for example Brand.
3. Click the color’s swatch and choose a new value. The message Saved. appears.

Changing the primary updates at once the main buttons, links and tabs across the whole site. No page needs to be redone.

The dark reference must stay very dark and the light one very light. Otherwise the screen refuses the value with The dark base must be very dark. or The light base must be very light.

Give a value for dark mode

When the site shows both modes, each brand color and each state has a second field, for example Primary in dark mode. With no setting on your part, your site calculates a lighter version of the same shade that reads on the dark background.

To replace it, choose another value in this field. If you change the color without touching this field, the dark version is recalculated. References and neutrals have none. In dark mode, the light and the dark of each pair swap places.

Create a brand color

A brand color is created in the editor from a block’s color picker. It joins the palette of all the blocks of the site.

1. In the editor, select a block then open the Styles tab of the right-hand column.
2. In the Colors panel, click the swatch for the text, the link or the background. The picker opens on the System and Theme sections.
3. Click the color shown at the top, then set it under Customize color.
4. Next to Theme, click Add color. A form opens.
5. Optional: give the color a Name, for example “Sage green”.
6. Optional: turn on Add a dark-mode value and choose the Color in dark mode.
7. Click Save. The color applies to the block and appears under Theme.

To edit a color, choose it then click Edit color. The form shows Your changes will apply to all the blocks that use it. The name of a system color cannot be changed.

Read the contrast verdict

Under the picker, the line Contrast … :1. gives the ratio between the color and whichever of your two references reads best with it. It is the best possible result with this color.

The verdict informs without blocking. For the contrast between the text and the background of a block, see Color a block.

Install a font

An installed font is hosted on your site. No visitor IP address is sent to Google. Only the Latin character sets are kept.

A typography from the design catalog installs its fonts the same way. All fonts count toward the space of your plan.

From Google Fonts

1. On the Design System screen, click Browse Google Fonts.
2. Type a name in Search fonts…, or choose a category in All categories.
3. Optional: type a sentence from your site in the preview field to see it in each font.
4. Next to the family, click Install. For a single style, open the … styles list and install that style. The font joins the Active fonts.

The Variable only box is checked on opening. A variable font carries all its weights in a single file. Your pages load fewer files.

From a .woff2 file

1. Click Upload a font. The Upload a custom font panel opens.
2. Drop the file in Font file (.woff2).
3. Enter the Family name. Give the same name to all the files of one font.
4. Choose the Weight and the Style, Normal or Italic.
5. For a variable font, give the top of its weight range in Up to (variable font). Otherwise, leave Single weight.
6. Click Install. The message Installed: followed by the font name appears.

The content of the file is checked. A file that is not a .woff2 font is refused with Only .woff2 files are accepted.

From a Google Fonts address

1. On fonts.google.com, choose your fonts then click Get embed code then the @import tab.
2. Copy the address, which starts with https://fonts.googleapis.com/css2?, or the whole @import line.
3. On the Design System screen, click Import from URL, paste the address in Google Fonts URL then click Import.

The message Import successful. gives the number of active fonts. An unrecognized address shows No valid Google Fonts address found.

Choose the fallback font

Under Active fonts, each family has a fallback list. The fallback font is shown while your font loads and when it fails to load. The choice is saved right away.

Use an installed font

Installing a font changes nothing on your pages. The product’s styles use three font tokens, named slots that a typography from the catalog fills.

To put an installed font on all your headings without going through the catalog, choose it in the Font setting of a heading. Update its style, for example Heading 1. Save a block’s style details how to update a style.

To delete a font, click Delete next to its family, under Active fonts. The token it held is emptied.

Create a size, a spacing or a radius

Text sizes, spacings and radii are designated by their value, for example 16px. Your site starts with three scales.

1. In the editor, select a block and open the panel of the setting, for example Typography.
2. Next to the setting, for example Font size, click the +.
3. Enter the value and choose its unit, px, em or rem.
4. Click Save. The value applies to the block and joins the list for all blocks.

A text size can be Fluid: it asks for a Minimum, a Preferred size and a Maximum. It grows with the screen between its two bounds.

In one scale, two identical values are refused with … already exists. Choose this value instead. 1rem and 16px count as two different values: the first follows the text size chosen by the visitor, the second does not.

To edit a value across the whole site, select it then click the Edit pencil. The change applies to every block that uses it.

Clean up the inventory

At the bottom of the Design System screen, the Design system entries card lists everything your site reuses. It counts colors, sizes, spacings, radii, shadows, gradients, fonts and block styles.

To see the Content, the Registered styles and the Shadows that use an entry, click its line. Remove the entry from the styles that use it, then delete it.

See also

• Adopt a design from the catalog
• See your settings in the design preview
• Style text
• Color a block