Button and branding

People recognise a sign-in button by its shape before they read it. Keep the Tabbio button looking like the Tabbio button and it does its job in a row of four.

The button

Field	Type	Description
Heightrequired	44px	Fixed. It is also the minimum comfortable touch target.
Corner radiusrequired	22px	Fully rounded. A pill, not a rounded rectangle.
Labelrequired	Continue with Tabbio	Or Sign in with Tabbio. Nothing else.
Label size	15px / 500	Poppins, Inter, or your own interface font at medium weight.
Mark height	18px	20px of clear space to its left, 10px between the mark and the label.
Minimum width	180px	Below that the label wraps and the button stops reading as one control.

Light variant

A white surface, a hairline border, dark label, violet mark. Use it on light pages.

Field	Type	Description
Background	#FFFFFF	Flat. No gradient.
Border	1px #D7D7D2	Hairline.
Label	#17171A
Mark	#5A2AFF	Tabbio violet.

Dark variant

Field	Type	Description
Background	#17171A	Flat.
Border	1px #2A2A2D
Label	#F1F1EF
Mark	#A995FF	The lighter violet. #5A2AFF on near black fails contrast.

Assets

Ready-made SVGs, or build your own from the mark.

Button, light

232 by 44, white surface.

Button, dark

232 by 44, near-black surface.

Mark, violet

The Tabbio glyph on its own.

Mark, white

For dark or coloured surfaces.

Build it yourself

The mark inlined, so you get a real button element with your own focus and hover behaviour rather than an image.

button.html

<a class="tabbio-button" href="/login/tabbio">
  <svg class="tabbio-mark" viewBox="0 0 261 308" aria-hidden="true" focusable="false">
    <path
      fill="currentColor"
      d="M56.48 2.68C68.21 2.23 82.31 2.59 94.16 2.62L160.47 2.66C161.02 12.06 160.6 25.77 160.6 35.63C160.49 58.8 160.54 81.98 160.75 105.15C184.94 104.93 209.11 105.34 233.32 104.99C234.32 112.39 233.7 122.86 233.66 130.72C233.61 141.64 234.08 153.58 233.49 164.39C209.19 163.45 184.72 164.69 160.71 164.13C160.56 181.64 160.53 199.14 160.64 216.65C160.65 224.29 161.06 237.22 160.42 244.52C182.04 245.03 203.97 244.43 225.59 244.65C232.97 244.72 254.18 244.05 259.66 245.65C261.23 248.55 260.33 278.13 260.29 283.88C260.43 290.65 260.66 297.44 260.24 304.21L210.44 304.27C175.91 304.28 147.51 305.7 120.64 279.78C98.34 258.26 101.26 236.1 101.31 208.13C101.38 193.46 101.36 178.79 101.27 164.12C97.93 164.28 93.8 164.11 90.39 164.05C60.79 163.54 30.88 164.67 1.31 164.09C0.98 142.8 0.83 79 2.07 57.38C2.22 54.65 50.84 5.69 56.48 2.68ZM62.76 65.42C49.48 65.22 36.2 65.24 22.91 65.47C22.92 78.2 22.6 92.42 23.07 105.04L62.89 105.16C75.67 105.2 88.46 105.15 101.24 105C101.45 78.73 100.62 50.01 101.38 24.17C88.57 24.19 75.61 24.11 62.81 24.3C62.82 37.58 63.11 52.23 62.76 65.42Z"
    />
  </svg>
  <span>Continue with Tabbio</span>
</a>

button.css

.tabbio-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  min-width: 180px;
  padding-inline: 20px;
  border: 1px solid #d7d7d2;
  border-radius: 22px;
  background: #ffffff;
  color: #17171a;
  font: 500 15px/1 Poppins, Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.tabbio-button:hover {
  border-color: #b8b8b2;
}

.tabbio-button:focus-visible {
  outline: 2px solid #5a2aff;
  outline-offset: 2px;
}

.tabbio-mark {
  width: auto;
  height: 18px;
  color: #5a2aff;
}

@media (prefers-color-scheme: dark) {
  .tabbio-button {
    border-color: #2a2a2d;
    background: #17171a;
    color: #f1f1ef;
  }

  .tabbio-button:hover {
    border-color: #45454a;
  }

  .tabbio-mark {
    color: #a995ff;
  }
}

The mark path above is rounded to two decimals for readability. The files under /brand/ carry the full-precision original; use those when you need the exact vector.

Rules

Write "Tabbio" with a capital T and nothing else. Not TABBIO, not tabb.io.
Keep 20px of clear space around the button.
Give the button its own accessible name. If you ship the SVG as an image, its alt is "Continue with Tabbio", not "Tabbio logo".
Put it at the same visual weight as the other providers in the row.

Do not

Recolour, rotate, outline, or add effects to the mark.
Redraw it, or substitute a letter "t" from a font.
Put it on a busy photograph. It needs a flat surface.
Say "Powered by Tabbio", "Tabbio Certified", or anything else that implies a partnership Tabbio has not agreed to.
Use the Tabbio name in your product name, your domain, or your app store listing.

Naming your integration

"Sign in with Tabbio" and "Import from Tabbio" describe what your feature does and are fine. "Tabbio Sync" or "TabbioConnect" name a product, which needs written permission from Tabbio first. Ask at developers@tabbio.com.

Accessibility

The button is a link or a button element, never a bare div with a click handler.
44px tall clears the pointer target minimum on every platform.
The focus ring is visible: two solid pixels of #5a2aff, offset by two. Do not remove the outline without replacing it.
The label is real text, so it scales with the user's font size and gets read out. A flattened image of the button does neither.
Both variants meet WCAG AA against their own surface. If you place the light button on a tinted background, check the contrast yourself.