Bis · Agencia de comunicación · Huelva

2026

Manual de
identidad.

Cómo se ve, se mueve y suena Bis. La guía viva de la marca: una sola fuente de verdad para el equipo y para quien trabaja con nosotros.

Versión1.0
ContieneLas 6 secciones del sistema
Construido conAlcyone · tokens del sistema
AcentoVioleta #5B3FB0

01 — La marca

Dos gotas que tambiénson comillas.

El isotipo son dos gotas superpuestas: somos dos, gemelos, y venimos de lo editorial — las comillas de quien cuenta. «Contamos lugares. Contamos marcas. Contamos personas.» Monocromo, sin degradado; un canal de luz separa las dos gotas para que se lean también en una sola tinta.

Lockup principal isotipo + bis

Versión principal sobre papel. Archivo: bis-logo-lockup-tinta.svg.

Anatomía las dos piezas

Isotipo

Dos gotas/comillas, la trasera +8%. El símbolo solo: avatar, sello, abrir citas, motion.

Wordmark

«bis» en Alcyone Black, redibujado, interletraje óptico fijado. No se rehace en otra tipografía.

El símbolo en violeta uso expresivo

El isotipo —y solo el isotipo— admite el acento de marca para momentos puntuales: sello, avatar, apertura de cita, motion. No es la versión por defecto; cuando el violeta aparece, es un gesto, no la norma.

Violeta sobre papel

Sello y avatar. bis-isotipo-violeta.svg · #5B3FB0

Negativo sobre violeta

Fondo de acento. #F4F1EA

El acento se reserva al símbolo. El wordmark y el lockup completo se mantienen en tinta o negativo para el uso corriente.

Versiones cuándo cada una

Tinta sobre papel

Principal. Fondos claros. #211D17

Negativo sobre carbón

Fondos oscuros o foto/vídeo oscuro. #F4F1EA

Violeta · expresivo

Uso puntual con el acento. No por defecto. #5B3FB0

Área de respeto y tamaño mínimo aire

Margen mínimo alrededor = la altura de la «b» del wordmark. Nada invade esa zona: ni texto, ni otros logos, ni bordes.

cómodo
mín. lockup · 120 px
iso · 24 px

Lockup a partir de ~120 px de ancho; isotipo solo a partir de ~24 px. Por debajo, el favicon (el canal de separación se cierra antes, está optimizado para eso).

Usos sí / no

+ Hacer

  • Tinta sobre claro; negativo sobre carbón o foto oscura.
  • Solo tinta #211D17, papel #F4F1EA o violeta #5B3FB0.
  • Respetar el área de aire y los tamaños mínimos.
  • Girar 180° el isotipo solo como comilla de cierre (uso editorial).
  • Sobre foto movida, negativo con zona oscura suficiente o un velo.

× No hacer

  • Reintroducir el degradado coral→morado (retirado).
  • Recolorear el isotipo fuera de la paleta.
  • Deformar, rotar (salvo el giro editorial), añadir sombras o contornos.
  • Rehacer el wordmark en otra tipografía.
  • Separar las dos gotas hasta que floten: van en contacto (gemelos).

02 — Color

Monocromo cálido,violeta a cuentagotas.

Base neutra y cálida; un único color de marca usado con medida. El color no decora: marca acciones y momentos. El protagonismo cromático es del trabajo audiovisual.

Dos superficies que conviven

Papel — para leer

Por defecto: servicios, blog, textos largos, quiénes somos. Lee como estudio editorial con criterio.

Hablamos →

Y un enlace de ejemplo sobre papel.

Carbón — para mostrar

A sangre para el trabajo: home, porfolio, casos. El vídeo y la foto brillan sobre negro.

Hablamos →

Y un enlace de ejemplo sobre carbón.

Base neutra (cálida)

Papel
#F4F1EA
--c-bg
Papel elevado
#FBF9F4
--c-bg-raised
Carbón
#14110D
--c-bg-dark
Tinta / carbón elevado
#211D17
--c-text · --c-bg-dark-raised
Tinta suave
#6B655B
--c-text-muted
Sobre oscuro suave
#B8B2A6
--c-text-on-dark-muted
Gris piedra
#706A5D
--c-stone
Línea (claro)
#D8D3C8
--c-border

Acento — violeta profundo

Violeta
#5B3FB0
--c-accent
Violeta fuerte
#46309A
--c-accent-strong
Violeta sobre oscuro
#A78BD8
--c-accent-on-dark
Violeta tinte
#ECE7F7
--c-accent-tint

Reglas de uso cuentagotas

+

  • El violeta, una cosa por vista: una CTA principal, enlaces, el foco.
  • Texto violeta sobre papel en #46309A; sobre carbón en #A78BD8.
  • Botón: relleno violeta, texto papel; hover a violeta fuerte.
  • Neutros cálidos, nunca #000/#FFF puros.

× No

  • Tres cosas en violeta en la misma pantalla: sobra una.
  • Texto pequeño en #5B3FB0 sobre papel (no llega a AA).
  • Que la interfaz compita en color con el vídeo o la foto.
  • Degradados en superficies de marca.

Accesibilidad WCAG AA

Tinta / papel ≈13:1 Texto / carbón ≈12:1 #46309A / papel ≥7:1 Papel / botón violeta ≥4.5:1 #A78BD8 / carbón ≥4.5:1

03 — Tipografía

Alcyone, una sola voztipográfica.

Monotipográfica: una familia para todo, las mayúsculas como recurso. La jerarquía la dan el peso y el tamaño, no mezclar fuentes.

Pesos que se cargan en web

Aa
Black · 900

Display, hero, titulares de impacto.

Aa
SemiBold · 600

H1–H3, destacados.

Aa
Medium · 500

Subtítulos, UI, botones, overlines.

Aa
Regular · 400

Cuerpo de texto.

Aa
Italic · 400

Citas, pies de foto, énfasis.

Aa
Light · 300

Entradillas grandes (opcional).

Escala tipográfica tamaño + peso + tracking

Contamos historiasDisplay · Black · −0.02em
Lo último que contamosH1 · Black · −0.015em
Tres maneras de contarloH2 · SemiBold
Un titular de tercer nivelH3 · SemiBold · 22px
Una entradilla que abre con aireLead · Light · 22px
Cuerpo de texto a 18px, la medida cómoda de lectura.Cuerpo · Regular · 18px
«Una cita en itálica, con intención.»Cita · Italic
Pie de foto o metadatoMeta · Medium · 14px
Antetítulo · overlineOverline · Medium · +0.12em

Las mayúsculas, como recurso la firma

Cartaya
Titulares en minúscula, cálidos. La mayúscula entra como golpe puntual — un sitio, un año, una palabra. Esa alternancia es, en sí, un rasgo reconocible del sistema.

Reglas sí / no

+

  • Jerarquía por contraste de peso: el salto Black ↔ Regular es el drama.
  • Tracking según tamaño: display cerrado, cuerpo a 0, lo pequeño en mayúsculas abierto (+0.12em).
  • Medida de lectura de 65–75 caracteres por línea.
  • Cifras tabulares en datos, fechas y precios.

× No

  • Mezclar una segunda tipografía: Alcyone para todo.
  • Itálica en párrafos largos (solo citas, pies y énfasis).
  • Mayúsculas en cuerpo o en titulares de más de 3–4 palabras.
  • Tres pesos parecidos juntos: se emborrona.

04 — Movimiento

La idea es un punto.

La firma de movimiento de Bis. El punto que sigues por el margen es justo esto: documentado en vivo, dentro del propio manual — por eso el formato es digital y no un PDF.

Principios

Con propósitoCada gesto orienta, da feedback o jerarquiza. Si no, fuera.
Rápida y easedCinética pero ágil. Curvas out-expo: entra con energía, frena suave.
Una firma, no veinte efectosPocos gestos repetidos con disciplina crean identidad.
Reduced-motion es un contratoTodo degrada a su estado final. Sin reveals, scroll nativo.
Rendimiento sagradoSolo transform y opacity. Cero CLS. No hundir los Core Web Vitals.

Tokens de movimiento

instant 80msfast 180msbase 320msslow 520mscinematic 800ms
ease-out .22,1,.36,1ease-soft .16,1,.30,1ease-spring .34,1.56,.64,1

La firma de movimiento catálogo

Gesto 13 · solo home

El punto

«La idea es un punto.» Nace del titular, viaja por el margen y rellena cada antetítulo. Lo ves funcionando aquí mismo.

01

Revelado de titulares

Máscara desde abajo, línea a línea con stagger. El gesto estrella.

02

Reveal al scroll

Bloques con fade + desplazamiento sutil; los medios, con clip-reveal.

03

Smooth scroll (Lenis)

Scroll físico suave que sincroniza todo. La mitad de la sensación premium.

06

Botón magnético

Sigue levemente al cursor; la flecha → avanza unos píxeles.

08

Transición de página

Un telón en carbón/violeta: no saltas de página, cortas de plano.

09

El isotipo que gotea

La gota como loader y acento de fin de página. Con mucha mesura.

Catálogo completo (13 gestos) en Microinteracciones · v1. Stack: GSAP + ScrollTrigger + Lenis, como islands. Prueba el botón «Movimiento» de abajo para ver el estado reducido.

05 — Voz y tono

Cercanos, claros,con criterio.

Castellano cuidado, sin tecnicismos ni muletillas. El guiño de marca es el bis — repetir, volver a ver —, con medida. El equipo es más que dos.

Atributos de voz

CercanaHablamos de tú, como quien le cuenta algo a alguien.
ClaraSin tecnicismos ni jerga de agencia. Directo.
Con criterioProfesional sin solemnidad. Castellano cuidado.
EditorialVenimos de contar. El ritmo de la frase importa.

El guiño de marca el bis

El guiño es el bis — repetir, volver a ver, pedir otra —, no los gemelos. Máximo uno o dos por página. El equipo es más que Javi y Álvaro: nunca redactar como si fueran solo dos. Y «equipo propio» o «productora propia», nunca «cámara propia».

Ejemplos sí / no

No
«Agencia 360 que ofrece soluciones de comunicación integral.»
«Contamos lugares, marcas y personas. De la idea al plano final.»
No
«Disponemos de cámara propia.»
«Tenemos productora propia y equipo propio.»
No
«Echa un vistazo a nuestro portfolio.»
«Echa un vistazo a nuestro porfolio.»

Vocabulario

+ Decimos

  • porfolio (RAE), siempre — también en las URLs.
  • equipo propio · productora propia.
  • contar, contamos — es el verbo de la casa.

× Evitamos

  • portfolio, con t.
  • «oficio» y las muletillas de agencia.
  • tecnicismos y el «360».

06 — Aplicaciones

La marca en el mundo.

Web, audiovisual y social: cómo se aplica todo lo anterior sobre piezas reales.

Audiovisual — ratios

21:9 · hero
16:9 · reel
4:5 / 9:16 · vertical
3:2 · foto
1:1 · sello

Web

Papel para leer, carbón para mostrar. Hero a sangre con vídeo en bucle silenciado; manda el titular Alcyone. El acento, a cuentagotas.

Vídeo

Sonido silenciado por defecto, con botón claro; subtítulos siempre; poster como LCP; sin autoplay con reduced-motion.

Social

Formatos verticales (4:5, 9:16). El isotipo como avatar y sello; el violeta, solo en el símbolo.

Marca aplicada

Lockup en tinta o negativo según fondo; área de respeto siempre; nunca el degradado.

Detalle completo en Tratamiento del audiovisual · v1 y Arquitectura de la web · v1.

Fin del recorrido

Esto es Bis.

Un manual que se actualiza con la web, porque está hecho con los mismos materiales. Hecho en Huelva.

Hablamos →