Brand assets and visual identity
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: landing pages, documentation, partner listings |
| 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.1 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 |
|---|---|---|
| Light magenta | #E7A6C5 | Border of the Colour (outline) button |
| Neutral grey | #D4D4D8 | Borders, disabled states |
| Dark surface | #2E2E33 | Background of the Dark button and dark-mode surfaces |
Contrast compliance
All foreground/background pairings used in LuxID Partner UIs that reference the LuxID identity must meet WCAG 2.1 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: 3:1 minimum
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 |
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.
Requesting assets
All brand assets are distributed through the LuxID Console.
If the LuxID Console is not yet available for your organisation, or if you require high-resolution print assets, contact LuxID with your organisation name and the specific assets required.
Related pages
- Login button guidelines - button text, sizing, CSS snippets
- Accessibility and localisation - contrast checking tools, WCAG reference