UX and branding
Developers and designers implementing the sign-in experience. Product owners should focus on Login button guidelines, Universal Login UX, Consent screen design and User journey patterns - the rest of the section is implementation guidance.
Why UX and branding matter for LuxID
LuxID is a Luxembourgish digital identity used across dozens of services - POST Luxembourg, RTL, CFL, and beyond. When a user clicks "Sign in with LuxID" on your application, they are not just authenticating: they are trusting an identity layer shared across an entire national ecosystem.
That shared trust is fragile. A poorly labelled button, an unfamiliar logo, or an inconsistent consent screen erodes the recognition cue that makes single sign-on valuable. A user who does not recognise the LuxID sign-in moment may abandon the flow, contact support, or - in the worst case - fall for a phishing imitation.
This section exists to give you the tools to get the integration right: from the first pixel of the login button to the last line of an error message.
Scope
These guidelines apply to every touchpoint an application controls around the LuxID sign-in flow:
- The login button or link in your application's interface
- Any pre-authentication messaging ("You'll be taken to LuxID to sign in")
- Post-authentication landing pages and welcome messages
- Error states returned from the authorisation server
- Consent and permission dialogs
The LuxID login page itself (https://login.luxid.lu) is fully hosted by LuxID. You do not control its layout or form fields - and that is intentional. See Universal Login UX for what you can influence (your application name, logo, and the scope of consent).
What this section covers
| Page | What you will learn |
|---|---|
| Login button guidelines | Allowed button text, icon placement, colour variants, size requirements, CSS snippets, and do/don't examples |
| Brand assets and visual identity | Logo usage rules, clear space, forbidden distortions, colour palette, typography |
| Universal Login UX | Why redirect-based login is safer, what the LuxID page guarantees, branding boundaries |
| Consent screen design | How the consent screen works, what your application name and logo look like, tone guidance |
| Multi-factor UX | Step-up authentication, per-method UX, recovery paths, re-authentication patterns |
| Passwordless and passkey UX | Passkey education, browser compatibility, fallback flows, cross-device sign-in |
| Error and edge-case UX | Recommended microcopy for every error state, in English, French, German, and Luxembourgish |
| Accessibility and localisation | ARIA, keyboard nav, colour contrast, lang, language fall-back chain |
| User journey patterns | Sequence diagrams for first-time sign-in, returning sign-in, MFA challenge, logout, and more |
Audience
- Designers - start with Brand Assets, then Login button guidelines and Consent screen design.
- Frontend developers - start with Login button guidelines for CSS/HTML patterns, then Accessibility and localisation.
- Product owners - start with Universal Login UX and User journey patterns to understand the full user experience your customers will have.
- Agencies building on behalf of a partner - read Brand Assets and Login button guidelines before any design work begins.
Relationship to the integration docs
UX and branding sit on top of the technical integration. If you have not yet added LuxID login to your application, start with Add Login and return here once the redirect flow is working.
For the hosted login page feature itself, see Universal Login.