Brand
The mark, the colours and the rules. Everything on this page is the same file the product itself loads, so it cannot drift from what you actually see.
The mark
One identity at the centre, applications around it. The gold sphere is the person, the pale spheres are the things they sign in to, and the rods are the trust between them. It is lit from the upper left and lifted off its field, so it reads as an object rather than a diagram.
⚠️ Two files, one mark, and the difference is deliberate. The primary carries a cast shadow that smears into the spheres below about 24px, so anything small uses the second file: same cluster, no shadow, heavier spheres. Use the primary above 32px and the small one at or below it.
Passkey symbol
This is Brionic ID's own symbol for its passwordless passkey feature. The key names the credential; the gold centre connects it to the identity in the main mark. It is not the universal Passkey icon or a mark from a device provider.
brionic-passkey.svg
Use it for Brionic ID passkeys
- Do place it next to actions that create or use a Brionic ID passkey.
- Do not use it as a universal Passkey, FIDO Alliance, Apple, Google, or Microsoft mark.
- Keep the colours and scale both dimensions together.
Palette
Steel blue carries the product. Gold is structural only.
| Role | Light | Dark | Where |
|---|---|---|---|
| Field | #4682b4 → #1b3648 | same | The mark's own background |
| Accent | #1f6193 | #79bce8 | Primary action, links, focus ring |
| Ink | #0d1c27 | #e6eef5 | Body text |
| Muted | #47606f | #9ab2c4 | Secondary text |
| Page | #e4ecf3 | #0a1621 | Behind the panels |
| Panel | #f4f9fc | #10242f | Card surface |
| Gold | #e8bf4c | same | The core sphere, markers, hairlines |
| Gold edge | #a67d05 | #e8bf4c | Borders on gold surfaces |
⚠️ Gold is never text. Measured on the light panel, gold as a text colour is 1.65:1 — unreadable, and a long way under the 4.5:1 that text has to meet. It earns its place as a sphere, a marker and a hairline. Every other pair in this table clears WCAG AA in both schemes, the lowest being 3.56:1 on a border.
The sign-in button
Brionic ID does not render this button. It lives in your application, on your page, so nothing about it is enforced — it is what we would like you to use, and it is built to be pasted in and left alone.
Four themes, a pill and a full-width variant, with the markup and styles to copy, are on the integration page — that is where you will be when you need them.
Using it
- Leave it room — clear space of at least one sphere's width on every side. The mark is already inset within its own field, so do not add a second border.
- Do not recolour it — the field, spheres and core are fixed. A version tinted to match a page defeats the point of a mark.
- Do not put it on a busy photograph. It carries its own opaque field precisely so it does not need one.
- Do not stretch it. Scale both dimensions together; the sphere shading assumes a circle.
- Do not rebuild it in flat colour. Drawn without the shading, three nodes on lines is the share glyph every phone already uses.
- Name it Brionic ID, two words, capital B and capital ID.
Files
SVG only. It is the source, and it is sharp at every size.
Download the mark