Brand Assets

Logos, colors, typography, and ready-to-use buttons for integrating "Sign in with Taler ID".

Logo

1024 × 1024 px, PNG · Use on dark backgrounds

Download PNG

1024 × 1024 px, PNG · Use on light backgrounds

Download PNG

Colors

Taler Blue

#167EF2

Taler Blue Dark

#1570D6

Taler Gold

#FBBF24

Background Dark

#0A0E1A

Foreground Light

#F5F7FA

Typography

Inter — UI text

Body text uses Inter at 16 px with 1.5 line-height for readability.

Smaller hints and metadata sit at 14 px in muted color.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

JetBrains Mono — Code

curl -X POST https://id.taler.tirol/oauth/register

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Buttons

Drop these "Sign in with Taler ID" buttons into your app. The CSS block below covers all four variants — paste it once, then use the per-variant HTML.

Shared CSS — paste once

.signin-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #167EF2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 120ms ease;
  user-select: none;
  box-sizing: border-box;
}
.signin-btn:hover { text-decoration: none; }
.signin-btn--regular { height: 44px; padding: 0 16px; font-size: 14px; }
.signin-btn--large   { height: 56px; padding: 0 24px; font-size: 16px; }
.signin-btn--light          { background: #FFFFFF; color: #167EF2; }
.signin-btn--light:hover    { background: #EFF6FF; }
.signin-btn--dark           { background: #167EF2; color: #FFFFFF; }
.signin-btn--dark:hover     { background: #1570D6; border-color: #1570D6; }

Light · Regular (44 px)

<a href="https://id.taler.tirol/oauth/auth?..." class="signin-btn signin-btn--regular signin-btn--light">Sign in with Taler ID</a>

Light · Large (56 px)

<a href="https://id.taler.tirol/oauth/auth?..." class="signin-btn signin-btn--large signin-btn--light">Sign in with Taler ID</a>

Dark · Regular (44 px)

<a href="https://id.taler.tirol/oauth/auth?..." class="signin-btn signin-btn--regular signin-btn--dark">Sign in with Taler ID</a>

Dark · Large (56 px)

<a href="https://id.taler.tirol/oauth/auth?..." class="signin-btn signin-btn--large signin-btn--dark">Sign in with Taler ID</a>