Skip to main content
Skip table of contents

Design Tokens

This is the help center theme’s comprehensive design token system for advanced and fine grained customizations of the Help Center’s look and feel. For more simple customizations we recommend that you first check out Using Design Tokens in Custom CSS .

Viewport implements design tokens using CSS custom properties. Each design token serves a specific purpose within the Help Center theme. Pick the CSS custom property keys you need from the list below.

Color

Foreground

Custom property name

Description

--K15t-foreground

Used for primary text, such as body copy, icons and buttons.

--K15t-foreground-subtle

Used for secondary, less vibrant text and icons.

--K15t-foreground-brand

Used for text that reinforces a brand, such as with interactive elements.

--K15t-foreground-on-brand

Used on top of the corresponding background colors e.g. with status or panel macros.

--K15t-foreground-on-brand-strong

--K15t-foreground-on-information

--K15t-foreground-on-information-strong

--K15t-foreground-on-warning

--K15t-foreground-on-warning-strong

--K15t-foreground-on-danger

--K15t-foreground-on-danger-strong

--K15t-foreground-on-success

--K15t-foreground-on-success-strong

--K15t-foreground-on-tip

--K15t-foreground-on-tip-strong

Background

Custom property name

Description

--K15t-background-neutral

The default background for neutral elements, such as default buttons, select buttons or tables.

--K15t-background-neutral-hovered

--K15t-background-neutral-pressed

--K15t-background-neutral-selected

CURRENTLY NOT USED

--K15t-background-neutral-subtle

Used for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.

--K15t-background-neutral-subtle-hovered

--K15t-background-neutral-subtle-pressed

--K15t-background-neutral-subtle-selected

--K15t-background-neutral-strong

A vibrant background option for neutral UI elements, such as announcement banners or status macros.

--K15t-background-neutral-strong-hovered

CURRENTLY NOT USED

--K15t-background-neutral-strong-pressed

CURRENTLY NOT USED

--K15t-background-neutral-strong-selected

--K15t-background-brand

Used for backgrounds emphasizing a brand such as interactive elements like buttons or navigation.

--K15t-background-brand-hovered

--K15t-background-brand-pressed

--K15t-background-brand-selected

--K15t-background-brand-strong

--K15t-background-brand-strong-hovered

--K15t-background-brand-strong-pressed

--K15t-background-brand-strong-selected

--K15t-background-input

Used for background of form elements, such as text fields, checkboxes, and radio buttons.

--K15t-background-information

Used for backgrounds communicating information or something in-progress, such as in information section messages and statuses.

--K15t-background-information-strong

--K15t-background-warning

Used for backgrounds communicating caution, such as in warning banners and statuses.

--K15t-background-warning-strong

--K15t-background-danger

Used for backgrounds communicating critical information, such in error section messages and statuses.

--K15t-background-danger-strong

--K15t-background-success

Used for backgrounds communicating a favorable outcome, such as in success section messages and statuses.

--K15t-background-success-strong

--K15t-background-tip

Used for backgrounds communicating something like a tip messages and statuses.

--K15t-background-tip-strong

Border

Custom property name

Description

--K15t-border-neutral

Used to visually group or separate UI and layout elements.

--K15t-border-neutral-strong

Used for borders on interactive elements such as buttons and expand macros.

--K15t-border-neutral-strong-selected

--K15t-border-brand

CURRENTLY NOT USED

Used for borders of elements reinforcing a brand such as buttons and tiles.

--K15t-border-brand-hovered

--K15t-border-brand-pressed

--K15t-border-brand-selected

CURRENTLY NOT USED

--K15t-border-brand-strong

--K15t-border-input

Used for borders of form elements, such as text fields.

--K15t-border-input-selected

Custom property name

Description

--K15t-link

Used for links

--K15t-link-visited
CURRENTLY NOT USED

Blanket

Custom property name

Description

--K15t-blanket

Used for the screen overlay that appears with modal dialogs.

--K15t-blanket-loading

Used for overlaying elements sitting below a loading spinner.

Primitives

Custom property name

Description

--K15t-color-neutral-0

Neutral color palette used across the site.

--K15t-color-neutral-25

--K15t-color-neutral-50

--K15t-color-neutral-75

--K15t-color-neutral-100

--K15t-color-neutral-200

--K15t-color-neutral-300

--K15t-color-neutral-400

--K15t-color-neutral-500

--K15t-color-neutral-600

--K15t-color-neutral-700

--K15t-color-neutral-800

--K15t-color-neutral-900

--K15t-color-neutral-1000

--K15t-color-brand-50

Color palette to emphasize the brand across the site.

Inherits the neutral color palette by default.

--K15t-color-brand-100

--K15t-color-brand-200

--K15t-color-brand-300

--K15t-color-brand-400

--K15t-color-brand-500

--K15t-color-brand-600

--K15t-color-brand-700

--K15t-color-brand-800

--K15t-color-brand-900

--K15t-color-blue-100

Blue color palette.

--K15t-color-blue-400

--K15t-color-blue-500

--K15t-color-blue-600

--K15t-color-yellow-100

Yellow color palette.

--K15t-color-yellow-400

--K15t-color-red-100

Red color palette.

--K15t-color-red-400

--K15t-color-red-700

--K15t-color-green-100

Green color palette.

--K15t-color-green-400

--K15t-color-green-900

--K15t-color-purple-100

Purple color palette.

--K15t-color-purple-400

--K15t-color-purple-700

--K15t-color-teal-100

Teal color palette.

--K15t-color-teal-400

Elevation

Custom property name

Description

--K15t-surface

Used as the primary background of the site.

--K15t-surface-raised

Used as the background of UI elements that sit on top of the surface.

--K15t-surface-overlay

Used as the background of UI elements that display on top of everything like popovers, dropdowns or menus.

Typography

Custom property name

Description

--K15t-font-headline-small

Typography tokens consist of font weight, font size, line height and font family primitive tokens and are applied to the CSS font property.

--K15t-font-headline-medium

--K15t-font-headline-large

--K15t-font-headline-x-large

--K15t-font-body-small

--K15t-font-body-small-strong

--K15t-font-code-medium

--K15t-font-body-medium-strong

--K15t-font-code-medium

Primitives

Custom property name

--K15t-font-size-3x-small

Font size primitives.

--K15t-font-size-2x-small

--K15t-font-size-x-small

--K15t-font-size-small

--K15t-font-size-medium

--K15t-font-size-large

--K15t-font-size-x-large

--K15t-font-size-2x-large

--K15t-font-size-3x-large

Line height primitives.

--K15t-line-height-x-small

--K15t-line-height-small

--K15t-line-height-medium

--K15t-line-height-large

--K15t-font-weight-regular

Font weight primitives.

--K15t-font-weight-medium

--K15t-font-weight-semi-bold

--K15t-font-weight-bold

--K15t-font-family-headline

Font family primitives.

--K15t-font-family-body

--K15t-font-family-code

--K15t-font-size-headline-x-large

More specific font size primitives.

--K15t-font-size-headline-large

--K15t-font-size-headline-medium

--K15t-font-size-headline-small

--K15t-font-size-headline-x-small

--K15t-font-size-body-large

--K15t-font-size-body-medium

--K15t-font-size-body-small

Radius

Custom property name

Description

--K15t-radius-factor

Used to control the overall roundness of the site. By that it influences the intensity for each of the --K15t-radius-* properties.

It’s value can be any number e.g. setting it to 0 makes the theme very edgy while 10 makes it very round.

--K15t-radius-2x-small

Used to apply various roundness levels to UI elements.

--K15t-radius-x-small

--K15t-radius-small

--K15t-radius-medium

--K15t-radius-large

--K15t-radius-circle

--K15t-radius-pill

Components

Component tokens hook directly into certain components of the Help Center site to control their appearance. See the components section for more fine grained control.

Custom property name

Description

DEPRECATED --K15t-header-foreground

Used for the sites header.

DEPRECATED --K15t-header-background

DEPRECATED --K15t-banner-foreground

Used for the portal- and content source pages banner.

DEPRECATED --K15t-banner-background

DEPRECATED --K15t-banner-image

DEPRECATED --K15t-footer-foreground

Used for the sites footer.

DEPRECATED --K15t-footer-background

DEPRECATED --K15t-fab-size

Controls the floating action button on small screens triggering the navigation dialog.

DEPRECATED --K15t-fab-offset-block

DEPRECATED --K15t-fab-offset-inline

DEPRECATED --K15t-layout-header-height

Controls the site's header height.

DEPRECATED --K15t-layout-container-width

Controls the site’s overall width.

DEPRECATED --K15t-layout-scroll-offset

Controls the site's scroll offset to compensate for the sticky header. Derives the value of --K15t-layout-header-height.

Examples

The design token system enables advanced customization of the Help Center theme.

image-20240417-125851.png

Article page with experimental dark theme style

CSS
/* 🚧 Experimental: Dark theme style */
 
:root {
  color-scheme: dark;
  
  --vpt-theme-primary-color: gold;
  --vpt-theme-header-background-color: var(--K15t-surface-raised);
  --vpt-theme-header-foreground-color: var(--K15t-foreground);
  --vpt-theme-footer-background-color: var(--K15t-surface);
  --vpt-theme-footer-foreground-color: var(--K15t-foreground);

  --K15t-foreground-on-information: lightskyblue;
  --K15t-foreground-on-tip: indigo;
  --K15t-foreground-on-danger: wheat;
  --K15t-foreground-on-success: palegreen;
  --K15t-background-information: midnightblue;
  --K15t-background-warning: darkgoldenrod;
  --K15t-background-tip: slateblue;
  --K15t-background-danger: maroon;
  --K15t-background-success: darkgreen;
  --K15t-link: royalblue;
  --K15t-link-visited: slateblue;
  
  --K15t-surface: var(--K15t-color-neutral-900);
  --K15t-surface-raised: var(--K15t-color-neutral-800);
  --K15t-surface-overlay: var(--K15t-color-neutral-700);
  --K15t-foreground: var(--K15t-color-neutral-0);
  --K15t-foreground-subtle: var(--K15t-color-neutral-100);
  --K15t-background-neutral: var(--K15t-color-neutral-600);
  --K15t-background-neutral-hovered: var(--K15t-color-neutral-400);
  --K15t-background-neutral-subtle-hovered: var(--K15t-color-neutral-500);
  --K15t-background-neutral-subtle-selected: var(--K15t-color-neutral-400);
  --K15t-background-input: var(--K15t-surface-raised);
  --K15t-border-neutral: var(--K15t-color-neutral-600);
  --K15t-border-neutral-strong: var(--K15t-color-neutral-400);
  --K15t-border-neutral-strong-selected: var(--K15t-color-neutral-300);

  --K15t-color-neutral-25: #c1c1c6;
  --K15t-color-neutral-50: #a4a4ab;
  --K15t-color-neutral-100: #888890;
  --K15t-color-neutral-200: #6b6b75;
  --K15t-color-neutral-300: #4e4e5b;
  --K15t-color-neutral-400: #313140;
  --K15t-color-neutral-500: #2a2a37;
  --K15t-color-neutral-600: #23232e;
  --K15t-color-neutral-700: #1c1c25;
  --K15t-color-neutral-800: #16161c;
  --K15t-color-neutral-900: #0f0f13;
}

JavaScript errors detected

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

If this problem persists, please contact our support.