Spark Themes

The Spark design language includes three themes:

• Light (spark.light.css)
• White Label (spark.whitelabel.css)
• Dark (spark.dark.css)

Light Theme

The light theme represents the default Sabre brand theme and should be used for all internal and external-facing applications. Informed by our brand vision, the light/default theme is intended to introduce a more modern aesthetic to our products while also supporting touch, responsive design, and accessibility requirements.

White Label Theme

The white label theme is intended to replace the light theme at the point of delivering an application to a customer. This theme removes the Sabre-specific branding and provides our customers’ development teams with a more neutral starting point for incorporating their own color palette, images and other branding elements.

White label products should be designed and developed using the light theme. This allows the application to be visually aligned with the look and feel of the Sabre brand within the context of demos, conferences and sales presentations.

We recommend using the Spark code to facilitate the transition from branded to white label theme with a simple switch of stylesheets. Keep in mind, however, that components added by each product will need to have a white label counterpart added to the white label stylesheet.

When shipping a white label product using Spark, simply replace references to spark.light.css or spark.dark.css with spark.whitelabel.css. If you are using the Spark SASS files directly, replace your @import /path/to/spark.light; with @import /path/to/spark.whitelabel;.

Dark Theme

The dark theme is a planned variation of the Sabre brand theme. It has not yet been developed, but it is intended for products that are used primarily in low-light environments.