Skip Navigation

Spark Themes

The Spark design language includes four themes:

  • Kopis
  • Katana
  • Light/Classic
  • White-label

Kopis Theme

Kopis is the latest theme for Spark, intended to replace the Katana theme as the go-to Sabre brand theme. Where possible, Kopis should be used for all internal and external-facing applications, particularly on new applications. It features a bold new visual style aligned with Sabre’s updated brand identity, including a refreshed color palette, the new APK Galeria font for headers and product names, sharper 4px border-radius for clean lines, and title-case labels instead of uppercase for improved readability and reduced cognitive load. For details on how to migrate from the Katana theme to the Kopis theme, refer to our Updating to Kopis documentation.

White-label Products and the Kopis Theme

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

Katana Theme

Introduced in 2021, the Katana theme replaced the Light/Classic theme as the go-to Sabre brand theme for internal and external-facing applications. Upon its release, Katana introduced an updated and modern visual style with increased accessibility compliance. The Katana theme has since been superseded by the Kopis theme as the default go-to theme.

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;.