In-house folio · 2026 · Theme designer
The Keycloak Theme
Every employee signs in through this screen. I designed the Keycloak theme behind it: a split-panel gateway with the Sedjati ecosystem on one side and a focused sign-in on the other, carried through every state Keycloak can show.
Reading I · The impact · Ink: Royal Crimson
The login every employee passes through now looks like the company behind it. It is the most-seen surface I own, and it sets how Sedjati feels from the very first screen.
Reading II · The craft · Ink: Royal Gold
The challenge
The default Keycloak login is the first thing everyone sees, and forgettable
The approach
A split-panel gateway, branded down to every screen
The calls that mattered
- 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
On the bench
Reading III · The theme · every state, styled
What I built into it
The account console login, live from the running theme
- 01Loginsplit-panel: ecosystem + form
- 02Password resetrequest a link, set anew
- 03Update passwordforced change on first login
- 04Update profilecomplete missing details
- 05Logouta clean confirm screen
- 06Error & infostyled, not raw Keycloak
- 07Ecosystem panelanimated hub, rotating hero
- 08BilingualEnglish and Indonesian
- 09Show / hide passwordinline toggle
- 10Responsivesplit on desktop, stacked on mobile
