(opens in a new tab)

Variables

Design variables serve as the single source of truth for visual attributes across platforms.

Design variables represent shared design attributes such as color, typography, and spacing. They ensure consistency and streamline cross-platform development. Variables should always be favored over hardcoded values so that colors adapt across light/dark themes and spacing responds to the active density.

Developers and designers

Design variables align developers and designers through a shared naming convention and unified visual language.

Copy link to headline:Architecture

The variable architecture consists of three layers. Only semantic variables are intended for direct use in applications:

  1. Global variables

    Global variables store raw, context-agnostic design values (such as primitive colors and unit scales). They are not intended to be used directly in application code.

  2. Semantic variables
    used by applications

    Semantic variables map raw values to functional use cases and adapt across light and dark modes. Developers and designers should always build components using semantic variables.

  3. Component variables

    Component variables are reserved for internal component definitions and unique state overrides. They are not intended for external use.

Global variable

onyx-color-system-purple-800
#603E89

Semantic variable

onyx-color-text-icons-info-intense
onyx-color-system-purple-800
onyx-color-system-purple-500
Visualization of color mapping for global and semantic variables.

Copy link to headline:Usage

Reference available variables in the foundation sections below:

Colors & Themes

Typography

Density

Borders & Shadows

Animations


All variables share the onyx prefix to avoid collisions with application styles. In code, variables use kebab-case dashes; in Figma, they use slash notation. For example, --onyx-color-text-icons-neutral-intense in CSS corresponds to onyx/color/text/icons/neutral/intense in Figma.

All variables are exposed as CSS custom properties(opens in a new tab) and referenced with var():