DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Alias Tokens

Border

Radius

TokenDefault value
--border-radius-nonevar(--dimensions-0)
--border-radius-xsvar(--dimensions-2)
--border-radius-svar(--dimensions-4)
--border-radius-mvar(--dimensions-8)
--border-radius-lvar(--dimensions-16)
--border-radius-xlvar(--dimensions-24)

Style

TokenDefault value
--border-style-defaultvar(--line-style-solid)
--border-style-outlinevar(--line-style-dashed)

Width

TokenDefault value
--border-width-nonevar(--dimensions-0)
--border-width-svar(--dimensions-1)
--border-width-mvar(--dimensions-2)
--border-width-lvar(--dimensions-4)

Color

Border

TokenDefault value
--border-color-info-lightestvar(--color-semantic01-50)
--border-color-info-lightervar(--color-semantic01-100)
--border-color-info-lightvar(--color-semantic01-200)
--border-color-info-mediumvar(--color-semantic01-300)
--border-color-info-strongvar(--color-semantic01-600)
--border-color-info-strongervar(--color-semantic01-700)
--border-color-info-strongestvar(--color-semantic01-800)
--border-color-success-lightvar(--color-semantic02-300)
--border-color-success-mediumvar(--color-semantic02-600)
--border-color-warning-lightvar(--color-semantic03-300)
--border-color-warning-mediumvar(--color-semantic03-500)
--border-color-error-lightvar(--color-semantic04-300)
--border-color-error-mediumvar(--color-semantic04-600)
--border-color-error-strongvar(--color-semantic04-700)
--border-color-error-strongervar(--color-semantic04-800)
--border-color-neutral-brightvar(--color-neutral-50)
--border-color-neutral-brightervar(--color-absolutes-white)
--border-color-neutral-darkvar(--color-neutral-900)
--border-color-neutral-lightvar(--color-neutral-300)
--border-color-neutral-lightervar(--color-neutral-200)
--border-color-neutral-lightestvar(--color-neutral-100)
--border-color-neutral-mediumvar(--color-neutral-400)
--border-color-neutral-strongvar(--color-neutral-500)
--border-color-neutral-strongervar(--color-neutral-600)
--border-color-neutral-strongestvar(--color-neutral-700)
--border-color-primary-lightvar(--color-primary-400)
--border-color-primary-lightervar(--color-primary-300)
--border-color-primary-mediumvar(--color-primary-500)
--border-color-primary-strongvar(--color-primary-600)
--border-color-primary-strongervar(--color-primary-700)
--border-color-secondary-lightvar(--color-secondary-300)
--border-color-secondary-mediumvar(--color-secondary-500)
--border-color-secondary-strongvar(--color-secondary-600)
--border-color-secondary-strongervar(--color-secondary-700)
--border-color-secondary-strongestvar(--color-secondary-800)

Background

TokenDefault value
--color-bg-overlay-darkvar(--color-alpha-800-a)
--color-bg-yellow-lightvar(--color-tertiary-100)
--color-bg-alpha-lightvar(--color-alpha-300-a)
--color-bg-alpha-mediumvar(--color-alpha-800-a)
--color-bg-alpha-strongvar(--color-alpha-900-a)
--color-bg-neutral-lightvar(--color-neutral-100)
--color-bg-neutral-lightervar(--color-neutral-50)
--color-bg-neutral-lightestvar(--color-absolutes-white)
--color-bg-neutral-mediumvar(--color-neutral-200)
--color-bg-neutral-strongvar(--color-neutral-300)
--color-bg-neutral-strongervar(--color-neutral-800)
--color-bg-neutral-strongestvar(--color-neutral-900)
--color-bg-primary-lightvar(--color-primary-200)
--color-bg-primary-lightervar(--color-primary-100)
--color-bg-primary-lightestvar(--color-primary-50)
--color-bg-primary-mediumvar(--color-primary-300)
--color-bg-primary-strongvar(--color-primary-700)
--color-bg-primary-strongervar(--color-primary-800)
--color-bg-primary-strongestvar(--color-primary-900)
--color-bg-secondary-lightvar(--color-secondary-200)
--color-bg-secondary-lightervar(--color-secondary-100)
--color-bg-secondary-lightestvar(--color-secondary-50)
--color-bg-secondary-mediumvar(--color-secondary-300)
--color-bg-secondary-strongvar(--color-secondary-600)
--color-bg-secondary-strongervar(--color-secondary-700)
--color-bg-secondary-strongestvar(--color-secondary-800)
--color-bg-info-lightestvar(--color-semantic01-50)
--color-bg-info-lightervar(--color-semantic01-100)
--color-bg-info-lightvar(--color-semantic01-200)
--color-bg-info-mediumvar(--color-semantic01-300)
--color-bg-info-strongvar(--color-semantic01-600)
--color-bg-info-strongervar(--color-semantic01-700)
--color-bg-info-strongestvar(--color-semantic01-800)
--color-bg-success-lightvar(--color-semantic02-200)
--color-bg-success-lightervar(--color-semantic02-100)
--color-bg-success-lightestvar(--color-semantic02-50)
--color-bg-success-mediumvar(--color-semantic02-300)
--color-bg-success-strongvar(--color-semantic02-600)
--color-bg-success-strongervar(--color-semantic02-700)
--color-bg-success-strongestvar(--color-semantic02-800)
--color-bg-warning-lightvar(--color-semantic03-200)
--color-bg-warning-lightervar(--color-semantic03-100)
--color-bg-warning-lightestvar(--color-semantic03-50)
--color-bg-warning-mediumvar(--color-semantic03-300)
--color-bg-warning-strongvar(--color-semantic03-500)
--color-bg-warning-strongervar(--color-semantic03-600)
--color-bg-warning-strongestvar(--color-semantic03-700)
--color-bg-error-lightvar(--color-semantic04-200)
--color-bg-error-lightervar(--color-semantic04-100)
--color-bg-error-lightestvar(--color-semantic04-50)
--color-bg-error-mediumvar(--color-semantic04-300)
--color-bg-error-strongvar(--color-semantic04-600)
--color-bg-error-strongervar(--color-semantic04-700)
--color-bg-error-strongestvar(--color-semantic04-800)

Text

TokenDefault value
--color-fg-info-lightestvar(--color-semantic01-50)
--color-fg-info-lightervar(--color-semantic01-100)
--color-fg-info-lightvar(--color-semantic01-200)
--color-fg-info-mediumvar(--color-semantic01-300)
--color-fg-info-strongvar(--color-semantic01-600)
--color-fg-info-strongervar(--color-semantic01-700)
--color-fg-info-strongestvar(--color-semantic01-800)
--color-fg-success-lightvar(--color-semantic02-300)
--color-fg-success-lightervar(--color-semantic02-200)
--color-fg-success-mediumvar(--color-semantic02-600)
--color-fg-success-strongvar(--color-semantic02-700)
--color-fg-success-strongervar(--color-semantic02-800)
--color-fg-warning-lightvar(--color-semantic03-300)
--color-fg-warning-mediumvar(--color-semantic03-500)
--color-fg-warning-strongvar(--color-semantic03-600)
--color-fg-warning-strongervar(--color-semantic03-800)
--color-fg-error-lightvar(--color-semantic04-300)
--color-fg-error-lightervar(--color-semantic04-200)
--color-fg-error-mediumvar(--color-semantic04-600)
--color-fg-error-strongvar(--color-semantic04-700)
--color-fg-error-strongervar(--color-semantic04-800)
--color-fg-neutral-brightvar(--color-absolutes-white)
--color-fg-neutral-darkvar(--color-neutral-900)
--color-fg-neutral-lightvar(--color-neutral-400)
--color-fg-neutral-lightervar(--color-neutral-200)
--color-fg-neutral-lightestvar(--color-neutral-100)
--color-fg-neutral-mediumvar(--color-neutral-500)
--color-fg-neutral-strongvar(--color-neutral-600)
--color-fg-neutral-strongervar(--color-neutral-700)
--color-fg-neutral-strongestvar(--color-neutral-800)
--color-fg-neutral-yellow-darkvar(--color-tertiary-800)
--color-fg-primary-lightvar(--color-primary-300)
--color-fg-primary-lightervar(--color-primary-100)
--color-fg-primary-mediumvar(--color-primary-400)
--color-fg-primary-strongvar(--color-primary-700)
--color-fg-primary-strongervar(--color-primary-800)
--color-fg-primary-strongestvar(--color-primary-900)
--color-fg-secondary-lightvar(--color-secondary-500)
--color-fg-secondary-lightervar(--color-secondary-300)
--color-fg-secondary-mediumvar(--color-secondary-600)
--color-fg-secondary-strongvar(--color-secondary-700)
--color-fg-secondary-strongervar(--color-secondary-800)
--color-fg-secondary-strongestvar(--color-secondary-900)

Dimensions

Height

TokenDefault value
--height-xxxsvar(--dimensions-12)
--height-xxsvar(--dimensions-16)
--height-xsvar(--dimensions-20)
--height-svar(--dimensions-24)
--height-mvar(--dimensions-32)
--height-lvar(--dimensions-36)
--height-xlvar(--dimensions-40)
--height-xxlvar(--dimensions-48)
--height-xxxlvar(--dimensions-56)

Spacing

TokenDefault value
--spacing-gap-nonevar(--dimensions-0)
--spacing-gap-xxsvar(--dimensions-2)
--spacing-gap-xsvar(--dimensions-4)
--spacing-gap-svar(--dimensions-8)
--spacing-gap-mvar(--dimensions-12)
--spacing-gap-mlvar(--dimensions-16)
--spacing-gap-lvar(--dimensions-24)
--spacing-gap-xlvar(--dimensions-32)
--spacing-gap-xxlvar(--dimensions-48)
--spacing-padding-nonevar(--dimensions-0)
--spacing-padding-xxxsvar(--dimensions-2)
--spacing-padding-xxsvar(--dimensions-4)
--spacing-padding-xsvar(--dimensions-8)
--spacing-padding-svar(--dimensions-12)
--spacing-padding-mvar(--dimensions-16)
--spacing-padding-mlvar(--dimensions-20)
--spacing-padding-lvar(--dimensions-24)
--spacing-padding-xlvar(--dimensions-32)
--spacing-padding-xxlvar(--dimensions-40)

Shadow

TokenDefault value
--shadow-100var(--dimensions-0) var(--dimensions-2) var(--dimensions-2) var(--dimensions-0) var(--color-alpha-400-a)
--shadow-200var(--dimensions-0) var(--dimensions-12) var(--dimensions-12) var(--dimensions-0) var(--color-alpha-300-a)
--shadow-300var(--dimensions-0) var(--dimensions-24) var(--dimensions-24) var(--dimensions-0) var(--color-alpha-300-a)
--shadow-400var(--dimensions-0) var(--dimensions-48) var(--dimensions-48) var(--dimensions-0) var(--color-alpha-300-a)

Typography

Body

TokenDefault value
--typography-body-xsvar(--font-size-12)
--typography-body-svar(--font-size-14)
--typography-body-mvar(--font-size-16)
--typography-body-lvar(--font-size-18)
--typography-body-xlvar(--font-size-20)
--typography-body-xxlvar(--font-size-24)
--typography-body-regularvar(--font-weight-regular)

Heading

TokenDefault value
--typography-heading-xsvar(--font-size-12)
--typography-heading-svar(--font-size-16)
--typography-heading-mvar(--font-size-20)
--typography-heading-lvar(--font-size-24)
--typography-heading-xlvar(--font-size-32)
--typography-heading-xxlvar(--font-size-40)
--typography-heading-lightvar(--font-weight-light)
--typography-heading-regularvar(--font-weight-regular)
--typography-heading-semiboldvar(--font-weight-semibold)

Helper text

TokenDefault value
--typography-helper-text-svar(--font-size-12)
--typography-helper-text-mvar(--font-size-14)
--typography-helper-text-lvar(--font-size-16)
--typography-helper-text-lightvar(--font-weight-light)
--typography-helper-text-regularvar(--font-weight-regular)
--typography-helper-text-semiboldvar(--font-weight-semibold)
--typography-helper-text-italicvar(--font-style-lightitalic)

Label

TokenDefault value
--typography-label-svar(--font-size-12)
--typography-label-mvar(--font-size-14)
--typography-label-lvar(--font-size-16)
--typography-label-xlvar(--font-size-20)
--typography-label-regularvar(--font-weight-regular)
--typography-label-semiboldvar(--font-weight-semibold)
TokenDefault value
--typography-link-mvar(--font-size-14)
--typography-link-regularvar(--font-weight-regular)

Title

TokenDefault value
--typography-title-svar(--font-size-14)
--typography-title-mvar(--font-size-16)
--typography-title-lvar(--font-size-20)
--typography-title-xlvar(--font-size-24)
--typography-title-boldvar(--font-weight-bold)

Font family

TokenDefault value
--typography-font-familyvar(--font-family-sans)
On this page