Color

Color tokens are crafted in alignment with the principles of Material Design 3, the latest evolution of Google's renowned design system. With a focus on clarity, depth, and intuitive user experiences, our color tokens are thoughtfully designed to elevate your digital products.

Accents

Primary

var(--ty-sys-color-primary)

var(--ty-sys-color-on-primary)

var(--ty-sys-color-primary-container)

var(--ty-sys-color-on-primary-container)

var(--ty-sys-color-inverse-primary)

var(--ty-sys-color-primary-hover)

var(--ty-sys-color-primary-focus)

var(--ty-sys-color-primary-hover-low)

var(--ty-sys-color-primary-focus-low)

Status

Error

var(--ty-sys-color-error)

var(--ty-sys-color-on-error)

var(--ty-sys-color-error-container)

var(--ty-sys-color-on-error-container)

Info

var(--ty-sys-color-info)

var(--ty-sys-color-on-info)

var(--ty-sys-color-info-container)

var(--ty-sys-color-on-info-container)

Warning

var(--ty-sys-color-warning)

var(--ty-sys-color-on-warning)

var(--ty-sys-color-warning-container)

var(--ty-sys-color-on-warning-container)

Success

var(--ty-sys-color-success)

var(--ty-sys-color-on-success)

var(--ty-sys-color-success-container)

var(--ty-sys-color-on-success-container)

Neutral

Neutral

var(--ty-sys-color-neutral)

var(--ty-sys-color-on-neutral)

var(--ty-sys-color-neutral-container)

var(--ty-sys-color-on-neutral-container)

Background

var(--ty-sys-color-background)

var(--ty-sys-color-on-background)

Surface

var(--ty-sys-color-surface)

var(--ty-sys-color-on-surface)

var(--ty-sys-color-surface-dim)

var(--ty-sys-color-surface-bright)

var(--ty-sys-color-surface-tint)

var(--ty-sys-color-surface-container)

var(--ty-sys-color-surface-container-highest)

var(--ty-sys-color-surface-container-high)

var(--ty-sys-color-surface-container-low)

var(--ty-sys-color-surface-container-lowest)

var(--ty-sys-color-surface-variant)

var(--ty-sys-color-on-surface-variant)

var(--ty-sys-color-inverse-surface)

var(--ty-sys-color-inverse-on-surface)

Outline

var(--ty-sys-color-outline)

var(--ty-sys-color-outline-variant)

Other

var(--ty-sys-color-shadow)

var(--ty-sys-color-scrim)

var(--ty-sys-color-hover)