Brand and button guidelines
One button, drawn one way, so people recognize it on a site they have never visited. These are the rules we follow ourselves and ask you to follow. They are short on purpose.
The two names
- Blind-ID is the sign-in. It is what the button offers and what a person chooses.
- IRLProof.me is the service behind it, and the second line on the button.
When to use the branded button
Your site, signing someone in
Use the branded button, unchanged: Continue with Blind-ID,
with by IRLProof.me underneath. This is the only place the words matter, because the person is
choosing between you, Google, Apple and a password.
Your own header or menu
Say Sign in in your own style. Your site is the brand
there, and a branded button in a header reads as an advert. We do the same: the button at the top of this page
says "Sign in", and the branded one appears when we actually ask for an ID.
Writing about it
"Sign in with Blind-ID" in a sentence is fine. The button itself keeps
its own words.
The button
- Two variants only. Plum on a light page, lavender on a dark one. blindid-btn--auto follows the reader's setting.
- Size with --bh, the button height, from 24 to 52 pixels. Everything else scales from it. Below 40px the second line is hidden, because it stops being legible.
- Room on the left. The sign hangs past the button's edge, so keep overflow: visible on whatever wraps it, and leave clear space of at least half the button's height on every side.
- It is a real button. Keep the focus ring, and let it be reached by keyboard.
Never
- Change the words, translate them, or add your site's name to the button.
- Recolour it, restyle it, redraw the sign, or separate the sign from the panel.
- Rotate it, stretch it out of proportion, add shadows, gradients or outlines.
- Screenshot it. Use the stylesheet, so a fix reaches your site without you doing anything.
- Use the sign as your own logo, or put it on a busy photograph.
How to get it
- Any site: link the stylesheet and copy the markup from the kit. You get every later change automatically.
<link rel="stylesheet" href="https://sandbox.irlproof.me/brand/blind-id-button.css">
- WordPress: the plugin draws it. It carries its own copy, because the plugin directory does not allow loading files from another server, and updates arrive with the plugin.
- React: BlindIdButton.jsx in the kit.
Download the button kit blind-id-button.css The sign, on its own
Colours
| Name | Value | Where |
|---|---|---|
| Plum | #4A2C5E | The button on a light page, and the text on the dark variant |
| Lavender | #8E74A8 | The button on a dark page |
| Butter | #F4D35E | The divider, and "IRLProof.me" on the second line |
| Signal red | #D7263D | The sign. Nothing else. |
The sign on its own
Use it for a favicon, an app icon, or where the full button does not fit, at 16 pixels or larger. Do not recolour it, and do not use it as a general "verified" tick: it means Blind-ID.