Version: Pre-Released

Integrate Branding

Foreword

It is possible to customize the look of the application (colors, buttons radius, fonts, price format) as well as the logo and icons by editing and uploading three files: style.jsonc, logo.png and icons.svg.

Introduction to the Settings Files

style.jsonc

This file contains the list of all customizable style properties. Note that it doesn't need to inform them all, just the ones to customize are enough, the other ones will be automatically set to the default values.

This is a jsonc format, which is a usual JSON format with javascript-style comments allowed.

The top-level of this object contains 3 root attributes: "colors", "variables" and "rules".

{
  "colors": {},
  "variables": {},
  "rules": {}
}

colors object

"colors": {
    /*  BRAND COLORS
        primary color set */
    "primary-default": "#006699",
    "primary-active": "#333366",
    /*  alt- color set */
    "alt-default": "#08a67f",
    "alt-active": "#06926f",
    /*  secondary- color set */
    "secondary-default": "#eeeeee",
    "secondary-active": "#b6b6b6",

    /*  TEXT COLORS 
        primary- color set */
    "txt-primary-default": "#ffffff",
    "txt-primary-active": "#ffffff",
    /*  alt- color set */
    "txt-alt-default": "#ffffff",
    "txt-alt-active": "#ffffff",
    /*  secondary- color set */
    "txt-secondary-default": "#222222",
    "txt-secondary-active": "#222222",

    /*  LINK COLORS
        primary- color set */
    "link-primary-default": "#006699",
    "link-primary-active": "#333366",
    /*  secondary- color set */
    "link-alt-default": "#08a67f",
    "link-alt-active": "#06926f",

    /* ! --------------------------------------- EVENT COLORS --------------------------------------------
    /*  MESSAGE 
        event- color set */
    "event-success": "#1a88ab",
    "event-error": "#ae2b34",
    "event-info": "#eeeeee",
    "event-tip": "#1a88ab",
    /*   txt-event- color set */
    "txt-event-success": "#ffffff",
    "txt-event-error": "#ffffff",
    "txt-event-info": "#212121",
    "txt-event-tip": "#ffffff",

    /* ! --------------------------------------- CTA COLORS --------------------------------------------
    //   the 1px wide border is part of the total CTA height calculation
    // - If an outline button is wanted, please add "transparent" as the background color value.
    // - If an icon is present in the CTA (cta-primary-icon f.e.), the icon will have the same colors as the text
        primary cta- color set */
    "cta-primary-background-default": "#006699" /*  this value can be "transparent" */,
    "cta-primary-background-active": "#333366" /*  this value can be "transparent" */,
    "cta-primary-border-default": "#006699",
    "cta-primary-border-active": "#333366",
    "cta-primary-txt-default": "#ffffff",
    "cta-primary-txt-active": "#ffffff",
    /*  alt cta- color set */
    "cta-alt-background-default": "#08a67f" /*  this value can be "transparent" */,
    "cta-alt-background-active": "#06926f" /*  this value can be "transparent" */,
    "cta-alt-border-default": "#08a67f",
    "cta-alt-border-active": "#06926f",
    "cta-alt-txt-default": "#ffffff",
    "cta-alt-txt-active": "#ffffff",
    /*  secondary cta- color set */
    "cta-secondary-background-default": "#eeeeee" /*  this value can be "transparent" */,
    "cta-secondary-background-active": "#b6b6b6" /*  this value can be "transparent" */,
    "cta-secondary-border-default": "#eeeeee",
    "cta-secondary-border-active": "#b6b6b6",
    "cta-secondary-txt-default": "#222222",
    "cta-secondary-txt-active": "#222222"
  }

These variables define the colors of each customizable UI elements.

Default values are formatted as hexadecimal values: "#rrggbb", 2 hexadecimal digits (0-9+a-f) for each primary color red, green, blue, though it is also possible to format them as "rgb(R, G, B)" where R, G and B are numbers between 0 and 255. In the end, it will all be converted to R, G, B format in the loaded css. Note that keyword "transparent" is also allowed, though only for "CTA background" variables.

For more details about the targeted UI element of each of these variables, please refer to the Global Colors section below.

variables object

"variables": {
    /*  CTA CUSTOMIZATION
        primary CTA font weight - default: "bold" */
    "brand-font-weight-cta-l-primary": "bold",
    /*  alt CTA font weight - default: "bold" */
    "brand-font-weight-cta-l-alt": "bold",
    /*  secondary CTA font weight - default: "normal" */
    "brand-font-weight-cta-l-secondary": "normal",
    /*  CTA RADIUS */
    "brand-radius-cta": "2px",

    /* ! --------------------------------------- FONTS --------------------------------------------*/
    /*  font family - default: "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif" */
    "font-family": "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif"
  }

These variables define the font family, font weight as well as the border radius of each customizable texts and buttons.

Possible values for weight are the common ones allowed in css, see https:/.mddog.com/references/css/properties/font-weight/ Radius is defined in pixel. Possible values for fonts are described in the Family section below.

For more details about the targeted UI element of each of these variables, please refer to the Fonts section below.

rules object

"rules": {
    /* ! --------------------------------------- PRICING CUSTOMIZATION - optional --------------------------------------------*/
    /*   CASE 1: normal price
    /*   standard pricing style for .standard-price */
    "standard-price": [],
    /* ! -----------------------------------------------------------------------------------*/
    /*   CASE 2: membership price
    /*   membership pricing style for .standard-price */
    /*   This setting manages the display of the standard price indicated below the membership price. */
    "membership-standard-price": [],

    /*   membership pricing style for .membership-price */
    /*   This setting overwrites the display of the value of the membership price defined in membership-standard-price-label-branding. */
    "membership-price": [
        "color: #ff9d1a"
    ],

    /*   membership pricing style for .membership-price-label */
    /*   This setting manages the display of both label and value of the membership price. */
    "membership-price-label": [
        "color: #212121"
    ],

    /* ! -----------------------------------------------------------------------------------*/
    /*   CASE 3: reduced price
    /*   reduced pricing style for .standard-price */
    "reduced-standard-price": [
        "position: relative",
        "text-decoration: none"
    ],

    "reduced-standard-price-after": [
      "background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyI+PGxpbmUgeDE9IjAiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAiIHN0eWxlPSJzdHJva2U6cmdiKDE5OSw3Miw4NSk7IHN0cm9rZS13aWR0aDoxIi8+PC9zdmc+\")",
      "content: \"\"",
      "display: block",
      "height: 100%",
      "left: 0",
      "position: absolute",
      "top: 0",
      "width: 100%"
    ],

    "reduced-standard-price-printable": [],

    "reduced-standard-price-printable-after": [],

    /*   reduced pricing style for .reduced-price */
    "reduced-price": []
  }

These variables define the colors and layout of each customizable price elements.

Allowed values are the same as those commonly allowed by CSS standards. Note that the hexadecimal color values of this category won't be converted in a R, G, B format.

For more details about the targeted UI element of each of these variables, please refer to the Pricing Override section below.

Validation

This style.jsonc file will be validated as application page loads. If it contains any syntax error, unauthaurized variable name or wrongly formatted values, it will be dismissed with console errors/warnings and no customized css will be loaded in the application page, so be careful to properly edit this file before uploading it.

Common errors:

Wrong json syntax (missing closing "}" for instance) -> solution: validate the JSON object with a free online JSON validator such as https://jsonlint.com/. It also necessary to remove comments before validation (jsonc not supported).
Non existing variable name. -> solution: make sure all variable names belong to the lists mentioned above.
Wrong formatted value. -> solution: make sure all values belong to the expected ones, e.g. colors should be either #rrggbb or rgb(R,G,B).

logo.png

This file is the logo that will be displayed at the top left end corner of the application.

It must be a PNG format file, ideally of size 200x80 pixels, though it could be smaller or larger but keeping the same ratio will ensure a nice looking layout.

icons.svg

This file contains the list of all customizable symbols which will be used for displaying icons in the application. Note that it doesn't need to inform them all, just the ones to customize are enough, the other ones will be automatically set to the default ones.

Here is an example of a custom icons.svg file:

<svg>
  <symbol id="icon-action-notes" viewBox="0 0 25 25">
    <path d="M16,14H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Zm0-4H10a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Zm4-6H17V3a1,1,0,0,0-2,0V4H13V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H4A1,1,0,0,0,3,5V19a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V5A1,1,0,0,0,20,4ZM19,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V6H7V7A1,1,0,0,0,9,7V6h2V7a1,1,0,0,0,2,0V6h2V7a1,1,0,0,0,2,0V6h2Z"/>
  </symbol>
  <symbol id="icon-function-product-list" viewBox="0 0 25 25">
    <path d="M4 7a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1z" fill="#0D0D0D"/>
  </symbol>
</svg>

The content of this file is as follow:

The svg tag is mandatory. No need to specify the XML namespace for svgs, a tag without any attribute will do.
Inside the svg tag, any number of symbol tags describing the customized icons.

The symbol tag may have two attributes:

A mandatory id attribute corresponding to the id of the icon you want to customize. The possible ids and their places in the app is listed in the section Symbols impact on the UI.
An optional viewBox attribute that defines the coordinate system for the contents of the symbol. It is defined as a list of four values separated by white space or a comma, like this:

<symbol id="the-symbol-id-to-customize" viewBox="min-x min-y width height">
  <!-- Symbol contents go here -->
</symbol>

min-x: The minimum x-coordinate (horizontal) of the viewBox.
min-y: The minimum y-coordinate (vertical) of the viewBox.
width: The width of the viewBox.
height: The height of the viewBox.

If it is not specified, the SVG content will be displayed at its natural size, and the viewport dimensions (specified by the width and height attributes of the <svg> element) will determine how the content is rendered.

At last, inside the symbol tag, goes the SVG markup describing what your icon should look like. I can be a path tag or any number of line, rect or other svg primitives. You should be able to copy / paste its content from the web or from your Graphic Design Software of choice.

Uploading the Settings Files

Once both style.jsonc and logo.png and/or icons.svg files are created, it is necessary to upload them on the ByMe platform in order for the application to process them at launch. For each asset to upload in our platform there is a succession of 3 network calls to make, that are documented below.

NOTE : The following procedure is for a specific environment. These steps should be followed on every environments based on the target (staging, main, etc.).

Get a temporary bucket access

The first step is to retrieve a temporary access to the upload bucket. The corresponding call is one of our web services: POST storages/presigned/post/aws. For more details, see documentation here.

It is necessary to provide a key parameter. Need to choose the name, and it doesn't need to have an extension. We advise to use a UUID generator to have a different key each time, but it is also fine to reuse always the same key.

The response of this web-service is in the following form:

{
  "url": "string",
  "fields": {
    "key": "string",
    "bucket": "string",
    "X-Amz-Algorithm": "string",
    "X-Amz-Credential": "string",
    "X-Amz-Date": "string",
    "Policy": "string",
    "X-Amz-Signature": "string"
  }
}

It contains all the necessary information in order to upload the asset on the temporary bucket. For the context of this documentation, let's call this return object tmpBucketResponse

Upload the asset on the temporary bucket

The second call to perform is not a ByMe web-service, but an AWS upload call. Refer to Amazon documentation for a detailed explanation of how to do this.

Need to do a POST call to tmpBucketResponse.url. The body of the request must contain the following fields in a form-data:

key                ⮞ tmpBucketResponse.fields.key
acl                ⮞ "private" or "public-read". If we indicated an acl value in the first call, it must be the same here.
bucket             ⮞ tmpBucketResponse.fields.bucket
X-Amz-Credential   ⮞ tmpBucketResponse.fields.X-Amz-Credential
X-Amz-Algorithm    ⮞ tmpBucketResponse.fields.X-Amz-Algorithm
X-Amz-Date         ⮞ tmpBucketResponse.fields.X-Amz-Date
X-Amz-Signature    ⮞ tmpBucketResponse.fields.X-Amz-Signature
policy             ⮞ tmpBucketResponse.fields.policy
file               ⮞ the file asset to upload. The value given is of type File.

⚠️ Make sure that the "file" attribute is always the last in the form. The reason is that all elements placed after this "file" attribute are ignored.

Fore more details about how to send a request containing a form-data, refer to this MDN resource.

Copy the settings files to the right place

Now that the asset is uploaded on the temporary bucket, the last step is to copy it to the main bucket. This last step is a call to one of these two web services:

POST applications/{applicationID}/assets/{path}
POST applicationdistributions/{distributionID}/assets/{path}

Notes:

applicationID is 2 for Kitchen. Using the first web-service will target the application level.
distributionID is the application distribution ID to target. Using the second web-service will target the application-distribution level.
At runtime, when launching the planner, the application-distribution asset is used in priority, and we use the application asset as a fallback.
path is the path on the main bucket where the asset will be copied. here are the correct values to use for this path parameter:

logo file	style file	icons file	need mapping file
branding%2Flogo.png	branding%2Fstyle.jsonc	branding%2Ficons.svg	branding%2Fneedmapping.json

The formatting is not a mistake here, need to write "%2F" and not "/".

⚠️ Be very careful with the value of this "path" parameter. It is necessary to use exclusively those 2 values. You take the risk of overwritting another asset by using another path.

This web-service call must contain the following body:

{
    "tmpUploadKey" : "string"
}

The value of tmpUploadKey must be the generated temporary key. In other words, we need to put the value of tmpBucketResponse.fields.key.

CSS impact on the UI

The JSON file will be converted to a CSS file, which contains all the customizable branding settings in the application. The following documentation will detail how each setting impacts the UI.

Note: the hexadecimal codes and screenshots used in this documentation are based on the default Core theme. These are the fallback settings if no branding file is provided.

Global Colors

Branding Colors

Primary and alt colors are the brand's identity colors. Primary and alt can be similar, but we recommend that the secondary color be different (more neutral, eg. a light grey).

Primary

$brand-clr-primary-default: #006699;
$brand-clr-primary-active: #333366;

The primary color is used in multiple places in the UI (default and active state):

Focused input border color

Checkboxes background

Radio buttons

Focused select box (dropdown menu) border

Icon button's icon on hover, focus, selected state

Icon and label button's text and icon on hover, focus, selected state

Label button's text on hover + label button's background on focus and selected state

Checked toggle buttons background

Button text's text

Arrow button's text on active state

Tab button's background on selected state

Nav button's text on hover

Catalog browser's product cards border on hover and selected state

Room shape's selected state

Sun position's circle

Sun inclination half circle

Viewpoint's slider track and handle + viewpoint label's background

Alt

$brand-clr-alt-default: #08A67F;
$brand-clr-alt-active: #06926F;

The alt color is used in the navigation. Brands can choose to use the same color for primary and alt variables; if so, there will be no difference for the navigation color.

Navigation button's background on focus and selected state

Navigation Button

Secondary

$brand-clr-secondary-default: #eee;
$brand-clr-secondary-active: #b6b6b6;

The secondary color is used in multiple places in the UI (default and active state):

Icon button with background's background color and border color

Icon with background color

Tab button's background color in default state

Tab button

Header Colors

$brand-clr-header-border-bottom: #08a67f;
$brand-clr-header-title-idle: #212121;
$brand-clr-header-title-hover: #08a67f;
$brand-clr-header-title-disable: #cbcbcb;
$brand-clr-header-title-active: #08a67f;
$brand-clr-header-hamburger-hover: #bbbbbb;

Header colors are used to set colors for the header of the application.

Header

Branding Text Colors

The branding text colors are used whenever we need to add text above a background with a branding color. Readability is the main concern here. There are 2 states, that match the background color's states: default and active.

Primary A text in $brand-clr-txt-primary-default must be readable on a $brand-clr-primary-default background.
A text in $brand-clr-txt-primary-active must be readable on a $brand-clr-primary-active background.

Alt A text in $brand-clr-txt-alt-default must be readable on a $brand-clr-alt-default background.
A text in $brand-clr-txt-alt-active must be readable on a $brand-clr-alt-active background.

Secondary A text in $brand-clr-txt-secondary-default must be readable on a $brand-clr-secondary-default background.
A text in $brand-clr-txt-secondary-active must be readable on a $brand-clr-secondary-active background.

Link Colors

The link colors are used to style href links. There are no href links in the Kitchen application, therefor the links settings are not used.

Event Colors

The event colors include 4 types: info, success, error and tip. They are used to provide user feedbacks on UI elements, such as: notifications (informative notifications, success notifications, error notifications); recommendations, warnings or tips in the help center; input errors, etc.

Colors

Success

$brand-clr-event-success: #1a88ab;

The event success color is used on success notification's background.

Error

$brand-clr-event-error: #ae2b34;

The event error color is used in multiple places in the UI:

Input's border and input error message when there is an error in a field (input or text area): Input border and error message

Help center's error counter's background: Help center count

Help center's expired product's or warning's section icon:

Help center's expired products or warnings card title: Help center cards

Error notification's background:

Info

$brand-clr-event-info: #eeeeee;

The event info color is used on info notification's background.

Tip

$brand-clr-event-tip: #1a88ab;

The event tip color is used in the help center:

Help center's recommendation's section icon:

Help center's recommendation's card title: Help Center recommendation card title

Help center's tool tips' title and icon: Help Center tool tips

Text Colors

The event text colors are used whenever we need to add text above a background with an event color. Readability is the main concern here.

Success A text in $brand-clr-txt-event-success must be readable on a $brand-clr-event-success background.
Error A text in $brand-clr-txt-event-error must be readable on a $brand-clr-event-error background.
Info A text in $brand-clr-txt-event-info must be readable on a $brand-clr-event-info background.
Tip A text in $brand-clr-txt-event-tip must be readable on a $brand-clr-event-tip background.

Call to Actions (CTA)

There are 3 types of CTA: primary, alt and secondary.
Each type has different sizes: S, M, L.
There are 2 customizable states for each CTA: default and active (active = on hover, focus and selected state).
The "disabled" state is automatically generated, using the CTA default settings with a 0.5 opacity and default cursor.

The settings file allows to modify multiple parameters:

All Types

Radius

$brand-radius-cta: rem( 2 );

This variable changes the border radius of all CTA (primary, alt, secondary) in the application (buttons, such as navigation or catalog entries, won't be modified by this variable).

Each type of CTA has the same settings: font-weight, background color, border color and text color. Here are the details for the primary CTA.The same is true for Alt and Secondary CTA.

Primary (same logic applies to Alt and Secondary)

Font Weight

$brand-font-weight-cta-l-primary: bold;

This variable changes the font-weight of the primary CTA's text for L size and bigger. To ensure readability, smaller buttons will always have normal font-weight.

Background

$brand-clr-cta-primary-background-default: $brand-clr-primary-default;
$brand-clr-cta-primary-background-active: $brand-clr-primary-active;

These variables change the primary CTA's background color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. It can be "transparent" for an outline button.

Border

$brand-clr-cta-primary-border-default: $brand-clr-primary-default;
$brand-clr-cta-primary-border-active: $brand-clr-primary-active;

These variables change the primary CTA's border color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. If no border is wanted, the same color code as the CTA background should be used (do not use "transparent", as the 1px wide border is part of the total CTA height/width calculation).

Text

$brand-clr-cta-primary-txt-default: $brand-clr-txt-primary-default;
$brand-clr-cta-primary-txt-active: $brand-clr-txt-primary-active;

These variables change the primary CTA's text color, in default and active state. It can be the same as the branding primary text color or any other hexadecimal code, as long as it is readable on the chosen CTA primary background color.

Fonts

The different font sizes and line heights in the application are calculated based on those settings.

Family

$font-family : Helvetica, Arial, "Bitstream Vera Sans", sans-serif;

This variable changes the font-family throughout the entire application.

Size

$font-size : 14;

This variable changes the font-size base upon which the different font sizes are scaled.

Line Height

$line-height-base : 18;

This variable changes the line height base upon which the different line-heights are scaled.

$brand-header-height: 51px;
$brand-header-action-height: 51px;
$brand-menu-icon-width: 24px;
$brand-hover-width: 50px;

These variables change the header size based upon the provided values

Header

Header title

$brand-title-padding-side: 15px,
$brand-title-padding-bottom: 13px,
$brand-title-margin-gap: 0px,
$brand-title-margin-bottom: 0px,
$brand-title-border-bottom-width: 4px

These variables change the header title size based upon the provided values

Header title

Pricing Override

This section is dedicated to the override styling for each type of price. SASS mixins are available and can be filled with CSS properties to override default price styling. As there is a default style, this override is optional. The branding style will override any CSS property, as it is meant to.

New CSS properties will impact every price displayed in the application, therefore it is not advisable to change properties that can break the layout, such as the font-size, as it will change the visible price in every location (topbar, template info window, catalog browser, etc).

There are 3 possible cases handled:

No Reduction

Only the standard price is visible and its style can be overridden.

// case 1: standard pricing -> overriding style for .standard-price
@mixin standard-price-branding {
}

Default style:

Membership Pricing

Displays the standard price under the fidelity program price. Membership price can have a label before its value. Both prices and the membership label styles can be overridden. Text of membership label is a localized string which is managed by the application translation key kitchen.app.member_price. To know more, refer to Localization.

// case 2: membership pricing -> overriding style for .standard-price
// This setting manages the display of the standard price indicated below the membership price.
@mixin membership-standard-price-branding {
}

// case 2: membership pricing -> overriding style for .membership-price
// This setting overrides the display of the value of the membership price defined in membership-standard-price-label-branding.
@mixin membership-membership-price-branding {
}

// case 2: membership pricing -> overriding style for .membership-price-label
// This setting manages the display of both label and value of the membership price.
@mixin membership-standard-price-label-branding {
}

Default style:

Reduced Pricing

Displays the standard price under the reduced price. Both can be overridden.

// case 3: reduced pricing -> overriding style for .standard-price
@mixin reduced-standard-price-branding {
}

// case 3: reduced pricing -> overriding style for .reduced-price
@mixin reduced-reduced-price-branding {
}

Default style: Default style reduced price

Symbols impact on the UI

The following section will describe which symbol ids can be overridden and to which icons it refers in the application.

Symbol id	Default icon	Note
icon-action-notes		Note tool icon (in the header)
icon-function-product-list		Product list icon (in the header)
icon-action-undo		Undo icon (in the header, editors, ...)
icon-action-redo		Redo icon (in the header, editors, ...)
icon-action-save		Save icon (in the header, popins, ...)
icon-view-close		Close icon (in the header, popins, ...)
icon-catalog-accessories		Catalog icon used for Accessories category (see Application Distribution parameters catalogEntries)
icon-catalog-appliances		Catalog icon used for Appliances category (see Application Distribution parameters catalogEntries)
icon-catalog-coverings		Catalog icon used for Covering category (see Application Distribution parameters catalogEntries)
icon-catalog-deco		Catalog icon used for Deco category (see Application Distribution parameters catalogEntries)
icon-catalog-dining		Catalog icon used for Dining category (see Application Distribution parameters catalogEntries)
icon-catalog-doors		Catalog icon used for Doors category (see Application Distribution parameters catalogEntries)
icon-catalog-flooring		Catalog icon used for Flooring category (see Application Distribution parameters catalogEntries)
icon-catalog-front		Catalog icon used for Front category (see Application Distribution parameters catalogEntries)
icon-catalog-furniture		Catalog icon used for Furniture category (see Application Distribution parameters catalogEntries)
icon-catalog-furniture-alt		Alternative catalog icon used for Furniture category (see Application Distribution parameters catalogEntries)
icon-catalog-handles		Catalog icon used for Handles category (see Application Distribution parameters catalogEntries)
icon-catalog-objects		Catalog icon used for Object category (see Application Distribution parameters catalogEntries)
icon-catalog-openings		Catalog icon used for Opening category (see Application Distribution parameters catalogEntries)
icon-catalog-worktop		Catalog icon used for Worktop category (see Application Distribution parameters catalogEntries)
icon-tools-change-room		Initiate plan tool icon (in the toolbar)
icon-tools-wall		Draw plan tool icon (in the toolbar)
icon-function-water-supply		Water supply tool icon (in the toolbar)
icon-action-search		Search icon (in the toolbar, catalog browser, ...)
icon-action-edit		Edit icon (in the property window)
icon-action-split		Split icon (in the property window)
icon-action-opening		Open icon (in the property window)
icon-action-zoomTo		Zoom To icon (in the property window)
icon-action-position		Position icon (in the property window)
icon-action-duplicate		Duplicate icon (in the property window)
icon-action-delete		Delete icon (in the property window)
icon-action-clean		Empty room icon (in the property window)
icon-tools-wall-side		Wall side icon (in the edit property panel)
icon-tools-opening-side		Opening side icon (in the edit property panel)
icon-tools-background		Background tool icon (in the "Create a realistic image" popin)
icon-tools-azimuth		Azimuth tool icon (in the "Create a realistic image" popin)
icon-tools-inclination		Inclination tool icon (in the "Create a realistic image" popin)
icon-action-download		Download icon (in the "Upload a 2D floorplan" popin)
icon-function-document		Document icon (in the "Upload a 2D floorplan" popin)
icon-action-rotate-clockwise		Download icon (in the "Upload a 2D floorplan" popin)
icon-tools-opacity		Rotate clockwise icon (in the "Upload a 2D floorplan" popin)
icon-action-move		Move icon (in the "Upload a 2D floorplan" popin)
icon-action-double-arrow		Double arrow icon (in the "Upload a 2D floorplan" popin)
icon-worktop-corner-simple		Simple corner tab icon (in the Corner cut overlay of the worktop editor)
icon-worktop-corner-double		Double corner tab icon (in the Corner cut overlay of the worktop editor)
icon-worktop-corner-invert		Invert corner tab icon (in the Corner cut overlay of the worktop editor)
icon-worktop-corner-rounded		Rounded corner tab icon (in the Corner cut overlay of the worktop editor)
icon-worktop-cut-out-rectangle		Rectangle cut-out tab icon (in the Cut-out overlay of the worktop editor)
icon-worktop-cut-out-circle		Circle cut-out tab icon (in the Cut-out overlay of the worktop editor)
icon-worktop-edge-triple		Triple edge cut tab icon (in the Edge cut overlay of the worktop editor)
icon-worktop-edge-rounded		Rounded edge cut tab icon (in the Edge cut overlay of the worktop editor)
icon-worktop-custom		Custom worktop legend icon (in the overlay of the worktop editor)
icon-worktop-grain-direction		Gain direction worktop legend icon (in the overlay of the worktop editor)
icon-worktop-front-edge		Front edge worktop legend icon (in the overlay of the worktop editor)
icon-worktop-polished-underside		Polished underside legend icon (in the legend of the worktop editor)
icon-worktop-illustration		Illustration worktop icon (in the legend of the worktop editor)
icon-action-expired		Product expired icon (in the help center, summary step)
icon-action-warning		Warning icon (in the help center, summary step)
icon-action-tip		Tip icon (in the help center, summary step)
icon-global-app		Global app icon (in the summary step)
icon-action-info		Info icon (in the Summary step or near the price in the header)
icon-loader		Loader icon (in the "Create a 360° image" popin)
icon-action-success		Success icon (in the "Create a 360° image" popin)
icon-action-fail		Fail icon (in the "Create a 360° image" popin)
icon-action-help		Help icon (in the Help Center)
icon-action-reload		Reload icon (in the Help Center)
icon-action-play		Play icon (in the Help Center)
icon-tools-options		Tools options icon (in the navigation tools)
icon-view-2d		2d view icon (in the navigation tools)
icon-view-3d		3d view icon (in the navigation tools)
icon-view-fp		First person view icon (in the navigation tools)
icon-action-zoom		Zoom icon (in the navigation tools)
icon-action-unzoom		Unzoom icon (in the navigation tools)
icon-action-viewpoint		Viewpoint icon (in the navigation tools)
icon-action-zoom-extend		Extend zoom (in the navigation tools)
icon-view-maximize		Maximize icon (in the Catalog)
icon-view-minimize		Minimize icon (in the Catalog)
icon-favorites-item		Favorites item icon (in the Catalog)
icon-favorites-arrow		Favorites arrow icon (in the Catalog)
icon-favorites-list		Favorites list icon (in the Catalog)
icon-function-favorite		Favorite icon (in the toolbar, Catalog...)
icon-function-favorite-filled		Favorite filled icon (in the Catalog)
icon-action-360-render		360 render icon (in the "Images & 2D Plans" media list)
icon-action-delivery		Delivery icon (in the Summary step)
icon-action-installation		Installation icon (in the Summary step)
icon-action-drag		Drag icon (in the "Import your floorplan file" popin)
icon-action-electric-warning		Electric warning icon (in the Help Center)
icon-action-financial		Financial icon (in the Summary step)
icon-action-print		Print icon (in the Summary step)
icon-action-share-2		Share icon (in the Summary step)
icon-action-export-hbm-2		Export hbm icon (in the Summary step)
icon-function-coworker		Coworker icon (in the Summary step)
icon-function-hq-render		Render hq icon (in the "Images & 2D Plans" media list)
icon-function-render		Render icon (in the "Images & 2D Plans" media list)
icon-function-4K-render		Render 4K icon (in the "Images & 2D Plans" media list)
icon-tags-attic		Attic icon (in Photo Studio)
icon-tags-basement		Basement icon (in Photo Studio)
icon-tags-bathroom		Bathroom icon (in Photo Studio)
icon-tags-bedroom		Bedroom icon (in Photo Studio)
icon-tags-boilerroom		Biolerroom icon (in Photo Studio)
icon-tags-breakfast		Breakfast icon (in Photo Studio)
icon-tags-diningroom		Diningroom icon (in Photo Studio)
icon-tags-entertainment		Entertainment icon (in Photo Studio)
icon-tags-garage		Garage icon (in Photo Studio)
icon-tags-hallway		Hallway icon (in Photo Studio)
icon-tags-laundryroom		Laundry room icon (in Photo Studio)
icon-tags-library		Library icon (in Photo Studio)
icon-tags-livingroom		Living room icon (in Photo Studio)
icon-tags-mudroom		Mudroom icon (in Photo Studio)
icon-tags-nursery		Nursery icon (in Photo Studio)
icon-tags-office		Office icon (in Photo Studio)
icon-tags-pantry		Pantry icon (in Photo Studio)
icon-tags-winecellar		Wine cellar icon (in Photo Studio)
icon-tools-auto		Auto tool icon (in Photo Studio)
icon-tools-bulb-alight		Bulb alight tool icon (in Photo Studio)
icon-tools-bulb-intensity-1		Bulb intensity 1 icon (in Photo Studio)
icon-tools-bulb-intensity-2		Bulb intensity 2 icon (in Photo Studio)
icon-tools-bulb-intensity-3		Bulb intensity 3 icon (in Photo Studio)
icon-tools-bulb-intensity-4		Bulb intensity 4 icon (in Photo Studio)
icon-tools-bulb-intensity-5		Bulb intensity 5 icon (in Photo Studio)
icon-tools-bulb-off		Bulb off icon (in Photo Studio)
icon-tools-bulb-twice		Bulb twice icon (in Photo Studio)
icon-tools-camera-full		Camera full icon (in Photo Studio)
icon-tools-camera		Auto tool icon (in Photo Studio)
icon-tools-ceiling-height		Ceiling height icon (in Flooplan step mobile toolbar)
icon-tools-change-room		Change room icon (in Photo Studio)
icon-tools-inclination-house		Inclination house icon (in Photo Studio)
icon-tools-dots		Dots icon (in Photo Studio)
icon-tools-flares		Flares icon (in Photo Studio)
icon-tools-kitchen		Kitchen icon (in Photo Studio)
icon-tools-lens-14		Lens 14 icon (in Photo Studio)
icon-tools-lens-24		Lens 24 icon (in Photo Studio)
icon-tools-lens-35		Lens 35 icon (in Photo Studio)
icon-tools-lens-60		Lens 60 icon (in Photo Studio)
icon-tools-lens		Lens icon (in Photo Studio)
icon-tools-measure		Measure tool icon (in the header)
icon-tools-night		Night tool icon (in Photo Studio)
icon-tools-picture		Create image tool icon (in the toolbar) and picture icon (in the medias list)
icon-tools-plan		Plan icon (in the medias list)
icon-tools-sun-outline		Sun outline icon (in Photo Studio)
icon-tools-sun		Sun icon (in Photo Studio)
icon-tools-tilt		Tilt icon (in Photo Studio)
icon-view-front-elevation		Front elevation icon (in the navigation tools -> coming soon!)

Foreword​

Introduction to the Settings Files​

style.jsonc​

Validation​

logo.png​

icons.svg​

Uploading the Settings Files​

CSS impact on the UI​

Global Colors​

Branding Colors​

Primary​

Alt​

Secondary​

Header Colors​

Branding Text Colors​

Link Colors​

Event Colors​

Colors​

Success​

Error​

Info​

Tip​

Text Colors​

Call to Actions (CTA)​

All Types​

Radius​

Primary (same logic applies to Alt and Secondary)​

Font Weight​

Background​

Border​

Text​

Fonts​

Family​

Size​

Line Height​

Header​

Header title​

Pricing Override​

No Reduction​

Membership Pricing​

Reduced Pricing​

Symbols impact on the UI​

Foreword

Introduction to the Settings Files

style.jsonc

Validation

logo.png

icons.svg

Uploading the Settings Files

CSS impact on the UI

Global Colors

Branding Colors

Primary

Alt

Secondary

Header Colors

Branding Text Colors

Link Colors

Event Colors

Colors

Success

Error

Info

Tip

Text Colors

Call to Actions (CTA)

All Types

Radius

Primary (same logic applies to Alt and Secondary)

Font Weight

Background

Border

Text

Fonts

Family

Size

Line Height

Header

Header title

Pricing Override

No Reduction

Membership Pricing

Reduced Pricing

Symbols impact on the UI