Applies to:          Stayntouch PMS          

Stayntouch IBE: Color Customization

This document explains how branding colors work in Stayntouch IBE, what Primary and Secondary colors control, how text and button colors adapt automatically, and why a minimum contrast rule applies to Secondary color.

Color changes are made by Stayntouch, not by the hotel. Hotels do not have direct access to these settings. To set up or change your colors, please contact onboarding@stayntouch.com with your HEX codes.

TABLE OF CONTENTS

• Overview
• Where Each Color Is Used
• How Primary and Secondary Behave Differently
  • Primary: Text Color Switches Automatically
  • Secondary: Used As Text Color, Not Just Background
  • The Book Now Button
• Accessibility: The 4.5:1 Contrast Rule
  • Why Secondary Only, and Not Primary?
• Restyled Buttons and Controls
  • Cart and Check-Out
  • Payment and Booking Action Buttons
  • Extras Carousel Arrows
  • Same Outlined Secondary Style Also Applies To:
• Elements Not Affected by Custom Colors
• Need a Color Change?

Overview

Stayntouch IBE supports two brand colors, Primary and Secondary, replacing the old fixed four color templates. The order is fixed: Primary is always Primary, Secondary is always Secondary, and they cannot be swapped.

From these two inputs, the IBE automatically generates everything else, text contrast, a lighter tint used for certain backgrounds, and the styling of buttons and other interactive elements.

To request a color setup or change, send your two HEX codes to onboarding@stayntouch.com.

Primary color (e.g. #d4e490)

Secondary color (e.g. #bc2595)

Where Each Color Is Used

How Primary and Secondary Behave Differently

Primary: Text Color Switches Automatically

Wherever Primary is used as a background, the text sitting on top of it switches automatically between black and white so it stays readable. A light Primary produces black text, a dark Primary produces white text. This is why Primary has no minimum contrast requirement; the text always adapts to whatever color is chosen.

Secondary: Used As Text Color, Not Just Background

Secondary works differently. In several places (price text, buttons, and other elements), Secondary color is the text color itself, sitting on a fixed white (#FFFFFF) background. Unlike Primary, this text color does not swap to something else depending on contrast; it is always Secondary. That is why a light Secondary color is a genuine readability risk, and why the contrast rule below applies to Secondary only.

The Book Now Button

The Book Now button's background color is chosen dynamically, not fixed to Primary:

• If Primary is a dark color, the Book Now button uses Primary as its background.
• If Primary is a light color, the button falls back to Secondary as its background instead, since a light Primary would not give enough contrast for the (fixed) white button text.

This means two hotels with the same Primary color can see the Book Now button rendered in different colors, depending on whether Primary is light or dark. This is expected behavior.

Accessibility: The 4.5:1 Contrast Rule

Secondary color is checked for accessibility whenever a color request is set up:

• Secondary color's HEX value must have a WCAG 2.1 contrast ratio of at least 4.5:1 against white (#FFFFFF). You can test your HEX code in advance using the Coolors Contrast Checker, just replace the first HEX code in the URL with your own Secondary color.
• If it fails this check, our team will let you know and ask for a darker shade of the same color before it can be applied.

Why Secondary Only, and Not Primary?

Secondary is used as text color on a white background in multiple places (see above), and that text color does not auto adjust. Primary is not restricted, since whenever it is used as a background, its text color is automatically restyled to black or white to remain readable, so a light Primary does not carry the same accessibility risk.

A number of hotels use light Primary colors today as part of the Preset Colors. This is expected and correct behavior, since the text color adapts around it.

Restyled Buttons and Controls

The following controls also read from Secondary color for visual consistency across every hotel's brand colors.

Cart and Check-Out

• Remove (per room): Outlined style, Secondary color border and text, with a trash icon
• Remove all: Same outlined style and trash icon as Remove, shown only when there are two or more rooms in the cart
• Edit, Continue browsing, and Check out use solid Secondary styling

Payment and Booking Action Buttons

Styling depends on how many payment options are configured for the hotel:

• Payment gateway only:Proceed to payment appears alone as a solid Primary button
• Non-guaranteed workflow only:Complete booking without a payment card appears alone as a solid Secondary button, since it is the guest's only path to complete the booking
• Both options available:Proceed to payment appears as a solid Primary button, with Complete booking without a payment card underneath it as an outlined Secondary button

Extras Carousel Arrows

• The active arrow (next, or previous once scrolled) displays at full Secondary color
• The disabled arrow (previous, at the start of the list) displays at 40% opacity of the same Secondary color, so it stays part of the same color family while clearly reading as unavailable

Same Outlined Secondary Style Also Applies To:

• Non-Guaranteed Booking popup (Close button)
• Edit profile (Cancel)
• Modify Customer Info (Cancel)
• Cancellation popup with policies (Cancel)
• Adding notes to a reservation (Cancel)
• Edit reservation, confirm final changes (Cancel)

Elements Not Affected by Custom Colors

The following stay fixed regardless of a hotel's Primary or Secondary selection:

• Best Price Available box (calendar view): fixed grey #7C7C7C
• Pending prerequisite buttons (e.g. Proceed to Payment before Terms and Conditions is accepted): fixed grey #EDEDED
• General page and section backgrounds, including the Reservation Cost Summary, Extras posting information, My Trips, Online Booking Confirmation, and IBE Letters: fixed grey #EFEFEF

Need a Color Change?

Color setup and changes are currently handled by Stayntouch. Please email onboarding@stayntouch.com with your Primary and Secondary HEX codes, and the team will apply and validate them for you.