LuxID brand package - contact sheet

Every asset in this package, rendered. Generated from the LuxID developer documentation on 2026-08-27. Open this file in a browser from inside the unzipped folder so the relative paths resolve. To configure a button and download it, open the button designer.

Full lockup

The LuxID logo: the letters LuxID filled with thumbprint swirls, in colour
luxid-logo-full.png
The LuxID logo in grey
luxid-logo-grey.svg
The LuxID logo in colour on a dark background
the colour lockup stays in colour on dark

ID picto

The LuxID ID picto in magenta
magenta
The LuxID ID picto in darkgrey
darkgrey
The LuxID ID picto in colour
colour
The LuxID ID picto in white
white

Icon variants

LuxID icon on a round magenta background
round
LuxID icon on a rounded square magenta background
rounded-square
LuxID icon on a square magenta background
square
LuxID favicon at 32 by 32 pixels
favicon-32x32
LuxID Apple touch icon at 180 by 180 pixels
apple-touch-icon

Pre-rendered buttons

Sign in with LuxID, colour mode, largeSign in with LuxID, outline mode, largeSign in with LuxID, neutral mode, large
Se connecter avec LuxID, smallMit LuxID anmelden, smallMat LuxID umellen, small
LuxID icon-only sign-in button, colour modeLuxID icon-only sign-in button, outline modeLuxID icon-only sign-in button, neutral mode
LuxID sign-in button, themeable file, enLuxID sign-in button, themeable file, frLuxID sign-in button, themeable file, deLuxID sign-in button, themeable file, lbLuxID icon-only sign-in button, themeable file
Sign in with LuxID, colour mode, on a dark backgroundSign in with LuxID, dark modeLuxID icon-only sign-in button, dark mode

Live CSS button (css/luxid-button.css)

Sign in with LuxID Sign in with LuxID Sign in with LuxID
Sign in with LuxID

Palette

NameHexUse
LuxID Magenta (Pink/500)#CC3D80Primary Colour (filled) button, logo, accent
White#FFFFFFLogo and text on magenta; backgrounds
Dark grey#515259The ID picto on neutral surfaces; dark text
Mid grey#8E8E93Border of the Neutral and Dark buttons - the value that carries their edge at 3:1
Light magenta#E7A6C5Supporting tint: fills, dividers, decorative surfaces. Too light to carry a border or any other boundary
Neutral grey#D4D4D8Disabled states, and dividers on a tinted surface. Too light to carry a boundary on white
Dark surface#2E2E33Background of the Dark button and dark-mode surfaces