# Recursos de marca de Be Agent

Usa estos recursos en tu catálogo de integraciones, botón de conexión y configuración. Dominio oficial: https://agents.begraffic.com.

[Kit ZIP](/brand/integrations/be-agent-integration-kit.zip) · [Tokens JSON](/brand/integrations/be-agent-brand-tokens.json) · [CSS del botón](/brand/integrations/be-agent-connect.css)

## Logotipos descargables

| Recurso | SVG | PNG transparente |
| --- | --- | --- |
| Logotipo para fondo claro | [SVG](/brand/integrations/be-agent-logo-color.svg) | [PNG](/brand/integrations/be-agent-logo-color.png) |
| Logotipo para fondo oscuro | [SVG](/brand/integrations/be-agent-logo-white.svg) | [PNG](/brand/integrations/be-agent-logo-white.png) |
| Símbolo para fondo claro | [SVG](/brand/integrations/be-agent-symbol-color.svg) | [PNG](/brand/integrations/be-agent-symbol-color.png) |
| Símbolo para fondo oscuro | [SVG](/brand/integrations/be-agent-symbol-white.svg) | [PNG](/brand/integrations/be-agent-symbol-white.png) |

## Colores

| Nombre | HEX | Aplicación |
| --- | --- | --- |
| Violeta Agent | #6D3CE8 | Color principal y botón de conexión. |
| Azul respuesta | #3D7BFA | Acento secundario. |
| Ámbar acción | #FFB547 | Acento puntual. |
| Tinta | #18181B | Texto sobre fondo claro. |
| Blanco | #FFFFFF | Logotipo y texto sobre fondo oscuro. |

## Lineamientos de identidad

- Escribe Be Agent, con espacio. En el logotipo, «Be» utiliza peso regular y «Agent» negrita. La firma es «por BeGraffic» y la promesa es «Conversa. Y resuelve.».
- Conserva el lienzo completo: incluye un margen libre de un cuarto del ancho del símbolo. El símbolo visible mide como mínimo 16 px solo o 24 px junto al nombre; en impresión, 6 mm solo o 10 mm junto al nombre.
- Usa la versión de color sobre fondos claros y la blanca sobre fondos oscuros. No deformes, recortes, gires ni recolorees el logotipo; evita sombras, degradados y fotografías sin contraste.
- La tipografía de marca es Google Sans (400, 500, 600 y 700). JetBrains Mono se usa para cifras y código. Los SVG del logotipo contienen texto sin trazar: utiliza los PNG transparentes si no tienes Google Sans; para imprenta, traza el texto. Los símbolos SVG no dependen de fuentes. El kit no incluye archivos de fuentes.
- Prioriza fondos claros y neutros: proporción orientativa de 60 % neutros, 25 % violeta, 10 % azul y 5 % ámbar. Usa tarjetas de radio 12 px y botones de radio 8 px. Mantén contraste de 4,5:1 para texto normal y 3:1 para texto grande y elementos gráficos.
- Habla de forma atenta, precisa y resolutiva. Usa responder, resolver, confirmar y atender. Evita «estimado usuario», «procesando solicitud» e «IA de última generación». Las imágenes muestran conversaciones y personas reales; evita robots y destellos decorativos.
- En el catálogo de integraciones muestra el logotipo y una descripción de las capacidades que realmente implementas. Tras autorizar, muestra el workspace conectado, su estado y las opciones para reconectar o desconectar. Usa «Conectado» solo tras la confirmación del servidor; si falta configuración, muestra «Configuración pendiente».
- Estos materiales identifican la integración con Be Agent. Registrar una aplicación no implica verificación ni permite presentarla como producto oficial de BeGraffic.

## Botón de conexión

Etiqueta: **Conectar con Be Agent**. Copia los recursos y CSS a tu propio dominio; las rutas /assets/be-agent/ del ejemplo son ilustrativas. El símbolo decorativo usa alt vacío; conserva la etiqueta visible y un área de clic mínima de 44 px.

```html
<link rel="stylesheet" href="/assets/be-agent/be-agent-connect.css" />
<button type="button" class="be-agent-connect" id="connect-be-agent">
  <img class="be-agent-connect__symbol"
    src="/assets/be-agent/be-agent-symbol-white.svg" alt="" width="30" height="30" />
  <span>Conectar con Be Agent</span>
</button>
<script>
  document.querySelector('#connect-be-agent').addEventListener('click', () => {
    window.location.assign('/api/be-agent/start'); // Ruta de TU backend.
  });
</script>
```

La variante clara usa be-agent-connect--outline y el símbolo de color. La variante oscura usa be-agent-connect--dark y el símbolo blanco. Los SVG del símbolo incluyen su margen libre: un lienzo de 30 px muestra un símbolo de 20 px.

El CSS incluye hover, foco visible y disabled. Deshabilita el botón durante la operación y muestra carga y errores con texto accesible. Este ejemplo aporta presentación y navegación: tu servidor debe implementar [Be Agent Connect](/docs#be-agent-connect), validar sesión y state, iniciar PKCE, procesar el callback y guardar los tokens. Nunca incluyas secretos ni tokens en el botón.

## Antes de publicar

Comprueba proporciones y contraste en ambos fondos, navegación con teclado, cancelación y reconexión. El workspace y estado visibles deben coincidir con los confirmados por tu servidor.