The Digiscape color system defines all brand, surface, text, and utility colors as CSS variables (--bs-*). These variables ensure visual consistency across all components and allow designers and developers to work with a unified, scalable color palette.

All color tokens are stored centrally and exposed as customizable TYPO3 settings. You can adjust these values directly in the TYPO3 backend under the Settings section, allowing projects to override or extend the default Digiscape palette. Color changes applied in the Settings page propagate automatically throughout the framework, ensuring that UI elements, components, and layout structures reflect the updated design configuration.

The color palette follows a luminance scale ranging from 975 (darkest) to 25 (lightest), allowing each color family to provide a consistent set of tonal variations for backgrounds, borders, and text contrasts.

Text colors are defined as part of the Digiscape color system and are exposed as a dedicated color family (--bs-text-*).
They provide a full luminance scale from 975 (darkest) to 25 (lightest) ensuring readable typography across light and dark surfaces. Each value is optimized for accessibility and contrast, allowing text elements to adapt to different background contexts without requiring manual overrides.

The framework also supports a negative color scheme, where text automatically switches to a contrasting color when placed on dark surfaces or base colors. In this way, text remains legible across all surface and brand color variations, ensuring consistent readability and a coherent visual hierarchy throughout the interface.

Semantic colors define visual meaning in the interface and are used to communicate status, feedback, and system states. They are not brand-driven but function-driven, ensuring consistent UX patterns across all components. All semantic color tokens can be configured through the Settings page, enabling projects to extend or replace default values without modifying the core stylesheet.

Semantic text colors provide predefined, purpose-driven color values for conveying meaning in text-based UI elements. These colors correspond to the semantic color families and ensure consistent communication of system states such as confirmations, notifications, alerts, and errors.