Skip to Content
Author's profile photo Karol Kalisz

Why use Blue Crystal style in Design Studio apps?

In Short

from the available styles in Design Studio – the “recommended” one is “Blue Crystal”. You should use this when creating new apps, not the default one “Platinum”.


Design Studio has started with many available styles for SAPUI5 controls, and all applications created on them are still running. Now, going forward SAP UI5 is supporting Blue Crystal as standard theme for Fiori UI and in the new mobile world (sap.m). Even Design Studio is not yet mobile “ready”, some new UI5 controls are running only in the Blue Crystal theme.

In addition, some other functions are only available for Blue Crystal:

Compact Mode for sap.m.controls in Blue Crystal – User Interface Add-On for SAP NetWeaver – SAP Library


Blue Crystal (top) vs Platinum (bottom)

fs3.PNG —– fs4.PNG

The Blue Crystal is an “flat design”, WIKI: Flat design – Wikipedia, the free encyclopedia, with shadows on the components.

What to DO?

For new applications, create them based on Blue Crystal theme.

* btw, if you do not like the blue background, just assign CSS file which puts white background as body css class.

body {

  background: white !important;


For existing applications, you can still run them – there is no need of any migration. But, you can consider changing it – especially when you want to define company internal rules for styles and be prepared for Fiori “UI-compatibility”

Setting for the Style

In Design Studio, every application can have different style, the setting is on application level. This is the setting.


The default is “Platinum”.

Community SCN SDK Extensions

Some of the extensions are looking nice only in Blue Crystal theme, this is because the components used from SAPUI5 are only styled properly in Blue Crystal.

Component List 2.0 – SCN Design Studio Community

The theme documentation:

     SAP Blue Crystal – User Interface Add-On for SAP NetWeaver – SAP Library

     SAP UX Explorer


Moving Forward in Design Studio

Design Studio has in the roadmap better mobile support, styling is also part of this support. It is possible that in some release only the one supported style will be available – and this is the Blue Crystal style (as of today and the future plans).

Update / Removal of BLUE background

If you do not like the blue background and want to have this white, place this CSS in your custom css file:

body {

  background-image: initial!important;

  background-color: white!important;


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Karol,

      I think this is very good advice, especially considering that SAP's stated User Experience Strategy is for "All applications & UI technologies to converge to the SAP Fiori UX", which is enabled by the Blue Crystal theme.  Under this approach, I assume now that the existing iPhone templates (as shown below) are outdated and should no longer be used, particularly since they apply the now deprecated (as I understand it) aad_mobile_black theme.  Is that right?


      I expect that going forward, Design Studio apps for the iPhone can be developed just like those targeting iPad and desktop, using the Blue Crystal theme, with appropriate consideration being given to the screen size.  Would that be an accurate assessment?



      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Mustafa,

      good point, thanks.

      we will need to review the current templates. Those should be updated as well. I log this for review as idea.

      Idea: Update Mobile Templates with Blue Crystal Theme


      Author's profile photo Michael Howles
      Michael Howles

      My feedback to Karol:

      Excellent, as always!

      My frank addition:

      Platinum/Gold Reflection are dead.  Stop using them.

      My advice to Design Studio team:

      Make Blue Crystal the Default, and deprecate even Platinum.

      My advice to designers:

      Learn F12 and Fiori/UI5 classes.

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      I would also add: "Mobile Black iPhone templates are dead.  Stop using them."  🙂

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Mike,

      I have placed this post to avoid a lot of "dead" apps are created in the meantime and then many customers will get the migration question / effort. as Design Studio has started unfortunately Blue Crystal was not yet there...

      I can only agree, for all apps - Blue Crystal - should be used to assure log term compatibility. It is really important if some overwriting via CSS is made on customer side, the CSS classes are not 100% compatible with other styles.


      Author's profile photo Jörg Rose
      Jörg Rose

      Hi Karol,

      great advice, thats what we always do by default. It would just be great if we can have white and clean background by default in future without using CSS. Less coding is always better 🙂



      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Jörg,

      this is defined in the UI5 theme, Design Studio has no influence on this background. To be honest, it got changed some days ago, I am sure there was a reason for this.

      for now, the only option is to overwrite it via CSS.


      Author's profile photo Kalyan Verma
      Kalyan Verma

      Awesome advice. The fact that Blue Crystal is flat and minimal it makes more sense to use it.