Site Update: Now with new color palettes!

Earlier this year, we have discussed a new set of color palette, then refreshed it, which someday could become an integral part of our brand.

These palettes are so versatile enough that we have been confident over this entire year to produce artworks, campaign media, and even apps exclusively relying to these limited set of colors. And making the palette programmatically with OkLCH allows us to accurately reproduce the kind of color shades we wanted for every color spectrum.

But there were two main problems that we faced sooner:

Itʼs difficult to reproduce colors which are optimized for user interface backgrounds. Sure, we can use either Galih-Ratna or Dilan-Milea for buttons and links, but these colors were not designed for background elements such as cards.
There is no standard grey color shade. Or brown. Grey is significant in user interface design for neutral or disabled buttons and other interactive elements.

So today, we are excited to announce a new color palette series: Rangga-Cinta, from the Indonesian record-breaking Ada Apa dengan Cinta? movie. These muted color sets are meant to complement the vibrancy prepresented by both Dilan-Milea and Galih-Ratna, and in fact, we are already using these on our reinhart1010.id website. Because of their nature of muted colors, the Rangga-Cinta version of Blue can be considered as the official version of our Gray. And they have generated some cool brown-like shades for use, too.

Improving the consistency and interoperability between Dilan-Milea, Galih-Ratna, and Rangga-Cinta.

We have also slightly tweak the Galih-Ratna color sets, so now Dilan-Milea 500 color scale is exactly the same with Galih-Ratna 500. Similarly, Galih-Ratna 50 also becomes the basis of Rangga-Cinta 50, and Dilan-Milea 950 is essentially the same as Rangga-Cinta 950.

This has some technical benefits to our main website, which is currently based on Tailwind CSS. Before, we had assigned different colors for these glass card borders and background, not to mention the colored shadows and hover/active shades. These took a whopping 20 CSS color-related classes to render a single search bar!

bg-gr-fuchsia-50/50 dark:bg-dm-fuchsia-900/50 focus:bg-gr-fuchsia-50 dark:focus:bg-gr-fuchsia-900 hover:bg-gr-fuchsia-50 dark:hover:bg-gr-fuchsia-900 text-gr-fuchsia-900 dark:text-white placeholder:text-gr-fuchsia-600 dark:placeholder:text-gr-fuchsia-100 border-gr-fuchsia-500 dark:border-dm-fuchsia-50 focus:border-gr-fuchsia-500 focus:dark:border-dm-fuchsia-50 shadow-dm-fuchsia-500/50 dark:shadow-dm-fuchsia-200/50 focus:shadow-dm-fuchsia-200/75 dark:focus:shadow-dm-fuchsia-200/75 hover:shadow-dm-fuchsia-200/75 dark:hover:shadow-dm-fuchsia-200/75

Now, by using these color synonyms, we can remove most of duplicate color classes (including colored placeholder texts in favor of standard grey ones) into just five!

bg-rc-violet-50 dark:bg-rc-violet-900 hover:bg-white dark:hover:bg-dm-violet-800 border-dm-violet-300

Coming soon: A standard for applying colors.

Well, as promised earlier, we are still going to announce new updates throughout this holiday season. But at the meantime, we are also still in the works of standardizing how these colors should be used.

You may also notice that weʼve implemented dynamic theming on different webpages under the same site. Itʼs just another part of standardization that are taking place here.