Brand assets and visual identity
Source: https://docs.luxid.lu/en/developers/ux/brand-assets-and-visual-identity/
Last updated: 2026-08-25
Overview
LuxID's visual identity is the visual shorthand for trust across every application that integrates with it. Consistent, correct use of the logo, colours, and typography ensures that users recognise LuxID instantly and can distinguish it from imitations.
This page covers:
- Logo variants and when to use each
- Clear space and minimum size
- Forbidden distortions
- Colour palette
- Typography guidance
- Favicon and badge assets
For button-specific rules (text variants, CSS patterns), see Login button guidelines.
Logo variants
LuxID provides three logo variants. Use the appropriate variant for each context:
| Variant | When to use |
|---|---|
| Full wordmark (icon + "LuxID" text) | Preferred in most contexts: your own landing pages and documentation. Partner or customer listings need prior approval |
| Icon only | Compact contexts where the wordmark would be illegible; always pair with a visible text label nearby or an aria-label |
| Monochrome / single-colour | Use when printing on materials that do not support full colour, or on surfaces where the full-colour logo would clash |
Never combine elements from different variants (for example, placing the icon-only mark next to manually typed "LuxID" text in a different typeface).
Clear space
Clear space is the minimum breathing room that must surround the logo on all sides, free of other text, graphics, or the edge of a container.
The clear space unit is defined as the height of the capital "L" in the LuxID wordmark.
| Side | Minimum clear space |
|---|---|
| Top | 1x "L" cap-height |
| Bottom | 1x "L" cap-height |
| Left | 1x "L" cap-height |
| Right | 1x "L" cap-height |
In practice: if the wordmark is 40 px tall at its export size and the cap-height is approximately 28 px, maintain at least 28 px of empty space on every side.
This rule applies equally on digital surfaces (web, app) and print materials (brochures, event stands, partner onboarding documents).
Minimum sizes
Displaying the logo below the minimum size makes it illegible and undermines trust.
| Variant | Minimum display height |
|---|---|
| Full wordmark | 24 px (digital) / 8 mm (print) |
| Icon only | 16 px (digital) / 6 mm (print) |
Below these sizes, omit the logo entirely and use a plain text reference to "LuxID" instead.
Forbidden distortions
The following treatments are explicitly prohibited in all contexts:
| # | What is forbidden | Why |
|---|---|---|
| 1 | Stretching or squashing the logo (non-uniform scaling) | Distorts the proportions and breaks visual recognition |
| 2 | Recolouring the logo outside the approved palette | Creates confusion with imitations; weakens brand signal |
| 3 | Adding drop shadows, glows, or emboss effects | Inconsistent with the flat design language |
| 4 | Placing the logo on a background with insufficient contrast | Violates WCAG 2.2 AA; makes the logo illegible |
| 5 | Rotating or skewing the logo | Not part of any approved treatment |
| 6 | Replacing the wordmark typeface with a different font | The wordmark is a fixed asset, not live text |
| 7 | Combining the LuxID logo with another organisation's logo in a lockup | Implies a partnership or merger not authorised by POST Luxembourg |
| 8 | Animating the logo (spin, pulse, morph) | Not approved; use a static logo plus a separate loading indicator |
| 9 | Using an outdated logo version | Always download assets from the LuxID Console |
| 10 | Clipping or cropping the logo | The full logo must be visible; partial display is not permitted |
Colour palette
The LuxID brand colour is magenta (not blue - blue is the DEEP / LuxID Pro colour). The values below match the Login button guidelines; the full Pink and Grey ramps are defined in the LuxID design system.
Primary colours
| Name | Hex | Use |
|---|---|---|
| LuxID Magenta (Pink/500) | #CC3D80 | Primary Colour (filled) button, logo, accent |
| White | #FFFFFF | Logo and text on magenta; backgrounds |
| Dark grey | #515259 | The ID picto on neutral surfaces; dark text |
Secondary / supporting colours
These are the supporting values used by the button system. The complete Pink and Grey scales come from the LuxID design system.
| Name | Hex | Use |
|---|---|---|
| Mid grey | #8E8E93 | Border of the Neutral and Dark buttons - the value that carries their edge at 3:1 |
| Light magenta | #E7A6C5 | Supporting tint: fills, dividers, decorative surfaces. Too light to carry a border or any other boundary |
| Neutral grey | #D4D4D8 | Disabled states, and dividers on a tinted surface. Too light to carry a boundary on white |
| Dark surface | #2E2E33 | Background of the Dark button and dark-mode surfaces |
The Colour (outline) border uses the primary #CC3D80, not a lighter tint, because it is the
only edge that button has on a white page.
The mid grey #8E8E93 was confirmed as the button-border value by the POST Luxembourg brand team
on 2026-08-25.
Contrast compliance
All foreground/background pairings used in LuxID Partner UIs that reference the LuxID identity must meet WCAG 2.2 Level AA minimum:
- Normal text (below 18 px / below 14 px bold): 4.5:1 minimum
- Large text (18 px or above / 14 px bold or above): 3:1 minimum
- UI components and graphical objects, including a button's border and its focus indicator: 3:1 minimum
A component's boundary counts as a graphical object. Where a button's border is the only thing separating it from the page, that border needs 3:1 against the page - not merely against the button's own fill.
Measured ratios
Every pairing in the button system, measured against the surface the mode is designed for. A light page is taken as #FFFFFF and a dark page as #1C1C1F.
| Pairing | Ratio | Required | Result | Where it applies |
|---|---|---|---|---|
| White text on LuxID Magenta | 4.62:1 | 4.5:1 | Pass | Colour (filled) label |
| White picto on LuxID Magenta | 4.62:1 | 3:1 | Pass | Colour (filled) picto |
#4A4A4F text on white | 8.81:1 | 4.5:1 | Pass | Colour (outline) label |
| Magenta picto on white | 4.62:1 | 3:1 | Pass | Colour (outline) picto |
| Magenta border on white | 4.62:1 | 3:1 | Pass | Colour (outline) edge |
#3A3A3C text on white | 11.35:1 | 4.5:1 | Pass | Neutral label |
| Dark grey picto on white | 7.77:1 | 3:1 | Pass | Neutral picto |
| Mid grey border on white | 3.26:1 | 3:1 | Pass | Neutral edge |
| White text on Dark surface | 13.51:1 | 4.5:1 | Pass | Dark label |
| White picto on Dark surface | 13.51:1 | 3:1 | Pass | Dark picto |
| Mid grey border on a dark page | 5.21:1 | 3:1 | Pass | Dark edge |
| Mid grey border on the Dark fill | 4.14:1 | 3:1 | Pass | Dark border against its own button |
| Magenta focus ring on white | 4.62:1 | 3:1 | Pass | Focus indicator |
| Magenta focus ring on a dark page | 3.68:1 | 3:1 | Pass | Focus indicator |
White text on LuxID Magenta clears 4.5:1 with little to spare, so do not darken the text or lighten the magenta. Keep the focus ring's outline-offset: it separates the magenta ring from the magenta button so the ring stays visible on the Colour (filled) mode.
Typography
LuxID brand font
LuxID uses Roboto as its typeface. Roboto is free for commercial use under the Apache License 2.0 (opens in a new tab), so Partners may self-host it or load it from Google Fonts (opens in a new tab) without a licence fee.
Even though the typeface is available to you, the LuxID logo and wordmark remain fixed graphic assets. Do not recreate the "LuxID" lockup as live text - even in Roboto - always use the supplied logo files.
Using Roboto in Partner UIs
You may set the button label and surrounding interface in Roboto to match LuxID, or keep your application's own font - match your existing type system; legibility matters more than the exact typeface. If you are starting a new application without an established type system, these open-licensed sans-serifs pair well with LuxID's visual identity:
| Font | Type | Source |
|---|---|---|
| Roboto | Sans-serif | Google Fonts (opens in a new tab) - Apache 2.0 (the LuxID typeface) |
| Inter | Sans-serif, variable | rsms.me/inter (opens in a new tab) - SIL OFL |
| Source Sans 3 | Sans-serif | Google Fonts (opens in a new tab) - SIL OFL |
Illustration and iconography style
LuxID's visual language is clean, flat, and geometric. If your application includes illustrations or icons near LuxID sign-in elements (for example, a feature illustration on a sign-in card), follow these principles:
- Flat design - no skeuomorphic textures, no realistic shadows or gradients
- Geometric forms - rounded corners, consistent stroke weights
- Limited palette - use LuxID magenta (
#CC3D80) as the accent; neutrals for supporting elements - Line icons at 2 px stroke where icon sets are used
Do not use 3D renders, photographic hero images, or cartoon illustrations directly adjacent to the LuxID sign-in button. These create a visual mismatch that reduces trust.
Favicon and badge assets
Favicon
Applications that surface a LuxID-connected status (for example, a "Connected accounts" settings page) may display a LuxID favicon-sized icon to identify the connection:
| Format | Size | Use |
|---|---|---|
| SVG | Scalable | Preferred where SVG favicons are supported |
| PNG | 32 x 32 px | Standard favicon |
| PNG | 64 x 64 px | High-DPI favicon (2x) |
| PNG | 180 x 180 px | Apple touch icon |
These files are in the icon/favicon/ folder of the brand package.
Badge
A "Connected with LuxID" badge may be displayed in application settings to indicate an active LuxID connection. Rules:
- Use only the approved badge asset from the LuxID Console.
- Do not create custom badge designs.
- The badge must link to or be accompanied by a "Disconnect" or "Manage connection" action.
- The badge must not imply that the partner application is endorsed by or affiliated with POST Luxembourg beyond the standard LuxID integration.
Getting the assets
Every asset on this page - logo, ID picto, icon and favicon files, pre-rendered buttons and the reference stylesheet - is in the brand package, which you can download directly. No request is needed.
Two things still go through the commercial mailbox, hello@luxid.lu:
- Print-resolution files. The colour lockup in the package is raster only, at 548 x 295 px at its largest. Anything destined for print, or wider than roughly 550 px on screen, needs the source file.
- Approval to use the marks outside your own sign-in button. See what the package licenses.
Related pages
- Login button guidelines - button text, sizing, CSS snippets
- Accessibility and localisation - contrast checking tools, WCAG reference