Brand rules
How to show Avonao ID in your app: the icon, the label, and what to leave alone. The button kit already follows all of this; these rules matter when you build your own.
Three marks, three jobs
The pigeon Avonao ID icon
Use it in the Sign in with Avonao ID button, and as the Avonao ID icon. Nowhere else.
The wordmark Avonao
Never with an icon in front of it. Not part of the button, and not a replacement for the pigeon.
The red square Site icon
The favicon of Avonao sites. It does not appear in the button.
The label
Use one of these three, exactly, in sentence case. The English wording is the approved one.
| Label | Use it when |
|---|---|
| Sign in with Avonao ID | The default, on a page where members sign in. |
| Continue with Avonao ID | The same button starts sign-in and creates the account, because your app treats them as one step. |
| Sign up with Avonao ID | On a page that is about creating an account. |
The label always says Avonao ID
, never just Avonao
. An icon-only button carries the same words as its aria-label.
Do and do not
Do
- Use the dark button on light pages, the light one on dark pages, and outline where your own text color should carry through.
- Put the button among your other sign-in options, at the same size and with the same spacing.
- Scale the pigeon in proportion, and keep a clear space around it (below).
- Link the button to your own start route, never to
/authorizeof Avonao ID. - Keep contrast at 4.5:1 for the label and 3:1 for the border and the focus ring if you change colors.
Do not
- Recolor, rotate, crop, stretch, outline or animate the pigeon.
- Put the pigeon next to the Avonao wordmark, or use the wordmark or the red square in the button.
- Use the pigeon as your logo, your app icon or a decoration.
- Rewrite the label, or shorten it to
Avonao
. - Place the button on a busy photo or on a color it has no contrast with. Use the other theme, or give it a plain background.
Clear space
Keep at least a quarter of the icon's width free on every side of the pigeon. Inside the button this is already so at all three sizes: the space left and right of the icon is 12 px, 16 px, 20 px (small, medium, large), above and below it 8 px, 10 px, 12 px.
The button itself, with a playground and ready-made files, is on the Button kit page.
Avonao ID