Its mechanics are designed to offer both simplicity of use and extensive capabilities for precise customization of every detail.
Style Configuration Process
Define Color Palette: In the first step, you define the brand's palette by selecting up to three key background colors and defining neutral colors (dark and light). Additionally, you can specify three colors for borders.
Logo Implementation: Next, you upload your logos. For each of the five defined background colors, you can assign two different logo versions.
Contrast Optimization: The system allows for real-time verification of how the logo appears on each background. If the contrast is insufficient, which could impair legibility, you can immediately assign an alternative, more contrasting version of the graphic mark.
Typography Configuration: Within the style, you also define font properties. You can upload up to two font files and specify three different text colors for each of the five background colors.
Variable Structure and Automation
Although it may sound complex, our visual editor simplifies the entire process. The configuration is based on a logical system of variables, where for each of the five background colors (color_1, color_2, color_3, color_light, color_dark), you define dedicated assets.
For example, if you set the primary background color (color_1) to black, the system will prompt you to define a correspondingly light logo (logo_1_on_background_color_1) and a contrasting text color (text_1_on_background_color_1), such as white or light gray.
This process is repeated for all five background colors:
xxx_on_background_color_1
xxx_on_background_color_2
xxx_on_background_color_3
xxx_on_background_light
xxx_on_background_dark
Creating a complete set of rules that ensures visual consistency under all conditions.
Configuration Elements in the Editor
Background Color Settings: Define three main brand colors and two neutral ones.
Border Color Settings: Select three colors for frames and outlines.
Logo Settings: Assign up to two logo variants for each background color.
Text Color Settings: Define up to three font colors for each background.
Font File Settings: Upload up to two typeface files.
Live Preview: An interactive preview of the settings, such as the view of uploaded logos [7] and fonts [8] on a selected background, which facilitates design decisions.
