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 the Help Center's Theme Token.

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`	Used for borders of form elements, such as text fields.

Link

Custom property name	Description
`--K15t-link`	Used for links
`--K15t-link-visited` CURRENTLY NOT USED	Used for links

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`	Yellow color palette.
`--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`	Teal color palette.

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`	Used for the sites header.
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`	Used for the sites footer.
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.

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;
}