Brand Guidelines

Sign in with Bink

Official guidelines for integrating the Bink login button into your application. Follow these specs to ensure a consistent, on-brand experience.

Button Variants Code Colors

Live Preview

The Button

The "Sign in with Bink" button uses the official Binatomy gradient with an animated gradient-shift effect. It must always be presented with the following style.

Light background

Dark background

Brand Rules

Guidelines

Follow these rules to keep the button consistent across all platforms.

Minimum width	200px
Padding	14px 32px
Border radius	16px
Font weight	600 (Semibold)
Font size	16px
Text color	#FFFFFF (White)
Animation	gradient-shift 6s ease infinite

Do

✓Use the official gradient colors exactly as specified
✓Keep a minimum clear space of 8px around the button
✓Use "Sign in with Bink" or the localized equivalent as button text
✓Maintain the animated gradient-shift effect

Don't

✗Change the gradient colors or direction
✗Remove the gradient animation
✗Add extra icons or decorations to the button
✗Reduce the button below the minimum size

Options

Variants

Three official variants to fit different contexts.

Standard

The default button with the Binatomy orange gradient. Use on light backgrounds.

Dark

A dark version for use on colored or dark backgrounds.

Compact

Icon-only version for tight spaces. Minimum 44×44px.

Sizes

Integration

Code Examples

Copy-paste ready snippets for your platform.

HTML / CSS

Add this CSS to your stylesheet, or include the Bink button stylesheet:

html

<!-- CSS -->
<style>
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-bink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: linear-gradient(
    135deg, #ff9500, #f7931e, #ff6b35 30%,
    #f15a24, #ff8c42 70%, #f7931e, #ff9500
  );
  background-size: 300% 300%;
  animation: gradient-shift 6s ease infinite;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px 0 rgba(255, 107, 53, 0.3);
}

.btn-bink:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px 0 rgba(255, 107, 53, 0.4);
}
</style>

<!-- Button -->
<a href="https://bink.link/api/oauth/authorize?client_id=YOUR_ID&redirect_uri=YOUR_URI&response_type=code"
   class="btn-bink">
  Accedi con Bink
</a>

React / Next.js

tsx

// BinkButton.tsx
import './bink-button.css'; // or include the CSS above

interface BinkButtonProps {
  text?: string;
  clientId: string;
  redirectUri: string;
  size?: 'sm' | 'md' | 'lg';
}

export function BinkButton({
  text = 'Sign in with Bink',
  clientId,
  redirectUri,
  size = 'md',
}: BinkButtonProps) {
  const sizeClass = size === 'sm' ? 'btn-bink-sm'
    : size === 'lg' ? 'btn-bink-lg' : '';

  const authUrl = `https://bink.link/api/oauth/authorize?${new URLSearchParams({
    client_id: clientId,
    redirect_uri: redirectUri,
    response_type: 'code',
  })}`;

  return (
    <a href={authUrl} className={`btn-bink ${sizeClass}`}>
      {text}
    </a>
  );
}

// Usage:
// <BinkButton clientId="YOUR_ID" redirectUri="https://yourapp.com/callback" />

React Native

tsx

// BinkButton.tsx (React Native / Expo)
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as WebBrowser from 'expo-web-browser';

interface Props {
  text?: string;
  clientId: string;
  redirectUri: string;
}

export function BinkButton({
  text = 'Accedi con Bink',
  clientId,
  redirectUri,
}: Props) {
  const handlePress = async () => {
    const params = new URLSearchParams({
      client_id: clientId,
      redirect_uri: redirectUri,
      response_type: 'code',
    });
    await WebBrowser.openAuthSessionAsync(
      `https://bink.link/api/oauth/authorize?${params}`,
      redirectUri
    );
  };

  return (
    <TouchableOpacity onPress={handlePress} activeOpacity={0.9}>
      <LinearGradient
        colors={['#ff9500', '#f7931e', '#ff6b35', '#f15a24', '#ff8c42']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.button}
      >
        <Text style={styles.text}>{text}</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    paddingVertical: 14,
    paddingHorizontal: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#ff6b35',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 14,
    elevation: 6,
  },
  text: {
    color: '#ffffff',
    fontWeight: '600',
    fontSize: 16,
  },
});

Palette

Color Specifications

The official Binatomy color palette used in the gradient.

Name	Hex	Usage
Bink Orange	#ff9500	Primary gradient start/end
Bink Amber	#f7931e	Gradient midpoint
Bink Flame	#ff6b35	Gradient accent (30%)
Bink Red-Orange	#f15a24	Gradient depth
Bink Tangerine	#ff8c42	Gradient accent (70%)

CSS Gradient

css

background-image: linear-gradient(
  135deg,
  #ff9500,        /* Bink Orange */
  #f7931e,        /* Bink Amber */
  #ff6b35 30%,    /* Bink Flame */
  #f15a24,        /* Bink Red-Orange */
  #ff8c42 70%,    /* Bink Tangerine */
  #f7931e,        /* Bink Amber */
  #ff9500         /* Bink Orange */
);
background-size: 300% 300%;
animation: gradient-shift 6s ease infinite;

Ready to integrate?

Check the full OAuth 2.0 documentation to implement "Sign in with Bink" in your app.

Developer Docs OAuth Guide