Accedi →
Linee Guida Brand

Accedi con Bink

Linee guida ufficiali per integrare il pulsante di login Bink nella tua applicazione. Segui queste specifiche per garantire un'esperienza coerente e in linea col brand.

PulsanteVariantiCodiceColori
Anteprima Live

Il Pulsante

Il pulsante "Accedi con Bink" usa il gradiente ufficiale Binatomy con effetto gradient-shift animato. Deve essere sempre presentato con lo stile seguente.

Sfondo chiaro

Sfondo scuro

Regole Brand

Linee Guida

Segui queste regole per mantenere il pulsante coerente su tutte le piattaforme.

Larghezza minima200px
Padding14px 32px
Border radius16px
Peso font600 (Semibold)
Dimensione font16px
Colore testo#FFFFFF (Bianco)
Animazionegradient-shift 6s ease infinite

Corretto

  • ✓Usa i colori del gradiente ufficiale esattamente come specificato
  • ✓Mantieni uno spazio minimo di 8px attorno al pulsante
  • ✓Usa "Accedi con Bink" o l'equivalente localizzato come testo del pulsante
  • ✓Mantieni l'effetto gradient-shift animato

Sbagliato

  • ✗Cambiare i colori o la direzione del gradiente
  • ✗Rimuovere l'animazione del gradiente
  • ✗Aggiungere icone o decorazioni extra al pulsante
  • ✗Ridurre il pulsante sotto la dimensione minima
Opzioni

Varianti

Tre varianti ufficiali per adattarsi a diversi contesti.

Standard

Il pulsante predefinito con il gradiente arancione Binatomy. Usa su sfondi chiari.

Dark

Versione scura per sfondi colorati o scuri.

Compatto

Versione solo icona per spazi ridotti. Minimo 44×44px.

Sizes

Integrazione

Esempi di Codice

Snippet pronti da copiare e incollare per la tua piattaforma.

HTML / CSS

Aggiungi questo CSS al tuo foglio di stile, oppure includi il foglio di stile del pulsante Bink:

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

Specifiche Colori

La palette colori ufficiale Binatomy usata nel gradiente.

NomeHex
Bink Orange		#ff9500
Bink Amber		#f7931e
Bink Flame		#ff6b35
Bink Red-Orange		#f15a24
Bink Tangerine		#ff8c42

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;

Pronto per integrare?

Consulta la documentazione completa OAuth 2.0 per implementare "Accedi con Bink" nella tua app.

Documentazione DeveloperGuida OAuth