Foundations
All Design Tokens
A comprehensive list of every primitive and semantic token available in the UX4G Design System, covering typography, borders, blurs, and more.
Blur Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-blur-none | 0px |
| --ux4g-blur-1 | 2px |
| --ux4g-blur-2 | 4px |
| --ux4g-blur-3 | 8px |
| --ux4g-blur-4 | 16px |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-blur-none | var(--ux4g-blur-none) |
| --ux4g-blur-subtle | var(--ux4g-blur-1) |
| --ux4g-blur-soft | var(--ux4g-blur-2) |
| --ux4g-blur-medium | var(--ux4g-blur-3) |
| --ux4g-blur-strong | var(--ux4g-blur-4) |
Border Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-border-none | 0px |
| --ux4g-border-thin | 1px |
| --ux4g-border-thick | 2px |
| --ux4g-border-thicker | 3px |
| --ux4g-border-thickest | 4px |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-border-width-none | var(--ux4g-border-none) |
| --ux4g-border-width-sm | var(--ux4g-border-thin) |
| --ux4g-border-width-md | var(--ux4g-border-thick) |
| --ux4g-border-width-lg | var(--ux4g-border-thicker) |
| --ux4g-border-width-xl | var(--ux4g-border-thickest) |
| --ux4g-border-color-neutral-default | var(--ux4g-color-neutral-300) |
| --ux4g-border-color-neutral-subtle | var(--ux4g-color-neutral-200) |
| --ux4g-border-color-neutral-strong | var(--ux4g-color-neutral-500) |
| --ux4g-border-color-neutral-focus | var(--ux4g-color-neutral-600) |
| --ux4g-border-color-neutral-hover | var(--ux4g-color-neutral-300) |
| --ux4g-border-color-neutral-active | var(--ux4g-color-neutral-400) |
| --ux4g-border-color-neutral-elevated | var(--ux4g-color-neutral-0) |
| --ux4g-border-color-success-default | var(--ux4g-color-green-300) |
| --ux4g-border-color-success-strong | var(--ux4g-color-green-600) |
| --ux4g-border-color-info-default | var(--ux4g-color-cyan-300) |
| --ux4g-border-color-info-strong | var(--ux4g-color-cyan-600) |
| --ux4g-border-color-error-default | var(--ux4g-color-red-300) |
| --ux4g-border-color-error-strong | var(--ux4g-color-red-600) |
| --ux4g-border-color-warning-default | var(--ux4g-color-orange-300) |
| --ux4g-border-color-warning-strong | var(--ux4g-color-orange-600) |
| --ux4g-border-color-primary-default | var(--ux4g-color-primary-300) |
| --ux4g-border-color-primary-strong | var(--ux4g-color-primary-600) |
| --ux4g-border-color-primary-hover | var(--ux4g-color-primary-700) |
| --ux4g-border-color-primary-active | var(--ux4g-color-primary-800) |
| --ux4g-border-color-secondary-default | var(--ux4g-color-secondary-300) |
| --ux4g-border-color-tertiary-default | var(--ux4g-color-tertiary-300) |
| --ux4g-control-border-default | var(--ux4g-color-neutral-200) |
Opacity Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-opacity-0 | 0 |
| --ux4g-opacity-5 | 0.05 |
| --ux4g-opacity-10 | 0.1 |
| --ux4g-opacity-20 | 0.2 |
| --ux4g-opacity-25 | 0.25 |
| --ux4g-opacity-30 | 0.3 |
| --ux4g-opacity-40 | 0.4 |
| --ux4g-opacity-50 | 0.5 |
| --ux4g-opacity-60 | 0.6 |
| --ux4g-opacity-70 | 0.7 |
| --ux4g-opacity-75 | 0.75 |
| --ux4g-opacity-80 | 0.8 |
| --ux4g-opacity-90 | 0.9 |
| --ux4g-opacity-95 | 0.95 |
| --ux4g-opacity-100 | 1 |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-opacity-disabled | var(--ux4g-opacity-40) |
| --ux4g-opacity-hover | var(--ux4g-opacity-80) |
Position Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-position-static | static |
| --ux4g-position-relative | relative |
| --ux4g-position-absolute | absolute |
| --ux4g-position-fixed | fixed |
| --ux4g-position-sticky | sticky |
| --ux4g-pos-value-0 | 0 |
| --ux4g-pos-value-50 | 50% |
| --ux4g-pos-value-100 | 100% |
| --ux4g-translate-middle | translate(-50%, -50%) |
| --ux4g-translate-middle-x | translateX(-50%) |
| --ux4g-translate-middle-y | translateY(-50%) |
| --ux4g-pos-offset-0 | 0 |
| --ux4g-pos-offset-1 | 1px |
| --ux4g-pos-offset-2 | 2px |
| --ux4g-pos-offset-3 | 3px |
| --ux4g-pos-offset-4 | 4px |
| --ux4g-pos-offset-5 | 5px |
| --ux4g-pos-offset-n1 | -1px |
| --ux4g-pos-offset-n2 | -2px |
| --ux4g-pos-offset-n3 | -3px |
| --ux4g-pos-offset-n4 | -4px |
| --ux4g-pos-offset-n5 | -5px |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-pos-static | var(--ux4g-position-static) |
| --ux4g-pos-relative | var(--ux4g-position-relative) |
| --ux4g-pos-absolute | var(--ux4g-position-absolute) |
| --ux4g-pos-fixed | var(--ux4g-position-fixed) |
| --ux4g-pos-sticky | var(--ux4g-position-sticky) |
| --ux4g-pos-top-0 | var(--ux4g-pos-value-0) |
| --ux4g-pos-top-50 | var(--ux4g-pos-value-50) |
| --ux4g-pos-top-100 | var(--ux4g-pos-value-100) |
| --ux4g-pos-bottom-0 | var(--ux4g-pos-value-0) |
| --ux4g-pos-bottom-50 | var(--ux4g-pos-value-50) |
| --ux4g-pos-bottom-100 | var(--ux4g-pos-value-100) |
| --ux4g-pos-start-0 | var(--ux4g-pos-value-0) |
| --ux4g-pos-start-50 | var(--ux4g-pos-value-50) |
| --ux4g-pos-start-100 | var(--ux4g-pos-value-100) |
| --ux4g-pos-end-0 | var(--ux4g-pos-value-0) |
| --ux4g-pos-end-50 | var(--ux4g-pos-value-50) |
| --ux4g-pos-end-100 | var(--ux4g-pos-value-100) |
| --ux4g-pos-translate-middle | var(--ux4g-translate-middle) |
| --ux4g-pos-translate-middle-x | var(--ux4g-translate-middle-x) |
| --ux4g-pos-translate-middle-y | var(--ux4g-translate-middle-y) |
| --ux4g-pos-bottom-xs | var(--ux4g-pos-offset-1) |
| --ux4g-pos-bottom-sm | var(--ux4g-pos-offset-5) |
| --ux4g-pos-end-overflow-xs | var(--ux4g-pos-offset-n1) |
| --ux4g-pos-end-overflow-sm | var(--ux4g-pos-offset-n3) |
| --ux4g-pos-end-overflow-md | var(--ux4g-pos-offset-n5) |
Radius Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-radius-0 | 0px |
| --ux4g-radius-1 | 2px |
| --ux4g-radius-2 | 4px |
| --ux4g-radius-3 | 8px |
| --ux4g-radius-4 | 12px |
| --ux4g-radius-5 | 16px |
| --ux4g-radius-6 | 24px |
| --ux4g-radius-circular | 999px |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-radius-none | var(--ux4g-radius-0) |
| --ux4g-radius-xs | var(--ux4g-radius-1) |
| --ux4g-radius-sm | var(--ux4g-radius-2) |
| --ux4g-radius-md | var(--ux4g-radius-3) |
| --ux4g-radius-lg | var(--ux4g-radius-4) |
| --ux4g-radius-xl | var(--ux4g-radius-5) |
| --ux4g-radius-2xl | var(--ux4g-radius-6) |
| --ux4g-radius-full | var(--ux4g-radius-circular) |
Text transform Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-text-transform-none | none |
| --ux4g-text-transform-lowercase | lowercase |
| --ux4g-text-transform-uppercase | uppercase |
| --ux4g-text-transform-capitalize | capitalize |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-text-case-default | var(--ux4g-text-transform-none) |
| --ux4g-text-case-lower | var(--ux4g-text-transform-lowercase) |
| --ux4g-text-case-upper | var(--ux4g-text-transform-uppercase) |
| --ux4g-text-case-capitalize | var(--ux4g-text-transform-capitalize) |
Typography Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-font-family-base | "Noto Sans", system-ui, sans-serif |
| --ux4g-font-family-display | "Noto Sans Display", "Noto Sans", sans-serif |
| --ux4g-size-8 | 0.5rem |
| --ux4g-size-10 | 0.625rem |
| --ux4g-size-11 | 0.6875rem |
| --ux4g-size-12 | 0.75rem |
| --ux4g-size-14 | 0.875rem |
| --ux4g-size-16 | 1rem |
| --ux4g-size-18 | 1.125rem |
| --ux4g-size-20 | 1.25rem |
| --ux4g-size-24 | 1.5rem |
| --ux4g-size-28 | 1.75rem |
| --ux4g-size-32 | 2rem |
| --ux4g-size-36 | 2.25rem |
| --ux4g-size-40 | 2.5rem |
| --ux4g-size-48 | 3rem |
| --ux4g-size-52 | 3.25rem |
| --ux4g-size-56 | 3.5rem |
| --ux4g-size-60 | 3.75rem |
| --ux4g-size-64 | 4rem |
| --ux4g-size-80 | 5rem |
| --ux4g-size-120 | 7.5rem |
| --ux4g-line-height-80 | 5rem |
| --ux4g-line-height-72 | 4.5rem |
| --ux4g-line-height-52 | 3.25rem |
| --ux4g-line-height-44 | 2.75rem |
| --ux4g-line-height-36 | 2.25rem |
| --ux4g-line-height-32 | 2rem |
| --ux4g-line-height-28 | 1.75rem |
| --ux4g-line-height-24 | 1.5rem |
| --ux4g-line-height-20 | 1.25rem |
| --ux4g-line-height-18 | 1.125rem |
| --ux4g-line-height-16 | 1rem |
| --ux4g-line-height-14 | 0.875rem |
| --ux4g-font-weight-regular | 400 |
| --ux4g-font-weight-medium | 500 |
| --ux4g-font-weight-semibold | 600 |
| --ux4g-font-weight-bold | 700 |
| --ux4g-font-weight-display-semibold | 600 |
| --ux4g-font-weight-display-bold | 700 |
| --ux4g-text-align-start | left |
| --ux4g-text-align-center | center |
| --ux4g-text-align-end | right |
| --ux4g-text-transform-lowercase | lowercase |
| --ux4g-text-transform-uppercase | uppercase |
| --ux4g-text-transform-capitalize | capitalize |
| --ux4g-text-wrap | wrap |
| --ux4g-text-nowrap | nowrap |
| --ux4g-word-break | break-word |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-fs-60 | var(--ux4g-size-60) |
| --ux4g-fs-52 | var(--ux4g-size-52) |
| --ux4g-fs-48 | var(--ux4g-size-48) |
| --ux4g-fs-40 | var(--ux4g-size-40) |
| --ux4g-fs-36 | var(--ux4g-size-36) |
| --ux4g-fs-32 | var(--ux4g-size-32) |
| --ux4g-fs-28 | var(--ux4g-size-28) |
| --ux4g-fs-24 | var(--ux4g-size-24) |
| --ux4g-fs-20 | var(--ux4g-size-20) |
| --ux4g-fs-18 | var(--ux4g-size-18) |
| --ux4g-fs-16 | var(--ux4g-size-16) |
| --ux4g-fs-14 | var(--ux4g-size-14) |
| --ux4g-fs-12 | var(--ux4g-size-12) |
| --ux4g-fs-11 | var(--ux4g-size-11) |
| --ux4g-fs-8 | var(--ux4g-size-8) |
| --ux4g-lh-80 | var(--ux4g-line-height-80) |
| --ux4g-lh-72 | var(--ux4g-line-height-72) |
| --ux4g-lh-52 | var(--ux4g-line-height-52) |
| --ux4g-lh-44 | var(--ux4g-line-height-44) |
| --ux4g-lh-36 | var(--ux4g-line-height-36) |
| --ux4g-lh-32 | var(--ux4g-line-height-32) |
| --ux4g-lh-28 | var(--ux4g-line-height-28) |
| --ux4g-lh-24 | var(--ux4g-line-height-24) |
| --ux4g-lh-20 | var(--ux4g-line-height-20) |
| --ux4g-lh-18 | var(--ux4g-line-height-18) |
| --ux4g-lh-16 | var(--ux4g-line-height-16) |
| --ux4g-lh-14 | var(--ux4g-line-height-14) |
| --ux4g-fw-regular | var(--ux4g-font-weight-regular) |
| --ux4g-fw-medium | var(--ux4g-font-weight-medium) |
| --ux4g-fw-semibold | var(--ux4g-font-weight-semibold) |
| --ux4g-fw-bold | var(--ux4g-font-weight-bold) |
| --ux4g-fw-display-semibold | var(--ux4g-font-weight-display-semibold) |
| --ux4g-fw-display-bold | var(--ux4g-font-weight-display-bold) |
| --ux4g-ff | var(--ux4g-font-family-base) |
| --ux4g-ff-display | var(--ux4g-font-family-display) |
| --ux4g-ta-start | var(--ux4g-text-align-start) |
| --ux4g-ta-center | var(--ux4g-text-align-center) |
| --ux4g-ta-end | var(--ux4g-text-align-end) |
| --ux4g-tt-lowercase | var(--ux4g-text-transform-lowercase) |
| --ux4g-tt-uppercase | var(--ux4g-text-transform-uppercase) |
| --ux4g-tt-capitalize | var(--ux4g-text-transform-capitalize) |
| --ux4g-tw-wrap | var(--ux4g-text-wrap) |
| --ux4g-tw-nowrap | var(--ux4g-text-nowrap) |
| --ux4g-wb-break | var(--ux4g-word-break) |
Vertical align Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-vertical-align-baseline | baseline |
| --ux4g-vertical-align-top | top |
| --ux4g-vertical-align-middle | middle |
| --ux4g-vertical-align-bottom | bottom |
| --ux4g-vertical-align-text-top | text-top |
| --ux4g-vertical-align-text-bottom | text-bottom |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-va-baseline | var(--ux4g-vertical-align-baseline) |
| --ux4g-va-top | var(--ux4g-vertical-align-top) |
| --ux4g-va-middle | var(--ux4g-vertical-align-middle) |
| --ux4g-va-bottom | var(--ux4g-vertical-align-bottom) |
| --ux4g-va-text-top | var(--ux4g-vertical-align-text-top) |
| --ux4g-va-text-bottom | var(--ux4g-vertical-align-text-bottom) |
Visibility Tokens
Primitive Tokens
| Token | Value |
|---|---|
| --ux4g-visibility-visible | visible |
| --ux4g-visibility-hidden | hidden |
Semantic Tokens
| Token | Value |
|---|---|
| --ux4g-visibility-show | var(--ux4g-visibility-visible) |
| --ux4g-visibility-hide | var(--ux4g-visibility-hidden) |