The Keycloak Theme

The challenge

Keycloak out of the box is functional and forgettable. It is also the first thing every employee sees, every day, and the gateway to every system in the group. A bland login quietly says the company does not sweat the details.

The approach

A custom theme built on Keycloak's FreeMarker templates. A split-panel layout sets the group's ecosystem beside a focused form; an SG-derived palette (navy, blue, a sunset-gold accent) and Plus Jakarta Sans carry across login, password reset, profile completion, errors, and logout. Bilingual from the first commit.

What's inside

• Login: split-panel: ecosystem + form
• Password reset: request a link, set anew
• Update password: forced change on first login
• Update profile: complete missing details
• Logout: a clean confirm screen
• Error & info: styled, not raw Keycloak
• Ecosystem panel: animated hub, rotating hero
• Bilingual: English and Indonesian
• Show / hide password: inline toggle
• Responsive: split on desktop, stacked on mobile

Key decisions

• Themed at the FreeMarker template level, so it is a real theme, not a CSS skin over the default
• Every state covered: login, password reset, profile completion, update password, errors, logout
• A split-panel layout, the group's ecosystem beside a focused sign-in
• Bilingual from the start, English and Indonesian message bundles
• Plus Jakarta Sans and an SG-derived navy, blue, and sunset palette