There are a lot of different colors available to use for the skin, below they are broken down into the different groups and more detailed descriptions where required. Some colors are shared across multiple elements and some colors are used only in specific areas as noted by their names.
An important concept to note is that colors are fixed within the iRiS Guest apps. If a button is set to be the color secondaryVariant2 then it will always be that color, as it is set in the skin for each property. It is not possible to have the same button in the app to be secondaryVariant2 for one property and secondaryVariant4 for another and this is the expected nature of the shared code architecture for iRiS Guest.
Primary colors
The primary colors are generally aligned with the primary branding color of the property. There is one base primary color primary and six additional variations which are three shades and three tints of the base color.
The primary colors are used across the main elements of the iRiS Guest apps, such as the section icons within the outlet, the view cart button and the place order button.
- primary
- primaryVariant1
- primaryVariant2
- primaryVariant3
- primaryVariant4
- primaryVariant5
- primaryVariant6
Secondary colors
The secondary colors are often aligned with the secondary branding color of the property, in some cases the secondary color can be more neutral or even the same as the primary color when a property brand has a simpler color palette. Similar to the primary color, there is one base secondary color secondary and six additional variations which are three shades and three tints of the base color.
The secondary colors are used across the elements of the iRiS Guest apps which need to draw attention but not as much as the primary elements. These include the row of categories and sub categories, the name of modifiers in an item and the time modifier on a service request item.
- secondary
- secondaryVariant1
- secondaryVariant2
- secondaryVariant3
- secondaryVariant4
- secondaryVariant5
- secondaryVariant6
Tertiary colors
The tertiary colors are a set of greyscale colors which provide a consistent base to use across the other elements of the iRiS Guest apps. There are ten variations of the tertiary colors ranging from black to white.
The tertiary colors are used across a wide range of elements in the iRiS Guest apps including almost all text, the backgrounds of sections and items, the icons in the side menu and many more.
- tertiaryVariant1
- tertiaryVariant2
- tertiaryVariant3
- tertiaryVariant4
- tertiaryVariant5
- tertiaryVariant6
- tertiaryVariant7
- tertiaryVariant8
- tertiaryVariant9
- tertiaryVariant10
Status colors
The status colors are a set of more vivid colors which are fixed for every property no matter the branding. They are used to highlight very specific areas such as error messages and alerts. There are six different status colors and each is named according to where it should be used.
- statusPositive
- statusAlert
- statusNegative
- statusGeneral
- statusExtra1
- statusExtra2
Overlay colors
The overlay colors are used when applying a layered element on top of another. For example when the side menu is open or a modal is open, there is an overlay on the background of the rest of the app to defocus it from the user.
There are 3 different overlay colors and one specifically for use on the homepage, overlayHome for when there is a homepage background image, in order to reduce the brightness and increase the readability of text.
- overlay1
- overlay2
- overlay3
- overlayHome
Top bar colors
The top bar colors are used to style the top bar and any elements within it such as the icons for quick launches and the menu button.
Note that there are two background colors here topbarBackground and topbarBackgroundHome which support a feature where the top bar can have a different color when viewing the homepage to when viewing the rest of the pages in iRiS Guest.
Another important color is topbarBorder which is a small line that separates the top bar from the rest of the application and provides some visual separation.
- topbarIcon
- topbarBorder
- topbarBackground
- topbarBackgroundHome
Bottom bar colors
The bottom bar colors are used to style the bottom bar and any elements within it such as the quick launch icons. Note that there is no different background color here so the bottom bar can only be one color across the iRiS Guest apps.
- bottombarIcon
- bottombarBackground
Shortcut colors
The shortcut colors are used to style the shortcuts on the homepage and the labels for each of them. The color shorcutIcon is used to style the icon and the outline of the shortcut and shortcutBackground is used to style the fill color. Lastly shortcutText is used to style the label below the shortcuts.
Often, the shortcut color matches the primary color in order to enhance the branding for iRiS Guest apps, however this is not always the case and as such the colors are split out to support varying color schemes for all properties.
- shortcutIcon
- shortcutBackground
- shortcutText
Side menu colors
There is only one color specifically for the side menu and this is sideMenuTop and is used to style the top section of the side menu behind the logo.
This is often a neutral color or the same as one of the tertiary color variants, but it must remain as a separate color in order to support properties which have a varied color scheme or even a differently colored logo where the standard color would not fit well.
- sideMenuTop
Splash screen colors
There is only one color specifically for the splash screen and this is splashBackground color. It is used in apps where the splash screen is not an image but is dynamically generated as a color fill.
- splashBackground
Status bar colors
The status bar colors are used specifically for the area on mobile devices which sits above the top bar. This is generally the area where the time or the battery indicator sit on a phone. Often these colors match the top bar colors in order to provide a consistent design when using iRiS Guest, hence there is statusbarBackground and statusbarBackgroundHome.
One important note here is that statusbarTextDark is the only color which is not a color and is instead a boolean value. This is because most mobile devices do not support changing the text color inside the status bar on the device and instead only support a on or off flag for lighter or darker text. We use this color then to pick the best choice based on our statusbarBackground choice.
- statusbarBackground
- statusbarBackgroundHome
- statusbarTextDark