Introduction
01LatchID is a single sign-on layer you can trust — one account, used wherever you choose to let it in. The mark is two links locked together: you, and the services you sign in to.
Write it as LatchID
One word, capital L, I and D. Never Latch ID, LatchId or LATCHID.
Tagline
Identity, Locked In. — with the comma and the full stop.
Lead colour
Latch Coral, #FF5A5A. It means “LatchID”, so keep it for the logo and accents.
Use the files
Never redraw or retype the logo. If something's missing, ask for it.
Logo
02The full logo is the mark plus the wordmark. Use the colour version on light backgrounds and the reversed version on dark ones.
Clear space & minimum size
Keep a margin at least as tall as the “L” in LatchID (x) on every side. Nothing should enter it.
xxxx
Variants
03Pick the version with the strongest contrast against what's behind it. Colour is preferred; use mono or white only when colour isn't possible.
Icon
The mark on its own — for avatars, small spaces, or when the name is already nearby.
Misuse
04Changing the logo weakens it. If a layout needs something different, ask for a new file instead.
Colour
05Latch Coral leads. Ink and Paper do most of the work, and Deep Coral adds depth to the mark. Click a colour to copy it.
Product UI tokens
The website and apps use these CSS variables. Click a row to copy the variable.
| --bg | Page background | #111113 | |
| --panel | Cards and panels | #19191C | |
| --line | Borders and dividers | #2A292E | |
| --ink | Primary text | #ECE9E4 | |
| --muted | Secondary text | #8F8C92 | |
| --red | Buttons, focus, status | #E0394D |
Two reds, on purpose. UI red (#E0394D) is for interface elements like buttons and focus rings. Latch Coral is for the logo and brand graphics.
Typography
06Three typefaces, one job each. All are free on Google Fonts.
Sora
The LatchID wordmark and big brand moments like the tagline.
Archivo
Everything you read. Headings use Archivo Expanded; body copy sits at 15–18px.
IBM Plex Mono
Section numbers, labels, meta text and code. Often small and uppercase.
Sign in with LatchID
08The official button for partner login pages. Pick a theme and size, then grab the SVG — or download every button (.zip).
Backgrounds
09Built from the same pieces as the logo — the links, the 47° angle and the coral palette. Use them for slides, banners and wallpapers, with plenty of space around the logo.
Phone wallpapers
1080×1920, for lock screens and stories.
Voice
10Identity,
Locked In.
Our tagline. Use it as written, never reworded.
Clear
Say what it does in plain words. Short sentences, no jargon.
Calm
Security without fear. Reassure, don't alarm.
Honest
Say what's live and what's coming. Don't overpromise.
| WRITE | NOT |
|---|---|
| Sign in once and use the same account everywhere LatchID works. | Unified identity orchestration across federated ecosystems. |
| Your account is protected by your own security key. | Hackers can't touch you now! |
| OIDC support is rolling out to partners gradually. | Works with every app, everywhere. |
Need a format that isn't here? support@latchid.org
Ask on Discord
App & social
07Ready-made squares for anywhere that asks for an icon or avatar. Discord and most social sites crop to a circle, so the mark sits well inside the safe area.
Discord
Server icon and bot avatar, plus the 960×540 server banner.
Favicon
favicon.icocovers 16, 32 and 48px. 180px is the Apple touch icon; 192 and 512 are for a web app manifest.