All Design Tokens

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

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

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

--K15t-link

Used for links

--K15t-link-visited
CURRENTLY NOT USED

--K15t-blanket

Used for the screen overlay that appears with modal dialogs.

--K15t-blanket-loading

Used for overlaying elements sitting below a loading spinner.

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

--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.

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

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

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

--K15t-header-foreground

Used for the sites header.

It's recommended to customize the header using Viewport’s theme editor.

--K15t-header-background

--K15t-banner-foreground

Used for the portal- and content source pages banner.

It's recommended to customize the banner using Viewport’s theme editor.

--K15t-banner-background

--K15t-banner-image

--K15t-footer-foreground

Used for the sites footer.

It's recommended to customize the footer using Viewport’s theme editor.

--K15t-footer-background

--K15t-fab-size

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

--K15t-fab-offset-block

--K15t-fab-offset-inline

--K15t-layout-header-height

Controls the site's header height.

--K15t-layout-container-width

Controls the site’s overall width.

--K15t-layout-scroll-offset

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