Brand

If you are putting a sign-in button in your product, this is how to write the name and which mark to use. Everything here is downloadable and free to use for that purpose.

The name#

The product is AgentID: one word, no space, with both the I and the D capitalised. It is written the same way in running text, in button labels, and in code comments.

AgentID: Agent ID; One word, no space.
AgentID: AgentId; Both the I and the D are capitals.
AgentID: agentID; The A is always capital, even mid-sentence.
Continue with AgentID: Continue with Agent; Never shorten the name.
Continue with AgentID: Continue with AgentMail; The button names AgentID, not the company behind it.

The button#

The name always reads AgentID, never AgentMail and never shortened. Which words go around it depends on where they appear.

Continue with AgentID: The label on the button, wherever a first sign-in also creates the account. That is most integrations.
Sign in with AgentID: The name of the feature, when you write about the button rather than render it: docs, posts, page titles and headings.

Pair the mark with the name rather than showing the mark alone, so a person who has not seen it before can tell what it does.

Continue with AgentIDContinue with AgentID

Match the shape of the other providers on your login page. If your Google and GitHub buttons are full width with a left-aligned icon, make this one the same — a button that stands out from its neighbours reads as an advertisement rather than an option.

The mark#

Four variants, each as SVG and PNG. Prefer the SVG: it stays sharp at any size, and the button is usually rendered small. Download a copy, or copy the file’s URL and link straight to it.

BlackTransparent. For light backgrounds.

svgpng

WhiteTransparent. For dark backgrounds.

svgpng

Black on whiteSquare tile, for when you cannot control the backdrop.

svgpng

White on blackSquare tile, for light layouts.

svgpng

Rules#

Use a mark from the set above, unmodified. Don’t recolour it, add effects to it, rotate it, or redraw it. Leave clear space around it of at least half its height, and don’t render it below 16px.

The mark identifies the sign-in option, not your product. Don’t use it as your own icon, in your own logo, or in a way that suggests AgentID built or endorsed your app.