Experience the power of Cloud UI – where innovation meets design excellence! Cloud UI is driven by cutting-edge technology, including the Theme Designer and a well-defined design system.
With the introduction of this design system, we've brought clarity to the customization process. It's now easier than ever to develop new themes and make changes while ensuring compliance with ADA standards. The result? A seamless, top-notch user experience across all our resort websites.
You're in control! You have several customization options for the Cloud UI Pricing Calendar and Product Detail Page. Explore the elements below to see what you can personalize and what remains standardized.
The best part? Making changes is a breeze—no need to wait for a code deployment. Simply get in touch with your Aspenware Service Agent at support@aspenware.com. They'll use our innovative Theme Designer tool to implement your desired changes swiftly.
Review the following sections to learn more about the customizable options for each element.
Text Elements
What’s customizable | What’s not customizable |
|---|
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.
|
Color Elements
What’s customizable | What’s not customizable |
|---|
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 | 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: Mobile App bar is transparent when unscrolled and hero is visible, and goes to white with black text when scrolled.
|
Borders and Elevation Elements
What’s customizable | What’s not customizable |
|---|
| |
Spacing Elements
What’s customizable | What’s not customizable |
|---|
Not available. | |