Branding

Use these official buttons and guidelines when integrating Fabi-SC ID into your application.

Logo

The official Fabi-SC ID logo:

Available at:

• https://id.fabi-sc.com/assets/logo.webp (recommended)
• https://id.fabi-sc.com/assets/logo.png

Button Preview

Light:

Sign in with Fabi-SC ID

Dark:

Sign in with Fabi-SC ID

Neutral:

Continue with Fabi-SC ID

Pill:

Sign in with Fabi-SC ID

Icon Only:

HTML Code

Copy and paste these code snippets into your application. Replace YOUR_APP_ID with your application’s Client ID.

Light Button

<a href="https://id.fabi-sc.com/consent/YOUR_APP_ID" class="fabi-btn fabi-btn-light">
  <img src="https://id.fabi-sc.com/assets/logo.webp" alt="" width="24" height="24">
  <span>Sign in with Fabi-SC ID</span>
</a>

Dark Button

<a href="https://id.fabi-sc.com/consent/YOUR_APP_ID" class="fabi-btn fabi-btn-dark">
  <img src="https://id.fabi-sc.com/assets/logo.webp" alt="" width="24" height="24" style="filter: brightness(100)">
  <span>Sign in with Fabi-SC ID</span>
</a>

Neutral Button

<a href="https://id.fabi-sc.com/consent/YOUR_APP_ID" class="fabi-btn fabi-btn-neutral">
  <img src="https://id.fabi-sc.com/assets/logo.webp" alt="" width="24" height="24">
  <span>Continue with Fabi-SC ID</span>
</a>

Icon Only

<a href="https://id.fabi-sc.com/consent/YOUR_APP_ID" class="fabi-btn-icon" title="Sign in with Fabi-SC ID">
  <img src="https://id.fabi-sc.com/assets/logo.webp" alt="Fabi-SC ID" width="28" height="28">
</a>

Pill Shape

Add fabi-btn-pill class to any button:

<a href="https://id.fabi-sc.com/consent/YOUR_APP_ID" class="fabi-btn fabi-btn-light fabi-btn-pill">
  <img src="https://id.fabi-sc.com/assets/logo.webp" alt="" width="24" height="24">
  <span>Sign in with Fabi-SC ID</span>
</a>

CSS Styles

.fabi-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.fabi-btn-light {
  background: #ffffff;
  color: #1a365d;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.fabi-btn-light:hover {
  background: #f8fafc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fabi-btn-dark {
  background: #1a365d;
  color: #ffffff;
  border: 1px solid #1a365d;
}

.fabi-btn-dark:hover {
  background: #2c5282;
}

.fabi-btn-neutral {
  background: #f1f5f9;
  color: #1a365d;
  border: 1px solid #e2e8f0;
}

.fabi-btn-neutral:hover {
  background: #e2e8f0;
}

.fabi-btn-pill {
  border-radius: 9999px;
}

.fabi-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.fabi-btn-icon:hover {
  background: #f8fafc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Accepted Text Variants

You may use these call-to-action texts:

• “Sign in with Fabi-SC ID”
• “Sign up with Fabi-SC ID”
• “Continue with Fabi-SC ID”
• “Login with Fabi-SC ID”

Localization to match your application’s language is permitted.

Guidelines

Do

• Display the Fabi-SC ID button at least as prominently as other sign-in options
• Maintain the aspect ratio when scaling
• Use sufficient contrast against your background
• Keep the logo clearly visible

Don’t

• Stretch or distort the logo
• Change the logo colors (except white for dark backgrounds)
• Add effects (shadows, gradients) to the logo itself
• Place on busy backgrounds that reduce visibility
• Make the button smaller than other sign-in options