[Layouts](https://www.cv-transformer.com/en-GB/docs/layouts) [Styling](https://www.cv-transformer.com/en-GB/docs/layouts/styling)

# Styling

1 min read

Make a layout match your branding in the **Design** tab of the layout editor: design tokens, fonts, images and custom CSS.

![The Design tab with color tokens, text styles and sizes](https://ddcaybdkekwxbpgpotoa.supabase.co/storage/v1/object/public/common/pages/67a5db15-bbd6-4a90-bb08-46363c70bc71/layout-design.jpg)

## [Design tokens](#design-tokens)

Design tokens are named values you reuse throughout the layout, so a change in one place applies everywhere. There are three kinds:

- **Colors**, such as `Primary` and `Accent`.
- **Text styles**: a font with its size, line height, letter spacing and paragraph spacing, such as `Heading` and `Body`.
- **Sizes**, such as a standard spacing.

Click **New token** to add one. In the **Element** tab, pick a token instead of a value for a color, font or size. To change one element only, choose **Detach from token**. A token's menu has **Apply to all matching values**, which links every element with the token's value to the token, and options to rename or delete it.

Name tokens after their purpose, not their value: `Primary`, not `Blue`. Then the layout stays clear when the colors change.

The **Default font** is used for text without a text style.

## [Fonts](#fonts)

Choose any Google Font, or **Upload** your own font file under **Fonts**. Uploaded fonts can be renamed and deleted.

## [Images](#images)

Upload images, such as your logo or a background, under **Images**. Use them in image elements, or as the background of any element.

## [Custom CSS](#custom-css)

For styling the editor doesn't offer, add **Custom CSS**. It applies to the PDF and the web version, not to Word documents.

[PreviousVariables](https://www.cv-transformer.com/en-GB/docs/layouts/variables) [NextConditional content](https://www.cv-transformer.com/en-GB/docs/layouts/conditions)