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 name
Blind.ID, with the dot, everywhere: the service, the sign-in and the button. Not Blind ID, BlindID or Blind-ID.
When to use the branded button
Your site, signing someone in
Use the branded button, unchanged: Continue with Blind.ID.
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.
- 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.blind.id/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 the focus ring |
| 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.