Sign in with INK button

The button below is the recognizable control users click to start Sign in with INK. It is reference UI, not part of the wire protocol. The protocol pins only the challenge and grant artifacts and how each side accepts or rejects them. This page pins the look of the button so a user sees the same control at every relying party.

Use the dark button on light backgrounds and the light button on dark backgrounds.

What it does when clicked

“Sign in with INK” is a human-facing button, but it never collects a password. A click hands the sign-in to the visitor’s own INK agent, which confirms the request with them and then proves their identity to your site. The person is the user; their agent is the INK principal that answers for them. That hand-off is the whole point: the visitor authenticates through the agent they already run rather than through a new account with you.

It only signs in a visitor who already has an INK agent, so show it where your users have one and keep your other sign-in options alongside it. A visitor with no agent then still has a familiar way in.

Download

Ready-made SVG assets, with the button files sized at 196 by 44 and the mark and label baked in. Each preview sits on the background the file is drawn for. The light files are white, so opening one straight on a white page looks blank. That is expected. Pick the file whose swatch matches your surface.

sign-in-with-ink-dark.svg — button for light backgrounds

sign-in-with-ink-light.svg — button for dark backgrounds

ink-nib.svg — nib mark for light backgrounds

ink-nib-light.svg — nib mark for dark backgrounds

Drop one straight into a link:

<a href="/auth/ink/start">
  <img src="https://ink.tulpa.network/brand/sign-in-with-ink-dark.svg"
       alt="Sign in with INK" width="196" height="44">
</a>

Build it in markup

For a live button that inherits your own font rendering and focus styles, copy the markup and CSS below. The nib fill follows the text color and the dot follows the button background, so the one snippet covers both variants.

<a class="ink-signin" href="/auth/ink/start">
  <svg class="ink-signin__nib" width="20" height="24" viewBox="0 0 20 24" aria-hidden="true" fill="none">
    <path d="M8 1 L14 9 L14 16 L11.5 23 L10.5 23 L9.5 17 L8 14.5 L6.5 17 L5.5 23 L4.5 23 L2 16 L2 9 Z" />
    <circle cx="8" cy="7.5" r="1.5" />
  </svg>
  <span>Sign in with INK</span>
</a>

.ink-signin {
  --ink-btn-bg: #121220;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--ink-btn-bg);
  color: #ffffff;
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  border: 1px solid transparent;
}
.ink-signin__nib path { fill: currentColor; }
.ink-signin__nib circle { fill: var(--ink-btn-bg); }
.ink-signin:hover { filter: brightness(1.08); }
.ink-signin:focus-visible { outline: 2px solid #7c5cfc; outline-offset: 2px; }

/* Light variant for dark backgrounds */
.ink-signin--light {
  --ink-btn-bg: #ffffff;
  color: #121220;
  border-color: #d0d0d8;
}

Sizing and clear space

Keep the button at least 40 pixels tall so the nib stays legible, and scale width and height together. Leave clear space around the button equal to the height of the nib mark, and never crowd it against other buttons or text.

Do

Use the exact label Sign in with INK, in that casing.
Pick the variant that contrasts with the surface behind it.
Keep the nib and label in their given proportion.

Don’t

Do not rename the button or translate the word INK.
Do not recolor the nib, add shadows or apply effects to the mark.
Do not crop, rotate or distort the button or the nib.

The mark

The icon is the INK nib, the same glyph that forms the “I” in the INK wordmark. It stands in for identity here the way a keyhole stands in for a lock. When you need the full wordmark rather than the sign-in button, use the logo files in the INK repository.

Where it fits

The button starts the flow described in Agent Authorization: a click sends the user to their agent with your signed challenge, and the agent returns an identity assertion your completion endpoint verifies. The runnable reference-rp example shows the relying-party side end to end.