Cloud UI Theming

• Font families are set to your fonts for titles and body copy. Additionally, the weight and line height can be adjusted so that we can optimize the design for your fonts. The following font families are used in the PDP

  • H1

  • H2

  • H2 Bold

  • H3

  • Body

  • Body 2

  • Body 2 bold

  • Caption

  • Caption 2

• Force caps option - Titles and button copy can be set to force caps or title case.

• Font size will be dictated by the design system. and the font class used for a component can’t be updated to use a different font class, for example, you can’t update the short description, which uses Body 2 font class, to use Caption font class.

• Short description will be truncated at 3 lines for both mobile and desktop with a show more link to view the rest of the description and the long description in a modal.

• Attribute titles will be truncated if they are longer than 2 rows.

• Attribute descriptions will be truncated if they are longer than 4 rows.

• Breadcrumb treatment is that the page the user is on is not linked or underlined, but the category in the breadcrumb is linked and underlined. Breadcrumbs only appear on desktop. Mobile App bar is used for mobile.

Primary button background and text color primary buttons can be set to use a resorts primary color as background color, and the overlaying text color can be customized to maximize visibility but is recommended to be white or black. The hover background color can also be set.

Link Color

Inventory and pricing scarcity colors

• We continue to offer the ability to customize background color for dates when inventory is scarce. We recommend #F6D241 for ADA compliance and based on A/B test results.

Active state options for attribute selections

Active state attribute values that are selected can be set to use resort’s primary color (or desired color). This active state color will be used for the following control types

• Button chip

• Radio button

• Checkbox

• Datepicker (coming with 1.7)

• Neutral colors - We will use consistent neutral colors that are legible and look great across brands when resort primary or link colors are not used. Examples of this inclued

  • Outline color on controls

  • Black and grey text

  • White backgrounds

  • Grey elevation treatment color

  • The quantity ticker

  • Buttons that aren’t primary buttons and use black (1.4 might be customizable)

  • Grey background on sold out state for calendar

• Warning and success colors - The font and background colors for these messages are determined by the design system and are optimized for the user experience. Examples include:

  • Select Option (Required) Coach message on non defaulted option controls.

• Mobile App bar is transparent when unscrolled and hero is visible, and goes to white with black text when scrolled.

• Border weight and roundedness (radius)- Border radius can be customized.

• Elevation - Elevation is used in several places to helps users understand the relative importance and position of different elements on the screen.

Not available.

• Spacing between elements is designed for consistency across the platform and will look great with every theme.