Skip to main content

Interface: Palette

Complete color palette for the configurator interface.

Palette defines the comprehensive set of colors used throughout the configurator, organized by functional category. It ensures consistent color application across different components and states.

A well-structured color palette ensures visual consistency while providing enough variety for creating clear visual hierarchy and interaction states.

Properties​

accent​

accent: PaletteColor

Accent color palette for highlighting and emphasis.

These colors are used for elements that need to stand out or draw attention, such as important actions or selected states.

background​

background: PaletteBackground

Background colors for different interface areas.

These colors define the background surfaces for various UI components and regions, providing visual separation and hierarchy.

border​

border: PaletteBorder

Border colors for different UI elements.

These colors define boundaries and separations between elements with varying levels of emphasis.

boxShadow​

boxShadow: PaletteBoxShadow

Box shadow definitions for creating depth.

These shadow settings create a sense of elevation and layering in the interface, helping to establish visual hierarchy.

color​

color: Record<string, string>

Additional named colors for specific components.

These supplementary colors address specific use cases that aren't covered by the main color categories.

common​

common: PaletteCommon

Common base colors used throughout the interface.

These colors represent the fundamental black and white colors that serve as the foundation for the color system.

error​

error: PaletteColor

Error and validation colors.

These colors are used to indicate errors, problems, or invalid states in forms, validations, and system messages.

grey​

grey: ColorTints

Grey color scale for neutral UI elements.

A comprehensive scale of grey tones used throughout the interface for neutral elements that don't require semantic coloring.

group​

group: PaletteGroup

Colors for option group styling.

These colors control the appearance of option groups in the configurator, including active and hover states.

header: PaletteHeader

Header-specific colors.

These colors are specifically designed for the application header region to provide consistent branding.

hotSpots​

hotSpots: PaletteHotSpots

Colors for hotspot indicators on 3D models.

These define the appearance of interactive points on 3D models that users can interact with.

mesh​

mesh: PaletteMesh

Colors for 3D mesh highlighting.

These define how selected or highlighted parts of 3D models are visually indicated to users.

primary​

primary: PaletteColor

Primary brand colors.

These colors represent the main brand identity throughout the interface, particularly for primary actions.

scrollbar​

scrollbar: PaletteScrollbar

Scrollbar colors.

These colors define the appearance of scrollbars throughout the interface for consistent scrolling indicators.

status​

status: PaletteStatus

Status indicator colors.

These colors represent different status states like active, inactive, and open throughout the interface.

success​

success: PaletteColor

Success and confirmation colors.

These colors indicate successful operations, confirmations, and positive states in the interface.

type​

type: ThemeType

The overall theme type (light or dark).

This determines the general luminance profile of the theme and affects how other colors are calculated.

typography​

typography: PaletteTypography

Text colors for different typography contexts.

These colors control the appearance of text throughout the interface, ensuring proper contrast and readability.

warning​

warning: string

Color for warning indicators.

This color represents warning states that need attention but aren't errors.