Skip Navigation

Spark Themes

The Spark design language includes three themes:

  • Katana
  • Light/Classic
  • White-label

Katana Theme

Katana is the latest theme for Spark, intended to replace the Light/Classic theme as the go-to Sabre brand theme. Where possible, Katana should be used for all internal and external-facing applications, particularly on new applications. It features an updated and modern visual style and increased accessibility compliance. For details on how to migrate from the Light/Classic theme to the Katana theme, refer to our Updating to Katana documentation.

White-label Products and the Katana Theme

To customize the look of white-label applications when working with the Katana theme, you will need to write custom CSS to override the Katana color palette with a brand’s color palette. At the moment it is not possible to programmatically generate a white-label theme from the Katana theme using the Spark build system. For more information, refer to our Updating to Katana documentation.

Light/Classic Theme

Introduced in 2016, The Light/Classic theme is the original Spark theme used for internal and external-facing applications. Upon its release and subsequent updates through 2021, the Classic theme introduced a more modern aesthetic to our products while also supporting touch, responsive design, and accessibility requirements.

White-label Theme

The White-label theme was intended to replace the Light/Classic at the point of delivering an application to a customer. This theme removed the Sabre-specific branding and provided our customers’ development teams with a more neutral starting point for incorporating their own color palette, images and other branding elements.

White-label products using the White-label theme should design and develop using the Light/Classic 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, replace references to the Light/Classic theme with references to the White-label theme, for example replace spark.light.css with spark.whitelabel.css in a development environment. If you are using the Spark SASS files directly, replace your @import /path/to/spark.light; with @import /path/to/spark.whitelabel;.