Brand guidelines
Required wording and visual treatment for AI Passport sign-in buttons.
Use these rules wherever your product starts an AI Passport sign-in.
Button wording
Use one of these exact labels:
- Sign in with AI Passport
- Continue with AI Passport
Do not use Log in with AI Passport. Do not translate, shorten, or reword the label without written approval.
Size and clear space
- Set the button height to at least 44 CSS pixels.
- Set the button width to at least 220 CSS pixels.
- Keep horizontal padding of at least 16 CSS pixels.
- Keep clear space equal to 25% of the button height on every side.
- At the 44-pixel minimum height, keep at least 11 pixels of clear space.
The label shall remain readable at 200% browser zoom. The full button shall have one accessible name that matches its visible label.
Light and dark variants
Use the light variant on light surfaces. It has a near-black fill and white label text.
Use the dark variant on dark surfaces. It has a white fill and near-black label text.
Both variants shall meet WCAG AA contrast. Keep the same size, spacing, and wording in both variants.
Use the SDK to render the official button whenever possible. You can also download the light button or dark button. Use the Passport mark only for approved non-button uses.
Misuse
- Never show the AI Passport mark alone as a sign-in control.
- Never combine the mark with reworded button text.
- Never crop, stretch, recolor, rotate, or animate the mark.
- Never imply that AI Passport endorses your product.
- Never put account state or requested scope text inside the button.
Prominence parity
Give AI Passport the same prominence as other identity providers. Match their button height, placement, contrast, and interaction state.
Do not hide AI Passport behind an extra menu when another provider is visible. Do not make its button smaller or less legible.