Skip to main content
Skip table of contents

Using Design Tokens in Custom CSS

Viewport’s theme tokens enable you to customize the look and feel of your Help Center with ease.

Leverage the power of Viewport's design token system inside the Help Center theme's custom CSS. Use tokens to create new theme styles that align your theme's appearance with your brand's needs.

This page will give you an overview of all available theme tokens and provides some common examples for how to apply these tokens.

Available Theme Tokens

Token name

Type

Description

1

--vpt-theme-text-font

<string>

Used for adjusting the font family of the overall site text

2

--vpt-theme-text-color

<color>

Used for the body text color across the site.

3

--vpt-theme-text-scale

<number>

Used for adjusting the text size across the site.

Default value: 1

Example: Setting it to 0.8 will decrease the size of the text. Setting it to 1.2 will increase the size of the text.

4

--vpt-theme-headline-font

<string>

Used for adjusting just the headline font family

5

--vpt-theme-headline-color

<color>

Used for the headline text color across the site.

6

--vpt-theme-headline-scale

<number>

Used for adjusting the headline size across the site.

Default value: 1

Example: Setting it to 0.8 will decrease the size of all headlines. Setting it to 1.2 will increase the size of all headlines.

7

--vpt-theme-header-text-color

<color>

Used for the site’s header text color

8

--vpt-theme-header-background-color

<color>

Used for the site's header background color

9

--vpt-theme-header-height

<dimension>

Used for adjusting the site’s header height

10

--vpt-theme-footer-text-color

<color>

Used for the site’s footer text color

11

--vpt-theme-footer-background-color

<color>

Used for the site’s footer background color

12

--vpt-theme-banner-text-color

<color>

Used for the site’s banner text color

13

--vpt-theme-banner-image

<image>

Used for the site’s banner image, used on the portal and content source pages.

Example:

CSS
:root {
  --vpt-theme-banner-image: url(https://images.unsplash.com/photo-1709290649154-54c725bd4484?q=80&w=1280);
}
14

--vpt-theme-banner-background-color

<color>

Used for the site’s banner background color.

15

--vpt-theme-primary-color

<color>

Used for adding a custom color in several places across the site e.g. tiles, page tree, pagination, links, buttons, table of contents.

16

--vpt-theme-on-brand-color

<color>

Used for the elements which might occur on top of the brand color e.g. text in a button.

17

--vpt-theme-container-width

<dimension>

Used for the site’s container width. Bigger value results in wider site.

18

--vpt-theme-scroll-offset

<dimension>

Used for the offset between a scrolled to anchor and the site’s sticky header.

19

--vpt-theme-roundness

<number>

Used to control the overall roundness of the site.

Default value: 1

Setting it to 0 makes the theme very edgy while 10 makes it very round.

Examples

Changing font family and text sizes

To change the default Help Center theme font for text and headings to a different one, we recommend injecting your code similar to the example below where we change the font family, text scale and color of headlines.

Example text changes in a site
CSS
:root {
  --vpt-theme-text-font: "Trebuchet MS", Verdana, sans-serif;
  --vpt-theme-headline-font: Georgia, serif;
  --vpt-theme-text-scale: 1.125;
  --vpt-theme-headline-scale: 2;
  --vpt-theme-headline-color: indigo;
}

Creating a distinct theme style

Craft theme styles that align with your brand’s needs. In the following examples we used only a hand full of tokens to drastically change the overall appearance of the Help Center theme.

Example style changes in a site
Example style changes in a site
CSS
:root {
  --vpt-theme-headline-font: "TypewriterMS", ui-sans-serif, sans-serif;
  --vpt-theme-text-font: "Verdana", ui-sans-serif, sans-serif;;
  --vpt-theme-header-background-color: ghostwhite;
  --vpt-theme-header-text-color: black;
  --vpt-theme-banner-background-color: gold;
  --vpt-theme-banner-text-color: black;
  --vpt-theme-footer-background-color: ghostwhite;
  --vpt-theme-footer-text-color: black;
  --vpt-theme-primary-color: darkmagenta;
  --vpt-theme-on-primary-color: white;
  --vpt-theme-roundness: 0.125;
}
Example style changes in a site
Example style changes in a site
CSS
:root {
  --vpt-theme-headline-font: "Georgia", ui-serif, serif;
  --vpt-theme-text-font: "Garamond", ui-sans-serif, sans-serif;
  --vpt-theme-header-background-color: teal;
  --vpt-theme-header-text-color: white;
  --vpt-theme-banner-text-color: black;
  --vpt-theme-banner-background-color: teal;
  --vpt-theme-footer-background-color: ghostwhite;
  --vpt-theme-footer-text-color: black;
  --vpt-theme-primary-color: teal;
  --vpt-theme-on-primary-color: white;
  --vpt-theme-roundness: 6;
}
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.