WBE Styles
Configurable Styling Options
This section allows you to customize the appearance of your components. Easily configure key styling attributes such as colors and border radius to suit your design needs. Changes can be previewed live in the preview section, allowing for instant feedback and ensuring your design aligns with your vision.
Warning: Please note that after saving the style changes may take a few seconds to a few minutes to fully apply in the live environment. This delay is due to caching and server synchronization processes. We recommend refreshing the page after a short wait to ensure the updates are reflected properly.
Styling Legend
Below is a full overview of all styling tokens grouped by their purpose.
📝 Text Colors
| Styling option | Controls | Notes |
|---|---|---|
| Text Primary | Main text | Default content |
| Text Secondary | Less important text | Labels |
| Text Light | Muted text | Hints |
| Text White | Text on dark backgrounds | Footer etc. |
| Text Button Light | Button text on dark buttons | Primary CTA buttons |
| Text Button Dark | Button text on light buttons | Secondary/light buttons |
| Footer Text | Regular footer text | Default old value: Text White |
| Footer Link | Footer links and footer buttons | Default old value: Text White |
🧱 Surfaces & Backgrounds
| Styling option | Controls | Notes |
|---|---|---|
| Surface Primary | Main content background | Usually white |
| Surface Secondary | Secondary sections | Cards, panels |
| Surface Brand Secondary | Secondary branded areas | Alternative highlighted sections |
| Surface MD | Mid-level background | Mobile/header areas |
| Surface Dark | Subtle contrast areas | Light gray blocks |
| Surface Background | Page background | Overall layout |
| Header Message Background | Top message banner | Independent |
| Footer Background | Footer background only | Independent |
🔲 Borders
| Styling option | Controls | Notes |
|---|---|---|
| Border Primary | Default borders | Cards, inputs |
| Border Low | Subtle borders | Dividers |
| Border Dark | Strong borders | High contrast |
| Border Brand | Branded borders | Highlights |
| Border Brand Secondary | Secondary brand borders | Alternative highlighted borders |
| Focus Border | Focus states | Accessibility |
| Error Border | Validation and error states | Forms, alerts |
| Success Border | Success states | Confirmations |
🎨 Brand & Primary Colors
| Styling option | Controls | Notes |
|---|---|---|
| Surface Brand Primary | Main branded surfaces (header, highlights) | Main brand color |
| Surface Brand Secondary | Secondary brand surfaces | Optional secondary color |
| Booking Button Background | Main booking button | Independent from header |
| Text Brand | Brand-colored text | Used for emphasis |
⚠️ Status Colors
| Styling option | Controls | Notes |
|---|---|---|
| Error Background / Border / Text | Error messages | Validation and critical alerts |
| Info Background / Border / Text | Info messages | Neutral informational messages |
| Success Background / Border / Text | Success states | Confirmations and completed actions |
| Warning Background / Border / Text | Warnings | Attention-required states |
🔵 System Colors (Blue / Gray / etc.)
| Styling option | Controls | Notes |
|---|---|---|
| Color Blue 900 | Links / actions | Rate details, links |
| Color Blue 800 / 700 / 600 | Supporting shades | UI accents |
| Color Gray 50–800 | Neutral palette | Backgrounds & text |
| Color Red / Green / Yellow | Semantic UI colors | Alerts, success, warnings |
🧩 Misc
| Styling option | Controls | Notes |
|---|---|---|
| Color Logo Background | Logo container background | Useful for transparent logos |
| Message Background | Generic message components | Not header banner |
Full HEX / Token Catalog
This section lists the main styling tokens with their default values. These values are used as the fallback styling when no custom hotel-specific value is configured.
| Token | Default value | Purpose |
|---|---|---|
--text-primary | #191919 | Main readable text |
--text-secondary | #404040 | Secondary text and icons |
--text-light | #5C5C5C | Muted/helper text |
--text-white | #FCFCFC | Text on dark backgrounds |
--text-button-light | #FFFFFF | Text on colored/dark buttons |
--text-button-dark | #191919 | Text on light buttons |
--footer-text | #FCFCFC | Regular footer text |
--footer-link | #FCFCFC | Footer links and footer buttons |
--surface-primary | #FFFFFF | Main content surfaces |
--surface-secondary | #E6EEF5 | Secondary panels and hover areas |
--surface-brand-secondary | #005398 | Secondary branded surfaces |
--surface-md | #FCFCFC | Mid-level surfaces |
--surface-dark | #F3F3F3 | Subtle contrast backgrounds |
--surface-background | #F3F3F3 | General page background |
--header-message-background | #E6EEF5 | Top hotel message banner |
--footer-background | #0075E3 | Footer background |
--border-primary | #D9D9DA | Default borders |
--border-low | #F3F3F3 | Subtle borders |
--border-dark | #404040 | Strong borders |
--border-brand | #EF7D00 | Branded borders |
--border-brand-secondary | #005398 | Secondary branded borders |
--focus-border | #66A7E3 | Focus states |
--surface-brand-primary | #EF7D00 | Main brand surfaces |
--booking-button-background | #EF7D00 | Final booking button |
--text-brand | #005398 | Branded text |
--color-blue-900 | #0075E3 | Generic blue action/link color |
--color-blue-800 | #3389DA | Supporting blue shade |
--color-blue-700 | #66A7E3 | Supporting blue shade |
--color-blue-600 | #B3D3F1 | Supporting blue shade |
--color-red-900 | #B32A21 | Strong error color |
--color-red-800 | #E16158 | Error accent |
--color-red-700 | #E88882 | Error border/accent |
--color-red-600 | #F09EA0 | Error background |
--color-green-900 | #105C2E | Strong success color |
--color-green-800 | #469F69 | Success accent |
--color-green-700 | #74B78E | Success border/accent |
--color-green-600 | #A3CFB4 | Success background |
--color-yellow-900 | #FFBE00 | Strong warning color |
--color-yellow-800 | #FFCB33 | Warning accent |
--color-yellow-700 | #FFD866 | Warning border/accent |
--color-yellow-600 | #FFE599 | Warning background |
--color-logo-background | transparent | Logo container background |
--message-background | #F09EA0 | Generic message background |
--message-border | #E88882 | Generic message border |
Best Practices
Use the styling options with clear separation between layout areas and semantic purposes. This helps avoid unexpected visual changes and keeps the WBE easier to configure and maintain.
General Recommendations
| Recommendation | Why it matters |
|---|---|
| Keep header, footer, booking button, and message banner colors independent | These areas have different purposes and should not visually affect each other |
| Use brand colors only for branded highlights and primary actions | Prevents the whole interface from becoming too visually heavy |
| Keep enough contrast between text and background colors | Improves readability and accessibility |
| Use status colors only for status-related elements | Error, warning, success, and info colors should not be reused as general design colors |
| Avoid using the same color token for unrelated UI areas | Makes future styling changes safer and easier to understand |
| Test changes in the live preview before saving | Some colors may work in one section but become unreadable in another |
| Use Footer Background, Footer Text, and Footer Link together | Footer readability depends on the combination of all three values |
| Use Header Message Background only for the top info banner | It should stay independent from Surface Secondary |
| Use Booking Button Background only for the final booking action | The booking CTA should be visually independent from the main header |
| Prefer subtle surface colors for large page areas | Strong colors work better for actions, highlights, and smaller UI elements |