Brand colors Properties

Reference documentation for Servoy Theme Brand colors Properties

Overview

Brand colors Properties

The Brand colors Properties defines the various color settings associated with the brand identity of the application. These colors are used to maintain consistency and ensure that the application adheres to the visual guidelines of the brand.

Properties

Some properties have an additional button: Select Color, which opens the color chooser wizard.

Here's an in-depth look at each property:

Brand primary

This is the main color used to represent the brand. It is often used for primary buttons, links, and other key elements. Value: Hex color code (e.g., #428bca).

Brand tertiary

This is a secondary color that complements the primary brand color. It’s used for secondary actions or less prominent elements. Value: Hex color code (e.g., #E8E6E6).

Brand success

This color is used to indicate success or positive action. Commonly used for success messages, validation highlights, or positive indicators. Value: Hex color code (e.g., #5bc85c).

Brand info

Used for informational messages or icons, providing a neutral tone that stands out from the primary and secondary colors. Value: Hex color code (e.g., #5bc0de).

Brand warning

Indicates warnings or cautionary messages. It’s typically used to draw attention to potential issues that require user attention. Value: Hex color code (e.g., #f0ad4e).

Brand danger

This color is used for error messages or destructive actions, such as deletions or critical errors. Value: Hex color code (e.g., #d9534f).

Text-tertiary

This is the color used for less prominent text, often for placeholders or secondary information. Value: Hex color code (e.g., #999999).

Brand primary inverse

The inverse color of the primary brand color, used for text or elements that appear on a background of the primary brand color. Value: Hex color code (e.g., #FFF).

Brand tertiary inverse

The inverse color of the tertiary brand color, ensuring readability against tertiary-colored backgrounds. Value: Hex color code (e.g., @text-color).

Brand success inverse

The inverse color of the success color, used for text or icons on success-colored backgrounds. Value: Hex color code (e.g., #FFF).

Brand info inverse

The inverse color of the informational color. Value: Hex color code (e.g., #FFF).

Brand warning inverse

The inverse color for warning messages, ensuring text or icons are readable on a warning background. Value: Hex color code (e.g., #FFF).

Brand danger inverse

The inverse color of the danger color, ensuring readability on error backgrounds. Value: Hex color code (e.g., #FFF).

Brand primary highlighted

A slightly darker version of the primary brand color, used to highlight active or focused elements. Value: Derived using a function like darken(@brand-primary, 5%).

Brand tertiary highlighted

A darker version of the tertiary color for highlighting purposes. Value: Derived using a function like darken(@brand-tertiary, 5%).

Brand success highlighted

A darker shade of the success color used for emphasis on success-related elements. Value: Derived using a function like darken(@brand-success, 5%).

Brand info highlighted

A darker shade of the informational color for highlighting informational elements. Value: Derived using a function like darken(@brand-info, 5%).

Brand warning highlighted

A darker version of the warning color for emphasis. Value: Derived using a function like darken(@brand-warning, 5%).

Brand danger highlighted

A darker shade of the danger color, used for emphasizing critical or dangerous actions. Value: Derived using a function like darken(@brand-danger, 5%).

Brand primary highlighted inverse

The inverse color of the highlighted primary brand color. Value: Hex color code (e.g., #FFF).

Brand tertiary highlighted inverse

The inverse color of the highlighted tertiary brand color. Value: Hex color code (e.g., @text-color).

Brand success highlighted inverse

The inverse color of the highlighted success color. Value: Hex color code (e.g., #FFF).

Brand info highlighted inverse

The inverse color of the highlighted informational color. Value: Hex color code (e.g., #FFF).

Brand warning highlighted inverse

The inverse color of the highlighted warning color. Value: Hex color code (e.g., #FFF).

Brand danger highlighted inverse

The inverse color of the highlighted danger color. Value: Hex color code (e.g., #FFF).