Sign in with TatvaOS

Button assets for applications that use TatvaOS as their identity provider. Give this page to any developer integrating with TatvaOS SSO.

The buttons

On a light background — use this one unless you have a reason not to

On a dark background

Icon only — for tight spaces, beside other providers

Copy this

Self-contained: no fonts to load, no images to host, no stylesheet to link. Point href at your own endpoint that starts the OpenID Connect flow.

<style>
.tos-btn{display:inline-flex;align-items:center;gap:12px;height:44px;
  padding:0 20px 0 16px;border-radius:8px;border:1px solid #D9DEE8;
  background:#fff;color:#0B1B3F;text-decoration:none;cursor:pointer;
  font:600 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.tos-btn:hover{background:#F4F7FC;border-color:#C3CBDA}
.tos-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(15,124,245,.35)}
.tos-btn svg{flex:none;width:20px;height:20px}
</style>

<a class="tos-btn" href="/auth/tatvaos/start">
  <svg viewBox="0 0 48 48" aria-hidden="true">
    <defs><linearGradient id="tosMark" x1="6" y1="4" x2="42" y2="44"
      gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#1E52D9"/>
      <stop offset=".55" stop-color="#2A7BEE"/>
      <stop offset="1" stop-color="#3BA9F7"/>
    </linearGradient></defs>
    <path fill="url(#tosMark)" d="M17.94 3.5 Q24 0 30.06 3.5 L38.72 8.5
      Q44.78 12 44.78 19 L44.78 29 Q44.78 36 38.72 39.5 L30.06 44.5
      Q24 48 17.94 44.5 L9.28 39.5 Q3.22 36 3.22 29 L3.22 19
      Q3.22 12 9.28 8.5 Z"/>
    <rect x="13" y="13" width="22" height="6.5" rx="2" fill="#fff"/>
    <rect x="20.75" y="13" width="6.5" height="23" rx="2" fill="#fff"/>
  </svg>
  Sign in with TatvaOS
</a>

Colours

#0B1B3F navy — text, dark button #0F7CF5 azure — focus ring mark gradient

Rules for using this button

These exist so that a person seeing the button knows what it does and can trust it. They apply to anyone putting TatvaOS sign-in on their own product.

• Do not recolour the mark. The gradient hexagon is the only version. No solid fills, no inverted colours, no tinting to match your brand.
• Do not change the wording. It reads Sign in with TatvaOS. Not "Login with", not "Continue with", not "TatvaOS SSO".
• Keep the mark's proportions. Scale it, do not stretch it, and do not crop the hexagon.
• Leave clear space of at least the mark's own height on every side of the button.
• Minimum height 36px. Below that the mark stops being legible.
• Give it equal weight beside other sign-in providers. Do not make it smaller or quieter than the others on the same screen.
• Never use the mark or the name to suggest TatvaOS endorses, built, owns or has reviewed your application. The button means people can sign in with a TatvaOS account. It means nothing else.
• Never place the button on a page that collects a TatvaOS password. Sign-in happens on TatvaOS's own pages and nowhere else — an application that asks for a TatvaOS password is doing something wrong, whatever its intentions.

One thing to tell the people who click it

Signing in with TatvaOS means their sign-in to your application depends on TatvaOS being reachable. If TatvaOS is down, they cannot sign in to you either. This is true of every identity provider and it is worth saying plainly in your own help pages rather than leaving people to discover it.