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 |
|---|---|
|
|
Used for primary text, such as body copy, icons and buttons. |
|
|
Used for secondary, less vibrant text and icons. |
|
|
Used for text that reinforces a brand, such as with interactive elements. |
|
|
Used on top of the corresponding background colors e.g. with status or panel macros. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Background
|
Custom property name |
Description |
|---|---|
|
|
The default background for neutral elements, such as default buttons, select buttons or tables. |
|
|
|
|
|
|
|
Currently not used |
|
|
|
Used for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items. |
|
|
|
|
|
|
|
|
|
|
|
A vibrant background option for neutral UI elements, such as announcement banners or status macros. |
|
Currently not used |
|
|
Currently not used |
|
|
|
|
|
|
Used for backgrounds emphasizing a brand such as interactive elements like buttons or navigation. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Used for background of form elements, such as text fields, checkboxes, and radio buttons. |
|
|
Used for backgrounds communicating information or something in-progress, such as in information section messages and statuses. |
|
|
|
|
|
Used for backgrounds communicating caution, such as in warning banners and statuses. |
|
|
|
|
|
Used for backgrounds communicating critical information, such in error section messages and statuses. |
|
|
|
|
|
Used for backgrounds communicating a favorable outcome, such as in success section messages and statuses. |
|
|
|
|
|
Used for backgrounds communicating something like a tip messages and statuses. |
|
|
Border
|
Custom property name |
Description |
|---|---|
|
|
Used to visually group or separate UI and layout elements. |
|
|
Used for borders on interactive elements such as buttons and expand macros. |
|
|
|
|
Currently not used |
Used for borders of elements reinforcing a brand such as buttons and tiles. |
|
|
|
|
|
|
|
Currently not used |
|
|
|
|
|
|
Used for borders of form elements, such as text fields. |
|
|
Link
|
Custom property name |
Description |
|---|---|
|
|
Used for links |
|
|
Blanket
|
Custom property name |
Description |
|---|---|
|
|
Used for the screen overlay that appears with modal dialogs. |
|
|
Used for overlaying elements sitting below a loading spinner. |
Primitives
|
Custom property name |
Description |
|---|---|
|
|
Neutral color palette used across the site. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Color palette to emphasize the brand across the site. Inherits the neutral color palette by default. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Blue color palette. |
|
|
|
|
|
|
|
|
|
|
|
Yellow color palette. |
|
|
|
|
|
Red color palette. |
|
|
|
|
|
|
|
|
Green color palette. |
|
|
|
|
|
|
|
|
Purple color palette. |
|
|
|
|
|
|
|
|
Teal color palette. |
|
|
Elevation
|
Custom property name |
Description |
|---|---|
|
|
Used as the primary background of the site. |
|
|
Used as the background of UI elements that sit on top of the surface. |
|
|
Used as the background of UI elements that display on top of everything like popovers, dropdowns or menus. |
Typography
|
Custom property name |
Description |
|---|---|
|
|
Typography tokens consist of font weight, font size, line height and font family primitive tokens and are applied to the CSS |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Primitives
|
Custom property name |
|
|---|---|
|
|
Font size primitives. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Line height primitives. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Font weight primitives. |
|
|
|
|
|
|
|
|
|
|
|
Font family primitives. |
|
|
|
|
|
|
|
|
More specific font size primitives. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Radius
|
Custom property name |
Description |
|---|---|
|
|
Used to control the overall roundness of the site. By that it influences the intensity for each of the It’s value can be any number e.g. setting it to |
|
|
Used to apply various roundness levels to UI elements. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|---|---|
|
|
Used for the sites header. It's recommended to customize the header using Viewport’s theme editor. |
|
|
|
|
|
Used for the portal- and content source pages banner. It's recommended to customize the banner using Viewport’s theme editor. |
|
|
|
|
|
|
|
|
Used for the sites footer. It's recommended to customize the footer using Viewport’s theme editor. |
|
|
|
|
|
Controls the floating action button on small screens triggering the navigation dialog. |
|
|
|
|
|
|
|
|
Controls the site's header height. |
|
|
Controls the site’s overall width. |
|
|
Controls the site's scroll offset to compensate for the sticky header. Derives the value of |