Briefing completo para la renovación de identidad visual, posicionamiento, tono de comunicación y sistema de diseño de Extera. Una marca que traduce décadas de complejidad burocrática en claridad operativa.
MarcaLogoColorTipografíaTonoProducto
01
01 — Diagnóstico
De dónde venimos y por qué importa
Extera opera en 54 países, gestiona más de 500 millones de trabajadores y tiene certificaciones ISO 27001 y SLA 99,9%. Son las cifras de una empresa de primera línea. Y sin embargo, la imagen que proyecta no lo refleja: cinco nombres distintos, cinco estéticas distintas, sin un hilo que ate el portfolio.
La identidad actual dice "proveedor de servicios personalizado". La nueva identidad debe decir "plataforma de referencia en la que confían miles de empresas para no caerse del sistema".
Los datos que hacen visible el problema
120 de 200 personas están en Operaciones. El 60% de la plantilla haciendo trabajo que, en un modelo de producto escalable, debería estar automatizado o no existir. Los OKRs actuales lo confirman: reducir llamadas perdidas, bajar tiempos de validación documental, mejorar tiempos de respuesta.
El equipo comercial está bloqueado por falta de materiales. Se levantan oportunidades y no hay nada con lo que sustentar la venta: los dossieres y materiales actuales están, en palabras de quien los usa, "a nivel visual y conceptual muy lejos de ser algo profesionalizado". Cuando el competidor llega con un deck limpio y Extera llega con un tutorial en vídeo, la imagen hace el trabajo de venta más difícil de lo necesario.
La fragmentación tiene coste comercial directo. En demos con clientes que evalúan Dokify, Zima o Twin, Extera llega con cinco nombres distintos. La arquitectura de marca confunde antes de que empiece la conversación.
El canal de partners necesita ser redefinido. El 50% de la facturación de España viene de un canal heredado que operaba en marca blanca — Extera no aparecía en la foto. Desde que Extera adquirió la capa de servicio compite directamente con algunos de esos partners. El nuevo sistema de marca tiene que funcionar tanto en modo directo como en co-branding con partners que aporten valor real.
Los equipos se sienten de empresas distintas. Las adquisiciones — APSIS, Clever/Sercae, Nexia, Control Documental — trajeron talento y capacidad. También trajeron culturas e identidades que nunca se integraron bajo una narrativa compartida. "Los de Valencia" y "los de Vitoria" son mundos distintos.
El conocimiento crítico vive en personas, no en sistemas. Las demos no se grababan por política anterior. El contexto de clientes y cuentas está concentrado en individuos específicos. Una empresa que no acumula conocimiento de forma estructurada no puede escalar.
Problemas identificados en la marca actual
Fragmentación visual entre dominios (eGestiona, eIntegra, Sercae, QSuite): cada producto parece de una empresa diferente.
Ausencia de una idea central memorable. La marca no comunica el problema concreto que resuelve.
Estética que no transmite la escala real: 54 países, 500M de trabajadores gestionados, ISO 27001, SLA 99,9%.
Confusión entre herencia de adquisiciones (Clever Global, APSIS, Nexia, Control Documental) y la marca paraguas.
Ningún elemento visual que conecte con el usuario real: el autónomo, el coordinador, el responsable de PRL.
02 — Posicionamiento
Qué lugar ocupa Extera en el mundo
Para que la marca funcione, necesitamos primero saber qué queremos que ocupe en la cabeza de quien la recibe. No es un discurso de marketing: es una coordenada estratégica.
Para
Empresas que contratan trabajo externo, y para las contratas y autónomos que trabajan para ellas.
El problema que resolvemos
La burocracia documental y normativa que bloquea el trabajo antes de que pueda empezar.
Lo que somos
La plataforma que convierte ese caos en control. Gestión, acceso y cumplimiento en un solo lugar.
Por qué solo nosotros
Décadas de conocimiento sectorial embebido en producto. No es software genérico: entiende cómo funciona este mundo.
Tagline propuesto
★ Opción principal
El orden que permite trabajar.
Directo, empático, propositivo
Cumple. Accede. Trabaja.
Secuencial, funcional
La gestión que no paraliza.
Empático con el dolor del usuario
Donde empieza el trabajo.
Evocador, amplio
03 — Audiencias
A quién le hablamos y qué necesita escuchar
La marca habla a audiencias muy distintas. Necesita sonar creíble para un director de PRL de una multinacional y también humana para un autónomo que está rellenando documentación a las 10 de la noche.
Empresa contratante
La empresa principal
Director de Operaciones o PRL. Gestiona decenas de contratas simultáneas. Le preocupa el incumplimiento, los accidentes y las auditorías.
Dolor: no sé si mis contratas están al día. Si pasa algo, la responsabilidad cae sobre mí.
Contrata / Proveedor
La empresa subcontratada
Administración de una pyme con 20-50 trabajadores. Trabaja con varios clientes y cada uno le pide documentación diferente en formatos diferentes.
Dolor: paso horas gestionando papeles para poder trabajar. No es lo que sé hacer.
Trabajador / Autónomo
El que ejecuta
Técnico, operario o autónomo. Necesita acreditarse para entrar a una obra o instalación. No entiende por qué no puede empezar si ya tiene todo.
Dolor: no puedo entrar a trabajar porque falta un papel que nadie me dijo que necesitaba.
La marca no puede hablar solo en el idioma del compliance. Debe resonar también con quien vive el problema en el día a día: el que espera en la puerta de la obra, el que gestiona documentación para seis clientes distintos.
04 — Territorio de Marca
El espacio que queremos poseer
El territorio de marca define los valores, el tono emocional y los atributos que deben impregnar cada punto de contacto: el logo, los textos, la interfaz del producto, una propuesta comercial, una notificación en el móvil.
Rigor que no ahoga.
Extera vive en el espacio donde el cumplimiento normativo y la eficiencia operativa se encuentran. La marca debe transmitir seriedad sin ser pesada, autoridad sin ser intimidante, precisión sin ser fría.
Atributos de marca
Sólida: inspira confianza institucional. No es una startup. Es la plataforma en la que confías cuando el cumplimiento tiene consecuencias reales.
Clara: convierte la complejidad normativa en pasos comprensibles. No complica más lo que ya es complicado.
Habilitadora: no es un guardia que frena. Es quien abre la puerta cuando estás en orden.
Cercana: entiende que al otro lado hay personas con trabajo real que hacer, no burocracia que amar.
Moderna: no es un software de 2005. Está transformándose activamente. Lo que era manual, ahora es automático.
Lo que NO es Extera
No es una consultora. No resuelve el problema por ti manualmente: te da la herramienta para resolverlo tú.
No es un software genérico. Conoce el sector y sus reglas de memoria.
No es una marca que habla solo a grandes empresas. El autónomo también es audiencia.
No es una marca digital-first vacía. La solidez de décadas de operación es un activo, no algo que esconder.
05 — Logo & Símbolo
La E hexagonal: seis piezas, una marca
El símbolo parte de una idea conceptual precisa: Extera nació de la suma de múltiples empresas, equipos y adquisiciones. El logo lo cuenta. Seis piezas independientes que encajan en una sola forma: la E. El ángulo a 60° del spine izquierdo no es decorativo — es geometría hexagonal, la forma más eficiente de la naturaleza para unir sin dejar espacio vacío.
EXTERA
eGestiona · eNac · APSIS · Clever/Sercae · Nexia · Control Documental — 1 marca
ENSAMBLA
REVERSED
BRAND BLUE
HAT TEST
EXTERA
BADGE H.
Por qué este logo
La historia está en la forma. Las seis piezas que componen la E son el relato visual de la historia de Extera: múltiples empresas, una sola plataforma. No hace falta explicarlo.
El ángulo del spine rompe la rigidez de una E estándar. No es un accidente geométrico: es lo que diferencia este símbolo de cualquier otra marca con inicial E.
Funciona en una sola tinta, en negativo, en tamaño mínimo (favicon/app icon) y en gran formato (señalética, accesos físicos).
No depende del color para existir. Es sólida en blanco, en negro, en azul institución. El color amplifica; no sostiene.
El wordmark en versalitas con tracking amplio complementa el símbolo sin competir: diferente peso visual, mismo registro de seriedad.
05B — El Origen Geométrico
El hexágono: lo que la presión revela
La mayoría de los símbolos se diseñan. Este se descubrió.
Cuando algo enorme se enfrenta a presión suficiente — y tiene tiempo para organizarse bien — la forma que emerge no es aleatoria. Es siempre la misma. Es el hexágono. No porque alguien lo decida: porque es la única respuesta matemáticamente correcta al problema de distribuir tensión en un plano de manera eficiente.
Eso es lo que hacen los basaltos columnares. Y eso es lo que hace Extera.
E hexagonal · φ-adjusted · v4
EXTERA
Capa 01
La estructura · Lo que la presión revela
Los basaltos columnares
Cuando una colada de lava basáltica se enfrenta al frío — millones de toneladas de roca fundida que la realidad obliga a enfriarse — algo sucede. La roca se contrae. La tensión acumula hasta que el material no puede más. Y entonces se quiebra.
Pero las grietas no son aleatorias. Las primeras fracturas se distribuyen al azar — rectangulares, caóticas, irregulares. Sin embargo el sistema se autocorrige. Las grietas se reorganizan, se optimizan, convergen. Y el patrón que emerge — siempre, inevitablemente — son hexágonos.
La razón es física pura: tres grietas que se encuentran en ángulos de 120° es la única configuración que libera el máximo estrés con la mínima longitud total de fractura. El hexágono no es una decisión estética. Es la solución óptima al problema de distribuir presión en un plano.
Estado inicial
Fracturas caóticas
La lava se quiebra al azar. Ángulos rectos, patrones irregulares. El sistema todavía no conoce la solución.
Transición
El sistema se corrige
Los ángulos rectos se reorganizan hacia 120°. El patrón encuentra su forma óptima progresivamente.
Estado final · Inevitable
Hexágonos perfectos
El sistema converge. Tres grietas en 120° en cada unión: máximo alivio de tensión, mínima longitud de fractura.
Referencia · Physical Review Letters, 2015 · Hofmann et al.
Los ángulos rectos entre grietas tienden a aproximarse a 120° a medida que el frente de fractura avanza. El hexágono no es el punto de partida — es el punto de llegada. El patrón más eficiente siempre emerge, independientemente de cómo empezaron las grietas. Los lugares más conocidos: la Calzada del Gigante (Irlanda del Norte, 40.000 columnas, 50-60 millones de años), Devils Tower (Wyoming, 264m), las Islas Canarias, Islandia, el Columbia River Gorge.
El basalto
→
La presión es el detonante. Sin la tensión de enfriamiento, no hay columnas.
→
El caos es el estado inicial. El orden emerge después, por necesidad.
→
Cada columna es autónoma pero solidaria. Juntas forman algo que ninguna puede ser sola.
→
La escala es industrial. Columnas de hasta 30 metros en roca pura.
Extera
→
La presión regulatoria del CAE es el detonante. Sin compliance, el sistema no existiría.
→
Seis empresas distintas, caóticas en origen. El orden emerge al ensamblarse.
→
Cada módulo opera de manera autónoma. Juntos forman una plataforma que ninguno puede ser solo.
→
54 países, 500M de trabajadores gestionados, industria pesada, obras, plantas.
Capa 02
Lo que vive dentro · El trabajador
La colmena: la misma forma, otra escala
El basalto explica la estructura — por qué el hexágono es inevitable cuando hay presión suficiente y tiempo para organizarse. Pero hay una segunda capa que habla de lo que ocurre dentro de esa estructura.
Las abejas llegaron a la misma forma por otro camino. No por física, sino por millones de años de evolución que les enseñaron que el hexágono usa la mínima cantidad de cera para cubrir la máxima superficie. Es la solución biológica al mismo problema matemático.
El panal es la estructura que hace posible el trabajo. Cada celda es autónoma, funcional, ocupada. Pero el panal como sistema es lo que protege, organiza y da sentido a la actividad de cada abeja individual. La colmena no es decorativa — es operativa.
La celda del trabajador
Cuando la documentación está en orden, el trabajador entra en su celda. El panal funciona. Nadie espera en la puerta.
La colmena
→
Solución biológica activa. La abeja construye, mantiene, renueva. Hay agencia.
→
La celda es el espacio del trabajo vivo. Entra y sale. Cambia. Está siempre en movimiento.
→
La miel — el oro — es el resultado del trabajo coordinado. No del caos, sino de la estructura.
Para el trabajador
→
La contrata acreditada que entra a trabajar. La credencial que abre la puerta. La celda que le pertenece.
→
Extera no para el trabajo — lo hace posible. El sistema que funciona es el que nadie nota.
→
El dorado del oro como color Connect: la miel del sistema, lo que produce la coordinación cuando funciona.
La forma · Dos lecturas · Un símbolo
El basalto
La plataforma. Estructural, permanente, inevitable bajo presión. La roca que soporta. Lo que no cambia aunque cambien las contratas.
La colmena
La coordinación viva. Las contratas que entran, trabajan y salen. El oro que produce el sistema cuando funciona. Lo que la plataforma hace posible.
"El hexágono no es nuestro logo. Es la respuesta que da la naturaleza cuando algo complejo se enfrenta a presión suficiente y tiene tiempo para organizarse bien."
01 — Origen
6 lados · 6 orígenes
Los 3 lados izquierdos (dorado) forman la E. Los 3 derechos esperan a la contrata.
02 — Construcción
Grid de 8 px
Spine 36px · Gaps 16px uniformes · Barra central 72px · φ = 1.618
03 — Cierre
El producto cierra
La barra vertical derecha es el módulo específico — Comply, Access o Source. Cuando encaja, el hexágono está completo y toma el color del producto correspondiente.
EXTERAPRODUCTO
El ensamblaje: separado y completo
SEPARADAS
ACREDITADA
COMPLETO
Las dos expresiones del símbolo
Misma geometría, dos modos. La E sola es la marca paraguas — la plataforma Extera, la roca, lo permanente. La E con el complemento es la marca aplicada a un producto: la barra vertical derecha toma el color espectral del módulo (Comply indigo, Access naranja, Source verde) y el hexágono se completa.
Marca Extera — plataforma
EXTERA
La roca. Abierta, estructural, permanente. Para la empresa, las comunicaciones corporativas y los contextos donde la marca actúa sin producto específico.
Marca Extera — producto
EXTERAPRODUCTO
La barra vertical derecha es el slot del producto. Cuando la marca se aplica a un módulo específico, ese slot toma el color espectral correspondiente y el nombre del producto sustituye a "PRODUCTO".
La E sola habla de estructura y permanencia — la plataforma que no cambia. La E con el complemento habla de aplicación y especificidad — un producto del ecosistema actuando bajo el paraguas Extera. El basalto permanece. La barra vertical derecha es el módulo que entra. El hexágono los une a los dos sin que ninguno contradiga al otro.
05C — Construcción del Símbolo · Proporción Áurea
LA E CONSTRUIDA CON φ
El ajuste de la barra central no es arbitrario. La relación entre el ancho de las barras superiores e inferiores (116px) y el ancho de la barra central (72px) reproduce la proporción áurea: 116 ÷ 72 = 1,611 ≈ φ. El cambio es de 8px — invisible a la vista — pero convierte la geometría de la E en un sistema matemáticamente coherente.
Lámina de construcción · grid 8px
Proporciones áureas en la E
116 ÷ 72 = 1,611≈ φ = 1,618 ✓
Ancho barra sup/inf vs barra central. El ratio principal — la razón del ajuste de 8px.
240 ÷ 148 = 1,621≈ φ = 1,618 ✓
Alto del hexágono / corte áureo vertical. La sección áurea aparece en el eje Y del símbolo.
152 ÷ 36 = 4,22≈ φ³ = 4,236 ✓
Ancho total de las barras / spine. La E en relación a su propio eje vertical.
88 ÷ 32 = 2,75→ φ² = 2,618
Altura barra superior vs counter central. Aproximación — el ajuste exacto afectaría a la legibilidad.
CAMBIO APLICADO
Barra central: 80px → 72px (−8px). No altera la lectura visual de la E. Clava la proporción áurea entre anchos y ancla todo el sistema geométrico.
Lámina de espiral · solo construcción, nunca en aplicaciones
La espiral áurea no entra en el logo final — es la lámina de construcción que demuestra que las proporciones no son arbitrarias. Cada rectángulo anidado enmarca un nivel de la marca: el primero abraza toda la zona activa de la E, el segundo separa las barras del counter space, y los sucesivos convergen en el gap central — el corazón geométrico del símbolo.
PATHS DEFINITIVOS (φ-ADJUSTED)
E: M 152,28 L 152,88 L 36,88 L 36,104
L 108,104 L 108,136 L 36,136 L 36,152
L 152,152 L 152,212 L 104,240
L 0,180 L 0,60 L 104,0 Z
Contrata: M 168,36 L 208,60 L 208,180 L 168,204 Z
Autosimilitud fractal · 1/φ recursivo
Cada nivel se reduce a 1/φ (61,8%) del anterior. La E contiene una versión de sí misma, indefinidamente. Esta propiedad puede usarse en animaciones de marca, loading screens y presentaciones — nunca en aplicaciones estáticas de producto.
100% → 38,2% → 14,6% → 5,6% (1/φ) (1/φ²) (1/φ³)
Brand pattern · tiling hexagonal
dark · subtle
EXTERA
brand azul · dorado
EXTERA
light · documentos · corporativo
EXTERA
E + contrata · premium · partner
EXTERA
05E — Clearspace, Tamaño Mínimo y Usos Incorrectos
ÁREA DE PROTECCIÓN
El símbolo necesita espacio para respirar. La unidad de medida X es la altura de la barra central de la E (48 unidades del path SVG). El clearspace mínimo alrededor del símbolo — y de cualquier lockup — es 1X en todos los lados.
Símbolo solo · clearspace 1X
Lockup horizontal · clearspace 1X
Tamaño mínimo de reproducción
Por debajo de estos tamaños el símbolo pierde legibilidad. En aplicaciones menores de 24px (favicon, tab icon), usar la versión simplificada sin barras internas.
Formato
Digital (px)
Impresión (mm)
Símbolo solo
24 px
6 mm
Lockup horizontal
88 px
22 mm
Lockup vertical
64 px
16 mm
Usos incorrectos
Estas transformaciones degradan la marca y no están permitidas bajo ninguna circunstancia. Si el contexto no permite un uso correcto, contacta al responsable de marca.
No estirar
Mantener siempre las proporciones originales
No rotar
El símbolo siempre vertical, base alineada
No recolorear
Solo colores de las versiones canónicas A/B/C/D
No añadir efectos
Sin sombras, resplandores, biseles ni degradados
No recortar
El símbolo siempre completo y visible
No bajo contraste
Mínimo 3:1 contra el fondo (WCAG AA gráficos)
→
Si una aplicación no permite cumplir estas reglas (espacio insuficiente, fondo no controlable, tamaño menor al mínimo), usa solo el símbolo en su versión de mayor contraste. Si aun así no funciona, no uses el logo — contacta al responsable de marca.
05D — Presentación y Disposición de Marca
VERSIONES DEL SÍMBOLO
Cuatro versiones canónicas, cada una con su fondo y tratamiento de color predefinidos. No se mezclan libremente — cada versión es una combinación cerrada con nombre, uso y reglas de producción propias.
Módulo
Lockup
Versión
Tamaño
Fondo
EXTERA
→
A · Color
Logo en sus colores propios sobre fondo papel. Versión principal — uso en documentos, pantallas claras y comunicaciones.
B · Sobre oscuro
Logo en blanco papel sobre tinta pura. Para dark mode, portadas, materiales premium y fondos fotográficos oscuros.
C · Sobre color
Logo en blanco sobre el color del módulo. La más expresiva. El color del módulo es el protagonista. Banners, cabeceras, material de producto.
D · Una tinta
Todo el símbolo en un único color. Para bordado, grabado, serigrafía a una tinta y sellos físicos. Funciona en positivo y negativo.
05F — Co-branding y Marcas Asociadas
CONVIVENCIA CON TERCEROS
Cuando el logo de Extera aparece junto al de un partner, cliente o certificación, se aplican estas tres reglas sin excepción. El objetivo es proteger la legibilidad y jerarquía de ambas marcas.
01 · Posición
Extera siempre a la izquierda (horizontal) o arriba (vertical). En composiciones de más de dos marcas, Extera encabeza la secuencia.
02 · Separador
Línea vertical de 1px en var(--grid) con clearspace de 1X a cada lado. Sin separador = sin co-branding.
03 · Colores propios
Cada marca mantiene sus colores propios. El partner no usa la paleta Extera en su logo, y viceversa. En monocromo, ambos en la misma tinta.
Lockup horizontal · Extera + partner
✓ Correcto
→ Extera a la izquierda, separador de 1px, partner a la derecha
→ Ambos logos al mismo tamaño óptico o Extera ligeramente mayor
→ En monocromo, ambos en la misma tinta
→ Certificaciones (ISO, AENOR) como badges debajo del lockup, nunca al mismo nivel
✗ Incorrecto
× Partner más grande que Extera
× Fusionar logos (encajar el símbolo del partner dentro de la E)
× Partner usando colores de la paleta Extera en su logo
× Omitir el separador vertical entre logos
→
Para partners tecnológicos integrados en producto (ej.: Dorlet para control de accesos), se permite un lockup "Powered by Extera" en la interfaz del partner, con el símbolo a 16px y wordmark en Courier Prime 9px. Contactar al responsable de marca para aprobación.
06 — Paleta de Color
Un sistema cromático que transmite confianza
La paleta propuesta se construye alrededor de un azul institucional profundo (autoridad, confianza, sector), un dorado artesanal (precisión, valor, diferenciación) y una base neutra cálida (humanidad, claridad, legibilidad). El rojo de alerta se reserva exclusivamente para estados críticos.
Tinta#141413
Color del símbolo sobre papel
Azul Institución#1A3A5C
Color de marca principal
Azul Acción#3B7CB5
CTAs, links, interactivos
Oro#C4933F
La miel del sistema
Papel#F5F3EE
Fondo principal
Alerta#E84C3D
Solo estados críticos
Uso y jerarquía
Tinta (#141413): color primario del símbolo del logo sobre fondo papel. El mark existe primero en tinta, luego en blanco invertido. No es un color decorativo: es la base estructural de la marca.
Azul Institución (#1A3A5C): el color "Extera" en contextos de marca: fondo de portadas, encabezados de comunicaciones, el logo en su versión sobre color. Cuando el símbolo aparece sobre azul institución, es blanco. Nunca azul sobre azul.
Azul Acción (#3B7CB5): botones primarios, enlaces, elementos interactivos en el producto. No se usa para decoración ni en el logo.
Oro (#C4933F): el color de la miel. Es el dorado del complemento de contrata — la pieza que cierra el hexágono y representa la actividad que lo llena. Si la E es la colmena, el oro es la miel: lo que produce el trabajo coordinado. Acento selectivo en líneas divisorias, etiquetas de sección y detalles de portada. Nunca como fondo de texto largo y nunca dentro del símbolo.
Papel (#F5F3EE): fondo predeterminado de todo el producto y comunicaciones. El símbolo en tinta sobre papel es la combinación por defecto: máxima legibilidad, mínima carga visual.
Alerta — ver sección 06B: los estados documentales y la escala de confianza IA tienen su propio subsistema cromático documentado en la sección siguiente. El rojo de alerta de la paleta base (#E84C3D) es el techo más crítico de ese sistema.
06B — Estados Documentales & Confianza IA
EL COLOR COMO SEÑAL
Los colores de estado son la parte del sistema que el usuario ve más. Determinan si puede entrar o no, si el documento es válido o ha vencido, si la IA confía o duda. Necesitan ser inequívocos, escalables y distinguibles entre sí incluso en condiciones de baja atención — móvil, pantalla a distancia, daltonismo.
Hay dos subsistemas independientes pero relacionados: los estados del ciclo de vida documental y los grados de confianza de la IA. Un documento puede estar "En revisión humana" precisamente porque la IA tiene confianza baja — son capas distintas que a veces coexisten en la misma ficha.
Estados del ciclo de vida documental
VÁLIDO
VERIFICADO
#1A7A4A · bg #EDF7F2
Documento vigente y aprobado. Acceso habilitado. No requiere acción.
El sistema está procesando el documento. Estado transitorio.
RECHAZADO
NO VÁLIDO
#141413 · bg #F0EFEE
Rechazado manualmente o por incumplimiento. Requiere corrección.
EXENTO
NO APLICA
#626262 · bg #F5F5F5
Requisito no aplicable a esta empresa, actividad o centro.
SIN ENVIAR
PENDIENTE DE ENVÍO
Borde discontinuo = acción requerida por usuario
El documento existe pero no se ha enviado. La contrata debe actuar.
!
Accesibilidad: el color nunca es el único indicador
Cada estado incluye siempre: icono o forma diferenciada, texto de estado explícito, y contraste mínimo 4.5:1 (WCAG AA). Los usuarios con daltonismo deben poder distinguir "Válido" de "Caducado" sin depender del verde/rojo. El borde discontinuo para "Sin enviar" y el círculo hueco son ejemplos de esta capa formal.
Grados de confianza de la IA
El subsistema de temperatura IA es independiente del estado documental. Un documento puede estar "En revisión" porque la IA tiene confianza baja — la IA no decide, sugiere. El color comunica cuánto confía el modelo y qué nivel de intervención humana se necesita.
ALTA CONFIANZA → AUTOMÁTICONO DETERMINABLE → MANUAL
Nivel 1
Alta confianza
>90%
Validación automática. Sin intervención humana.
AUTO-APROBADO
Nivel 2
Confianza buena
75–90%
IA aprueba con nota. Humano puede revisar opcionalmente.
SUGERIDO ✓
Nivel 3
Confianza media
50–75%
IA sugiere, señala ambigüedad. Revisión humana recomendada.
REVISAR
Nivel 4
Confianza baja
25–50%
IA no puede validar. Escala obligatoriamente a revisor humano.
ESCALAR
Nivel 5
No determinable
<25%
Documento ilegible, formato no reconocido o fuera de scope.
REVISIÓN MANUAL
Cómo coexisten en la interfaz
Un documento puede mostrar simultáneamente su estado documental y el grado de confianza con el que la IA llegó a ese estado. Son capas de información distintas, no sinónimos.
Seguro de Responsabilidad Civil
DOC-2026-0892 · Técnicos Reunidos S.A.
● VÁLIDO
Vence: 15 dic 2026
IA
92%
Certificado de Aptitud Médica
DOC-2026-1134 · Técnicos Reunidos S.A.
◔ EN REVISIÓN
Motivo: confianza IA insuficiente
IA
38%
El primer documento fue validado automáticamente (confianza 92%). El segundo está en revisión humana porque la IA obtuvo confianza 38% — la barra y el porcentaje explican el motivo sin texto adicional.
06C — Dark Mode
MAPEO DE TOKENS OSCUROS
Extera no implementa dark mode en la v1.0, pero el sistema está preparado para ello. Estas correspondencias definen cómo se transforma cada token de color cuando el contexto cambia a oscuro. Implementar dark mode = sustituir estas variables en @media (prefers-color-scheme: dark).
Token
Light
Dark
Nota
--paper
#F5F3EE
#0D0F14
Fondo principal se invierte
--paper-warm
#EDE9E1
#1A1C22
Superficie elevada (cards, paneles)
--ink
#0D0F14
#F5F3EE
Texto principal se invierte
--ink-soft
#2A2D36
#B0B3BE
Texto secundario
--ink-muted
#505462
#7A7D8A
Metadatos, placeholders
--grid
#D8D4CC
#2A2D36
Bordes, separadores, líneas de tabla
--accent
#1A3A5C
#2E5F8A
Sube un nivel de brillo para mantener contraste
--gold
#C4933F
#C4933F
Se mantiene — ya tiene buen contraste en oscuro
Estados documentales en dark mode
Los fondos de badge se oscurecen manteniendo el tono. Los textos de estado mantienen su color original (ya cumple WCAG AA sobre fondos oscuros). Los bordes pasan de sólidos a rgba(color, 0.2).
● VÁLIDO● PENDIENTE● AVISO● CRÍTICO● EN PROCESO● SIN ENVIAR
→
Los colores espectrales de producto (Comply indigo, Access naranja, Source verde) no cambian en dark mode — ya están diseñados para funcionar sobre fondos oscuros. Solo se ajusta el papel tintado de cada módulo, que pasa de #EDEAEF (Comply light) a rgba(75,58,138,0.08) (Comply dark).
07 — Tipografía
Las voces de la marca
El sistema tipográfico parte de una regla clara que establece el propio logo: todo el sistema habla en DM Sans. No hay serif en titulares, en producto ni en comunicaciones operativas. El serif tiene un único rol semántico: aparece cuando habla una persona — una cita, un testimonio, un mensaje humano dentro del producto. Esa restricción lo convierte en una señal, no en decoración.
Wordmark del logo — uso exclusivo del símbolo
EXTERA
DM Sans · weight 500 · letter-spacing 10px · uppercase · no serif
EL ORDEN QUE PERMITE TRABAJAR.
DM Sans 800 · titulares · portadas · comunicaciones
La voz principal de la marca. Mayúsculas, peso 800, tracking negativo para masa visual. Funciona en cualquier tamaño porque la forma de la letra es lo suficientemente neutra para soportar el protagonismo sin decoración.
"Antes tardaba dos semanas en acreditar a cada contrata. Ahora es cuestión de horas."
DM Serif Display · solo voz humana: citas, testimonios, mensajes de persona a persona
El serif aparece únicamente cuando habla una persona. Una cita de cliente, un testimonio, el mensaje de un coordinador dentro del producto. Su presencia es señal: aquí hay una voz humana, no el sistema.
Courier Prime — Datos técnicos · IDs · fechas · estados · etiquetas de sección
Para datos de referencia, identificadores y metadatos. También para las etiquetas de sección en formato "01 — Título" que estructuran las comunicaciones internas. Comunica precisión técnica y trazabilidad.
Escala tipográfica · ratio 1.25×
Escala modular con base 16px y multiplicador 1.25 (Major Third). Todos los tamaños se redondean al píxel entero más cercano. Los fallbacks son: Arial (para DM Sans), Georgia (para DM Serif Display), Courier New (para Courier Prime).
Nivel
Familia · Peso
Tamaño
Line-h
Spacing
Transform
Uso típico
Display
DM Sans · 800
49px
0.95
-0.03em
uppercase
Portada, hero del brand book
H1
DM Sans · 800
39px
1.05
-0.025em
uppercase
Título de sección
H2
DM Sans · 800
31px
1.1
-0.02em
uppercase
Subsección, card heading
H3
DM Sans · 600
13px
1.4
0.06em
uppercase
Label de grupo, nombre de bloque
Body
DM Sans · 400
15px
1.75
normal
—
Párrafos, descripciones
Small
DM Sans · 400
13px
1.6
normal
—
Notas, ayuda contextual
Caption
DM Sans · 500
11px
1.5
normal
—
Disclaimers, pie de foto
Mono
Courier Prime · 400
12px
1.6
0.08em
—
IDs, códigos, fechas, estados
Mono Bold
Courier Prime · 700
10px
1.4
0.15em
uppercase
Section labels, badges, tags
Serif Quote
DM Serif Display · italic
28px
1.3
normal
—
Citas, testimonios, voz humana
→
DM Sans weight 300 solo en tamaños ≥ 18px sobre fondos de contraste alto. Nunca en cuerpos de texto. Para titulares responsivos, usar clamp(): Display = clamp(44px, 7vw, 80px), H1 = clamp(28px, 4vw, 44px).
07B — Motion & Interacción
CUÁNDO SE MUEVE Y CUÁNTO
El movimiento en Extera tiene una sola función: comunicar estado. No anima para decorar ni para demostrar que el sistema es moderno. Anima para decir que algo está cargando, que una acción tuvo efecto, que un estado cambió. Si la animación no añade información, no existe.
01
Funcional, no decorativa
Cada animación responde a una acción del usuario o a un cambio de estado del sistema. No hay animaciones de entrada de página ni loaders decorativos.
02
Rápida en acciones, lenta en transiciones
Las acciones del usuario (clic, hover, foco) responden en menos de 150ms. Las transiciones de estado (cambio de pantalla, modal, toast) usan 200–350ms.
03
Respeta prefers-reduced-motion
Cualquier animación no esencial se desactiva si el usuario tiene activado prefers-reduced-motion: reduce. Los cambios de estado se comunican igualmente vía color y texto.
Tokens de motion
TokenValorEasingUso
--duration-micro80msease-outHover, foco, cambio de icono
--duration-fast150msease-outClic, cambio de color de estado, toggle
--duration-base250msease-in-outAparición de toast, badge de estado
--duration-enter300mscubic-bezier(0.0, 0.0, 0.2, 1)Entrada de modal, panel lateral, drawer
--duration-exit200mscubic-bezier(0.4, 0.0, 1, 1)Salida de modal, cierre de panel
--duration-skeleton1200msease-in-out · infiniteSkeleton loaders de carga de documentos
Qué nunca se anima
Mensajes de error y alertas críticas. Un documento caducado o un acceso bloqueado no aparece con fade — aparece inmediatamente. El sistema de seguridad no tiene animación de entrada.
Listas de documentos largas. No hay stagger ni animaciones de lista. En tablas con 200+ registros, cualquier animación introduce latencia percibida.
Cambios de estado de IA. Cuando la barra de confianza actualiza su valor, el cambio es instantáneo. El resultado no se "cuenta" visualmente — se muestra.
Navegación principal. El sidebar y la barra de navegación son elementos estructurales. No colapsan con animación ni tienen transiciones de expansión.
Skeleton loader — especificación
El único patrón de loading con animación. Se usa exclusivamente mientras se carga la lista de documentos o el detalle de una contrata. El color del skeleton usa siempre la gama neutra del tema:
Skeleton de lista documental — 1200ms · ease-in-out · infinite · prefers-reduced-motion: opacity estática
Curvas de easing — valores exactos
Las duraciones sin el easing correcto son la mitad del trabajo. Estas son las curvas que deben usarse para cada tipo de movimiento en el producto:
EASE-OUT · Entradas
cubic-bezier(0.0, 0.0, 0.2, 1)
Elementos que aparecen, se expanden o entran en pantalla. Rápido al principio, suave al final.
EASE-IN · Salidas
cubic-bezier(0.4, 0.0, 1, 1)
Elementos que desaparecen, se colapsan o salen. Lento al principio, rápido al final.
EASE-IN-OUT · Transiciones
cubic-bezier(0.4, 0.0, 0.2, 1)
Cambios de estado, swaps de contenido. Suave en ambos extremos.
LINEAR · Continuo
linear
Solo para loops infinitos: skeleton loaders, spinners. Nunca para interacciones de usuario.
SHARP · Mecánico
cubic-bezier(0.4, 0.0, 0.6, 1)
Acciones precisas y rápidas. Toggles de acceso, cambios de estado de documento.
SPRING · Prohibido
cubic-bezier(0.68, -0.55, 0.265, 1.55)
No aplica en Extera. El sistema es institucional, no lúdico. El bounce genera ruido visual en contextos críticos.
Tabla de duraciones por interacción
InteracciónDuraciónEasingEjemplo en Extera
''' + ''.join([f'''
{r[0]}{r[1]}{r[2]}{r[3]}
''' for r in [
('Hover badge / estado', '100ms', 'ease-out', 'Chip de modo espectral, badge de estado documental'),
('Hover icono Phosphor', '150ms', 'ease-out', 'Iconos de navegación, acciones de lista'),
('Toggle / checkbox', '150ms', 'ease-out', 'Toggle dark mode iconografía, checkbox de requisito'),
('Tooltip', '200ms', 'ease-out', 'Información de un estado de documento'),
('Cambio de tab', '250ms', 'ease-in-out', 'Módulos en la navegación principal'),
('Accordion / expansión', '300ms', 'ease-out', 'Detalle de contrata, árbol de requisitos'),
('Modal apertura', '300ms', 'ease-out', 'Confirmación de rechazo, vista de documento'),
('Modal cierre', '250ms', 'ease-in', 'Cierre de modal tras aprobar'),
('Toast / notificación', '300ms', 'ease-out', 'Confirmación de validación automática IA'),
('Panel lateral', '300ms', 'ease-out', 'Detalle de trabajador, ficha de contrata'),
('Skeleton loader', '1200ms', 'linear ∞', 'Carga de lista documental'),
]]) + '''
Performance — reglas fijas
Solo animar transform y opacity — GPU-acelerado, 60fps.
Nunca animar width, height, top, margin — causa reflow.
Duración máxima de interacción: 500ms. Por encima, el usuario percibe lentitud.
CSS para transiciones simples, JS solo para secuencias complejas.
El estado sigue comunicándose por color y texto. La animación desaparece, la información no.
Audio branding · nota
♪
Extera no tiene audio branding definido en la v7.0. Si se necesita en el futuro — notificaciones de app, sonido de validación, confirmación de acceso NFC — debe seguir los mismos principios que la marca visual:
→Preciso: sonido corto (≤ 300ms), sin melodía compleja. Un tono, un evento.
→No intrusivo: volumen bajo, frecuencia media. No debe asustar a un trabajador en obra.
→Distinguible: sonido de éxito ≠ sonido de error ≠ sonido de alerta. El oído debe poder diferenciarlos sin mirar la pantalla.
→Opcional: siempre desactivable. Respetar prefers-reduced-motion también para audio.
07C — Design System Framework
QUÉ ES FIJO, QUÉ ES DE MARCA, QUÉ ES CONTEXTO
El mayor riesgo en la implementación de un design system es no saber qué puede cambiarse y qué no. Este framework — basado en el modelo Bencium Controlled UX — establece tres capas: lo que es universal e inamovible, lo que expresa la identidad de Extera, y lo que depende del contexto.
01 — FIJO
No se negocia
Escala de espaciado: 4·8·12·16·24·32·48·64·96px
Contraste mínimo WCAG AA: 4.5:1 texto · 3:1 UI
Touch targets mínimo: 44×44px
Jerarquía tipográfica: escala 1.25× (Major third)
Arquitectura de componentes: estados Default · Hover · Active · Focus · Disabled
Loading: skeleton para listas · spinner para acciones puntuales · nada para <500ms
Errores: inline bajo campo en formularios · toast para confirmaciones · banner para errores de sistema
Ejemplos visuales por capa
FIJO — Escala de espaciado (4px base, siempre múltiplos)
4
8
12
16
24
32
48
64
96
44px
touch min
FIJO — Escala tipográfica 1.25× (Major Third)
Aa49px · Display · font-weight 800
Aa39px · H1 · font-weight 800
Aa31px · H2 · font-weight 700
Aa25px · H3 · font-weight 600
Texto base de interfaz y comunicaciones16px · Body · font-weight 400
Texto secundario, etiquetas, descripciones13px · Small · font-weight 400
"Solo cuando habla una persona"DM Serif Display · solo voz humana
DOC-2026-0892 · VERIFICADO · 15/12/2026Courier Prime · datos, IDs, estados
CONTEXTO — Variantes de componente: el mismo botón, cuatro roles
Primaryacción principal
Secondaryacción alternativa
Destructiveacción irreversible
Ghostnavegación, acciones bajas
Disabledopacity 40%, no interactivo
CONTEXTO — Loading states según duración de operación
Operación <500ms
Sin indicador. La respuesta es inmediata.
Operación 500ms–2s
Spinner dentro del botón. No se deshabilita — muestra el estado.
Carga de lista >2s
Skeleton. El layout ya existe — solo falta el contenido.
Árbol de decisión para implementadores
Cuando un desarrollador o diseñador tenga dudas sobre si puede modificar algo, aplica este orden:
1.
¿Afecta a estructura, accesibilidad o UX universal?
Si sí → usa el sistema fijo, sin variación. Espaciado, contraste, touch targets.
2.
¿Expresa personalidad de marca o identidad del sistema?
Si sí → usa los valores de Extera definidos en este briefing. Color, tipografía, tono.
3.
¿Depende del contexto de uso, el módulo o el usuario?
Si sí → elige la variante apropiada (botón primary vs destructive, layout mobile vs desktop).
Ejemplo trabajado — botón "Validar documento"
01 FIJO
Altura mínima: 44px
Padding H: 20px
Estados: default · hover · active · focus · disabled
Motion: 150ms ease-out
02 MARCA
Fondo: #1A3A5C
Texto: #F5F3EE
Tipografía: DM Sans 600
Label: "VALIDAR" (uppercase, sin "haz click")
03 CONTEXTO
Variante: Primary (acción principal)
Loading: spinner si >500ms
Disabled si: documento no adjunto
En móvil: ancho completo
Resultado:default · disabled · loading
Checklist de validación antes de entregar
Elementos fijos
□ Espaciado en múltiplos de 4px
□ Contraste texto ≥ 4.5:1, UI ≥ 3:1
□ Touch targets ≥ 44×44px
□ Todos los estados de componente (hover, focus, disabled)
□ prefers-reduced-motion implementado
Elementos de marca
□ Colores de la paleta Extera, no improvisados
□ DM Sans (no Inter, no Arial, no sistema)
□ DM Serif solo en voz humana (citas, testimonios)
□ Estados documentales: color + icono + texto (nunca solo color)
□ Animaciones ease-out, sin bounce, duración ≤ 300ms
Design tokens · bloque exportable
Copiar este bloque al :root del producto. Los tokens de motion están definidos en la sección 07B. Los colores espectrales de módulo se incluyen aquí como referencia.
Los tokens de motion (--duration-*, --ease-*) están documentados en la sección 07B. No se duplican aquí para evitar divergencia. En implementación, deben ir en el mismo bloque :root.
Responsive · breakpoints y grid
El sistema define cuatro breakpoints. El producto se diseña mobile-first: las reglas se escriben para la pantalla más pequeña y se escalan con min-width.
Los gráficos son parte del lenguaje de Extera. El producto vive de datos: estados documentales, volúmenes de contratas, tasas de cumplimiento, tendencias temporales. Cada gráfico debe ser tan preciso como funcional — sin decoración que compita con el dato.
Principios fundamentales
El dato primero
Ningún elemento visual puede competir con el dato principal. Sin gradientes, sin efectos 3D, sin sombras decorativas en las barras.
Legible a 60px
Todo texto en un gráfico debe ser legible en pantallas de baja resolución. Tamaño mínimo: 10px DM Sans o Courier Prime.
Color con propósito
El color solo se usa para distinguir categorías o señalar estados. Nunca como decoración. Los colores del espectro tienen prioridad.
Eje Y desde cero (siempre)
Los gráficos de barra siempre empiezan en 0. Truncar el eje Y es engañar al usuario. Sin excepciones en Extera.
Tipos permitidos y su uso
Barra vertical
Comparación entre categorías
Barra horizontal
Rankings, listas largas
Línea temporal
Evolución en el tiempo
Donut / Circular
Proporciones de un todo
Paleta para visualización de datos
Los colores espectrales de módulo se reutilizan como categorías en gráficos multi-serie. El orden es siempre consistente: azul institución primero, después el espectro.
Primario
#1A3A5C
Alerta / Crítico
#C0392B
Access / Advertencia
#E8712A
Accent / Neutro
#C4933F
Source / OK
#1A7A4A
Comply / Contexto
#4B3A8A
Gráfico de barras — cumplimiento por producto
Comply 88%
Access 74%
Source 91%
Gráfico donut — distribución de estados documentales
Aprobado
52%
Pendiente
28%
Rechazado
12%
Expirado
8%
Rejillas sutiles
Las líneas de cuadrícula usan el color de grid del sistema (#E8E4DC / #333330 en dark). Opacidad 0.5. Nunca gruesas ni dominantes.
Tooltips siempre
Todo punto de dato interactivo debe tener tooltip con el valor exacto y la unidad. DM Sans 11px sobre fondo tinta #141413.
Tipografía en gráficos
Etiquetas de eje: Courier Prime 10px. Valores destacados: DM Sans 12px bold. Títulos de gráfico: DM Sans 13px 600.
No usar: gráficos de tarta
Los gráficos de tarta (pie chart) no están permitidos. Usar siempre donut con valor central, o sustituir por barras horizontales.
Design tokens para gráficos
Las variables CSS del sistema de color (--ink, --gold, --paper, --grid y los colores espectrales de módulo) son suficientes para construir cualquier componente de dataviz de Extera. No hay necesidad de una paleta paralela: el sistema ya cubre todos los estados semánticos.
08 — Tono & Voz
Cómo habla Extera
El tono es la personalidad en acción. Extera habla como un profesional que conoce este mundo a fondo: directo, sin condescendencia, sin jerga innecesaria. Resuelve, no complica.
✗ Nunca así
Mediante nuestra solución integral y modular usted podrá optimizar sus flujos de gestión documental...
¡Bienvenido al futuro de la coordinación empresarial!
Nuestros expertos le acompañarán en cada paso del proceso de transformación digital.
La documentación requerida para la habilitación de acceso no se encuentra en el sistema.
✓ Así
Tus contratas saben exactamente qué documentación necesitan antes de llegar a la puerta.
El trabajo puede esperar a los papeles, o los papeles pueden esperar al trabajo. Tú decides cuál prefieres.
Cuando el sistema funciona, nadie lo nota. Eso es exactamente lo que buscamos.
Falta el carnet de conducir. Súbelo aquí y el acceso se activa en minutos.
Principios de comunicación
Concreto antes que abstracto. "El acceso se activa en 5 minutos" es mejor que "proceso ágil de habilitación".
Empatía con el que carga el trabajo. Reconocer que gestionar documentación es pesado. Extera lo hace menos pesado.
Autoridad sin superioridad. Sabemos más de esto que nadie, pero no lo presumimos: lo demostramos.
Claridad en los errores. Cuando algo falla, decir exactamente qué, por qué y cómo resolverlo. Sin mensajes genéricos.
Positivo y habilitador. El foco está en lo que sí se puede hacer, no en lo que bloquea.
Adaptación por canal
El tono base es siempre el mismo — directo, habilitador, preciso — pero la intensidad y el registro se ajustan al canal. Esta tabla es la referencia para cualquier redactor.
"Entendido. El problema está en la validación del NIF. Lo corregimos y te avisamos."
Respuestas plantilla, "Lamentamos las molestias", "Quedo a su disposición"
Web marketing
Profesional
1 párrafo
"500 millones de trabajadores coordinados en 54 países. Sin papeles en la puerta."
Superlativos ("líder mundial"), buzzwords ("disruptivo"), promesas sin dato
LinkedIn
Cercano
3-5 líneas
"Un coordinador de obra nos dijo: antes tardaba 2 semanas en acreditar. Ahora, horas. Eso es lo que construimos."
Hashtag spam, emojis como viñetas, "¿Sabías que...?"
Doc. técnica
Formal
Extenso
"El endpoint /api/v2/documents acepta POST con body JSON. Respuesta 201 con el ID del documento creado."
Opiniones, metáforas, lenguaje comercial
→
Regla general: si al leer un texto no puedes distinguir si lo escribió Extera o cualquier otra empresa de software, reescríbelo. El tono Extera es reconocible por su especificidad — habla de documentos, accesos, contratas y plazos, no de "soluciones" y "sinergias".
08B — Sistema de Iconografía
PHOSPHOR BOLD: EL LENGUAJE VISUAL
La librería de iconos es Phosphor Bold. El peso y la geometría de trazo recto son coherentes con el logo hexagonal — sin redondeces decorativas, sin ambigüedad. Cada icono está mapeado a un concepto real del dominio de Extera: si un usuario de Extera Comply no lo identifica al instante, el icono no es el correcto.
EXTERAPhosphor Bold · @phosphor-icons/web@2.1.2
Core Comply — Gestión documental y coordinación
Documentos
Gestión y validación documental
Acreditaciones
Cumplimiento y compliance
Trabajadores
Alta, documentos, permisos
Contratas
Empresas y subcontratas
Requisitos
Reglas por centro / actividad
Homologación
Proveedores y evaluación
Accesos y control
Control de accesos
Entrada / salida, permisos
QR / NFC
Identificación móvil
Centros de trabajo
Ubicaciones y jerarquías
Marcajes
Presencia y horas
Integraciones y plataforma
Integraciones
APIs, SFTP, webhooks
Firma digital
Capacidad de firma en Comply
Notificaciones
Email, push, alertas
Analítica
KPIs y dashboards
Operaciones e IA
IA documental
OCR, clasificación, extracción
Asistente
RAG sobre políticas y estado
Incidencias
No conformidades, planes
Soporte
Colas, SLAs, resolución
Navegación y acciones de sistema
Inicio
Buscar
Ajustes
Perfil
Salir
Ayuda
Filtrar
Exportar
Subir
Eliminar
Editar
Crear
Aprobar
Rechazar
Sincronizar
Ver
Bloquear
Fecha
Próximo paso: iconos custom con corte hexagonal
Phosphor Bold cubre el 100% de las necesidades operativas del producto. Cuando llegue el momento de los iconos de módulo para navegación primaria o marketing — los 3 que representan cada producto (Comply, Access, Source) — merece diseñarlos con el corte a 60° del spine del logo. Eso crea un sistema propio reconocible que ninguna librería genérica puede replicar.
08C — Fotografía & Imagen Industrial
Cómo mostramos el mundo real
Extera opera en entornos industriales: plantas, obras, almacenes, refinerías. Las imágenes no son decorativas — son evidencia de que el sistema funciona donde importa. La fotografía de Extera tiene rigor técnico, no glamour. A continuación, los dos tipos de imagen que definen el sistema: qué usamos y qué evitamos.
✓ Uso correcto
01 / 06 · Uso correcto
Entorno real, tecnología en acción
Encargado de obra con chaleco reflectante de uso real, casco amarillo con el logo Extera visible, revisando documentación en tablet ruggedizada con clipboard en mano. Fondo con estructura metálica, grúa y maquinaria activa. Luz natural overcast, expresión concentrada — sin pose.
Contexto industrial realLogo en cascoTecnología en usoEPIs de trabajo real
→ siguiente
✓ Uso correcto
02 / 06 · Uso correcto
Punto de acceso en contexto real
Trabajador escaneando credencial en lector NFC de un acceso perimetral industrial. Casco amarillo con logo Extera, chaleco reflectante con uso visible, ropa de trabajo. Fondo con perímetro industrial, cabina de seguridad, grúas. Luz de amanecer — mezcla de sodio industrial y luz natural. Módulo: Extera Access.
Extera AccessLogo en cascoCredencial visibleLuz industrial real
→ siguiente
✗ Evitar
03 / 06 · Evitar
Stock foto genérica sin identidad de marca
Dos trabajadores con cascos impecables sin logo de marca, ropa sin señales de uso real. Podría pertenecer a cualquier empresa de construcción del mundo. No hay tecnología visible, no hay marca, no hay contexto que diferencie a Extera. Imagen de banco de imágenes sin personalidad.
Sin logo de marcaEPIs impolutosSin tecnologíaGenérica
→ siguiente
✗ Evitar
04 / 06 · Evitar
Fondo de estudio, pose y EPIs de catálogo
Ingeniería de estudio: fondo negro artificial, casco blanco impecable sin ningún uso visible, gafas de modelo, expresión corporativa mirando al horizonte con clipboard. Sin contexto industrial real, sin logo de marca, sin tecnología Extera. La imagen habla de un catálogo de EPIs, no de un sistema de coordinación de contratas.
Fondo artificialCasco sin logoSin contexto realPose de catálogo
→ siguiente
✗ Evitar
05 / 06 · Evitar
Sonrisa de catálogo y brazos cruzados
Casco naranja brillante recién salido de fábrica, camisa blanca impecable, sonrisa dirigida a cámara, brazos cruzados. Fondo negro de estudio. Es la imagen que podría acompañar cualquier eslogan genérico de "seguridad laboral". No hay acción, no hay contexto, no hay tecnología, no hay marca. El watermark de stock es un recordatorio adicional.
Sonrisa a cámaraFondo artificialCasco sin logoSin acción real
→ siguiente
✗ Evitar
06 / 06 · Evitar
El cliché definitivo: pulgar arriba, fondo blanco
Fondo blanco de corte, casco amarillo sin marca ni uso, gesto de "todo bien" directamente a cámara, sin ningún contexto de trabajo real. Es la imagen que ha representado "construcción" en presentaciones corporativas desde el año 2005. No hay acción, no hay herramienta, no hay tecnología, no hay contexto. El opuesto exacto de lo que comunica Extera.
Fondo blancoGesto de catálogoCasco sin logoSin contexto
← volver al inicio
Principios fundamentales
01
Contexto real, no escenificado
Entornos reales de trabajo: obras en construcción, plantas industriales, accesos controlados. Sin estudio ni fondos artificiales. La suciedad y el desgaste son parte del relato.
02
El logo siempre presente
El símbolo de Extera aparece en el casco como decal o sticker, adaptado a la curvatura y perspectiva real. Es el detalle que hace la imagen propiedad de la marca — y lo que diferencia una foto de Extera de cualquier stock genérico.
03
La tecnología sirve, no protagoniza
Las pantallas del sistema aparecen en contexto de uso: una tablet ruggedizada en obra, un lector NFC en el acceso. Secundarias al contexto y a la persona — nunca flotando en fondos vacíos.
✓ Casco siempre con logo Extera visible y adaptado a perspectiva
✓ EPIs con desgaste de uso real — no impolutos
✓ Luz natural o industrial, nunca de estudio
✓ Tablet, lector NFC, credencial o documento visible en uso
✓ Expresión concentrada en la tarea, no mirando a cámara
No usar
✗ Cascos sin el logo Extera — ninguna imagen sin marca
✗ Fondos de estudio: negro, blanco, degradado o chroma
✗ EPIs impolutos de catálogo, nunca usados
✗ Sonrisas directas a cámara o gestos tipo "pulgar arriba"
✗ Stock con watermarks visibles (Getty, Pngtree, Dreamstime…)
✗ Imágenes sin contexto de trabajo real ni tecnología visible
Ilustración vs fotografía
La ilustración en Extera se reserva para diagramas de arquitectura, flujos de proceso y la mascota del sistema. Para comunicación comercial y corporativa, la fotografía de entorno real con el logo en el casco tiene más credibilidad que cualquier ilustración. La única excepción son los diagramas técnicos de integración, donde la ilustración esquemática es la opción correcta.
Sistema de ilustración · decisión explícita
Extera no tiene un sistema de ilustración generalista. Esta es una decisión consciente, no una omisión. La marca se apoya en tres pilares visuales:
Fotografía industrial
Entornos reales, tecnología visible, personas trabajando. Credibilidad > estética.
Iconografía Phosphor Bold
Funcional, geométrica, coherente con el símbolo hexagonal. Para UI y documentación.
Mascota 8-bit
Solo en producto (loading, feedback, empty states). Nunca en comunicaciones corporativas.
Si en algún momento se necesita ilustración (infografías para whitepaper, diagramas de arquitectura complejos), el estilo debe ser: línea monocolor en var(--ink-muted), sin relleno, trazo de 1.5px, esquinas rectas — coherente con Phosphor Bold y la geometría del símbolo. Nada isométrico, nada flat, nada 3D.
09 — Manifiesto de Marca
POR QUÉ EXISTIMOS
"Cada obra que empieza. Cada planta que abre. Cada proyecto que arranca. Detrás hay alguien que ha pasado semanas gestionando papeles para que eso sea posible. Eso no debería ser así."
La burocracia documental no desaparecerá. Es el tejido normativo que hace posible que miles de trabajadores operen en entornos seguros. Pero no tiene por qué ser un obstáculo.
Extera no existe para eliminar el cumplimiento. Existe para que el cumplimiento no sea la razón por la que el trabajo no empieza, no avanza o no escala.
Somos la plataforma que convierte requisitos complejos en procesos claros. Que avisa antes de que algo venza. Que verifica en tiempo real. Que permite a una multinacional saber que sus 4.000 contratas están en orden, y a un autónomo saber exactamente qué necesita para entrar a trabajar mañana.
El orden que permite trabajar. Eso es Extera.
Ejemplo de uso del serif — voz humana en producto
"Llevo 8 años gestionando contratas en tres países. Por primera vez tengo todo en un solo sitio y no me llaman para saber si su documentación está en regla."
— Responsable de PRL · Sector energético · Cliente desde 2019
10 — Naming del Ecosistema
Cómo nombrar los productos
El portfolio heredado tenía seis productos con nombres de diferentes épocas, adquisiciones y lógicas comerciales. La renovación de marca no solo renombra — racionaliza. Pasamos de seis productos a tres, eliminando redundancias operativas y absorbiendo capacidades transversales como funcionalidades dentro del producto principal.
La arquitectura es Extera [Función], con tres productos que se corresponden con tres buyers distintos: compliance documental, control físico de accesos y cualificación de proveedores. eGestiona y Sercae se fusionan en un único producto — son variantes históricas de la misma plataforma, y la migración ya estaba en curso. eIntegra (portal de contratas) y eSignID (firma digital) se absorben como capacidades dentro del producto principal. El nombre "CAE" desaparece: es un acrónimo regulatorio español sin equivalente en los mercados donde Extera va a expandirse.
Tres productos, tres verbos imperativos de seis caracteres, tres buyers distintos. La simplificación reduce la carga comercial — una sola propuesta para el Director de PRL en lugar de cuatro — y convierte el cross-selling en un movimiento natural: añade Access o añade Source a tu cuenta Extera Comply.
10B — Renaming
Un nombre heredado que ya no nos representa
De dónde venimos
La empresa que existe hoy no es la que empezó con ese nombre. "Externalia" nació como plataforma CAE alrededor de eGestiona, con un modelo que se apoyaba en partners y servicios de prevención. Con el tiempo, y con la entrada de BSG como fondo, se incorporaron APSIS, Nexia, Control Documental y Clever/Sercae — cada una con su cultura, su sistema y su historia. El nombre nunca fue elegido para representar todo eso. Fue el nombre de partida que fue absorbiendo lo que llegaba después.
El resultado es una empresa de 200 personas, presencia en 54 países, certificaciones ISO 27001 y SLA 99,9% — pero con un nombre que ninguno de los equipos que llegaron por adquisición sintió nunca del todo propio. Los de Valencia y los de Vitoria siguieron siendo mundos distintos también en esto. El nombre era el recipiente, no la identidad.
Lo que eso generó hacia fuera y hacia dentro
Con el paso del tiempo, ese nombre acumuló capas de percepción que hoy trabajan en contra del posicionamiento que la empresa quiere construir. La señal más directa llegó de Marta de la Villa, CRO interina: en el mercado, el nombre genera fricción antes de que la conversación comercial pueda arrancar. No es un problema de posicionamiento futuro. Es un problema de conversión presente.
Semántica de servicios, no de producto. La terminación -ia (consultoría, farmacia, academia, auditoría) sitúa la percepción en el territorio de los servicios a medida. El nombre seguía diciendo "proveedor" cuando la empresa lleva años construyendo "plataforma".
Fricción en mercados internacionales. 10 caracteres, 5 sílabas, pronunciación inconsistente en inglés, francés, alemán y árabe. Una plataforma presente en 54 países no puede depender de que cada interlocutor aprenda a decir su nombre correctamente.
Coste comercial en demos competitivas. Frente a Dokify, Zima o Twin, llegar con cinco nombres de producto y un nombre paraguas percibido como de consultoría erosionaba la credibilidad antes de que el demo empezara.
Deuda cultural interna no resuelta. Los equipos procedentes de APSIS, Clever/Sercae, Nexia y Control Documental nunca terminaron de sentir el nombre como propio. Un nombre que los empleados no sienten suyo no puede generar cultura de marca, y sin cultura de marca no hay narrativa compartida hacia el exterior.
Un nombre de marca no puede trabajar en contra de la empresa que lo lleva. Cuando acumula percepciones negativas tanto interna como externamente, cambiarlo no es una decisión estética — es una decisión estratégica. Y el momento de transformación que vive la compañía es exactamente cuando ese cambio tiene sentido: no antes, cuando nadie lo vería llegar; no después, cuando ya estaría instalado en la siguiente capa de deuda.
Por qué Extera es la propuesta correcta
El proceso de evaluación partió de tres candidatos propuestos — external, external.is, externum — y generó tres alternativas adicionales: Extral, Nextern y Extera. Cada opción se cruzó con siete criterios: pronunciabilidad internacional, memorabilidad, coherencia con posicionamiento B2B SaaS de referencia, diferenciación frente a competencia, adecuación al sistema de marca existente, viabilidad de dominio y marca registrada, y riesgo de confusión semántica.
Externalia
Nombre de partida · 2006
→
Propuesta 2026 · Pendiente validación
Extera
Extera es el resultado. Viene del latín exterus — externo, de afuera — el concepto nuclear del negocio CAE. Hereda el ADN fonético del nombre anterior: la sílaba inicial Ex- activa la memoria existente en clientes y equipos, haciendo la transición reconocible. Y resuelve todos los problemas identificados: 6 caracteres, 3 sílabas, pronunciable en cualquier idioma, peso de plataforma consolidada y sistema de marca intacto.
Raíz latina, lectura universal. Viene de exterus (externo, de afuera). Legible sin traducción para hispanohablantes, italianos, franceses, portugueses y rumanos — los mercados donde la empresa tiene mayor penetración son precisamente los que comparten lenguas latinas.
Terminación -era: plataforma, no servicio. Evita directamente la trampa semántica de -ia. En contexto tech, -era convoca era digital, plataforma de referencia, período de evolución. Precedentes en el registro: Optera, Lumera, Sphera.
Transición interna con continuidad. La proximidad fonética facilita la migración: los clientes actuales reconocen el nombre antes de que se los expliques. Los equipos tienen un punto de anclaje familiar desde el primer día.
El símbolo no cambia. La E hexagonal permanece intacta — misma geometría, misma historia de seis piezas ensambladas, mismo espectro de colores por módulo. El nombre evoluciona; el símbolo gana al desvincularse de las connotaciones acumuladas.
Arquitectura de producto más limpia. Extera Comply, Extera Access, Extera Source — tres verbos imperativos de seis caracteres, sistema limpio y memorable que con el nombre anterior no era posible articular.
Adjetivo genérico, no nombre propio. Dominio inaccesible.
external.is
★★
★
★★★
★★
★★★
Tendencia startup 2015-2018. Incongruente con ISO 27001 + SLA 99,9%.
externum
★★★★
★★★★
★★★★
★★★★★
★★★
Autoridad y atemporalidad. Puede sonar médico en mercados anglosajones.
Extral
★★★★
★★★
★★★
★★★★
★★★★
Corto y pronunciable. Riesgo de confusión con 'extra' en algunos mercados.
Nextern
★★★★
★★★★
★★★★★
★★★
★★★★
Alta diferenciación. Pierde la continuidad fonética con el nombre anterior.
Extera
★ Seleccionado
★★★★★
★★★★
★★★★
★★★★★
★★★★
Hereda ADN fonético. Pronunciable en todos los idiomas. Sistema de marca intacto.
Criterios evaluados: Pronunciabilidad internacional · Memorabilidad · Coherencia B2B SaaS · Diferenciación frente a competencia · Adecuación al sistema de marca (E hexagonal + espectro) · Viabilidad de dominio y marca registrada · Riesgo de confusión semántica. Pendiente de verificación: disponibilidad extera.es · búsqueda EUIPO/USPTO · test de pronunciación con hablantes no hispanohablantes.
El nombre es una decisión pendiente de validación final con Jaime y Pablo, verificación de dominio y búsqueda de marca registrada. Lo que este briefing documenta es el razonamiento: de dónde viene el problema, por qué el momento es ahora, y por qué Extera es la opción que mejor sirve a la empresa que esta compañía ha decidido ser.
El siguiente paso del naming · Racionalización del portfolio
Renombrar la empresa era la mitad del trabajo. La otra mitad era auditar el portfolio: seis productos heredados de seis adquisiciones distintas, con solapamientos funcionales, nombres internos no internacionales y una arquitectura de submarca que el equipo comercial no lograba comunicar en una demo. Tras análisis con Jaime (CTPO), la conclusión fue que el portfolio óptimo son tres productos, no seis.
eGestiona y Sercae se fusionan. Son la misma plataforma de control documental con dos historias de adquisición — eGestiona como core original, Sercae como la versión que llegó con Clever y su penetración en Latam. La migración de clientes Sercae a eGestiona ya estaba en curso antes del rebrand. Mantener dos productos separados era un artefacto organizativo, no una realidad funcional.
eIntegra y eSignID dejan de ser productos para convertirse en capacidades. El portal de contratas (eIntegra) es la cara externa del producto principal, no un producto aparte — igual que el portal de proveedores de Ariba no se vende como software separado. La firma electrónica (eSignID) es un paso dentro del workflow documental, no un destino. Ambas funcionalidades se conservan íntegras; lo que cambia es cómo se nombran y cómo se venden.
"CAE" desaparece como nombre de producto. Es un acrónimo regulatorio español ("Coordinación de Actividades Empresariales") sin equivalente directo en inglés, francés, alemán o árabe. Nombrar a tu producto con un acrónimo que tus clientes potenciales de UK, US o MENA no pueden descifrar es encapsular la marca en el mercado de origen. "CAE" se conserva como descriptor del dominio funcional ("plataforma de coordinación de empresas externas"), nunca como nombre.
Patrón de naming: tres verbos imperativos de seis caracteres. Comply, Access, Source. Un sistema de una precisión rara: misma longitud, misma categoría gramatical, misma pronunciabilidad en los seis idiomas objetivo. En una sola frase: Comply with regulations. Access your sites. Source your suppliers.
La prueba de que el naming funciona es que un director de PRL en CEMEX, un facility manager en EDP y un director de compras en Acciona pueden oír los tres nombres por primera vez y saber cuál les corresponde. Eso no pasaba con eGestiona, eNac, eIntegra, QSuitePro, Sercae y eSignID — donde el primer trabajo del comercial era explicar qué hacía cada uno.
Las alternativas evaluadas y descartadas — documentadas aquí para trazabilidad de la decisión:
Extera Contractor (10 caracteres, 3 sílabas): describe al sujeto, no a la acción. Demasiado largo. Descartado.
Extera Workforce: suena a HR software (Workday, ADP). Confunde el posicionamiento — Extera gestiona contratas externas, no plantilla interna. Descartado.
Extera Operations (10 caracteres): genérico. Cualquier SaaS es "de operaciones". Descartado.
Extera Verify: candidato sólido con buena semántica (validación documental). Superado por Comply porque el buyer no compra "verificación" — compra "cumplimiento". Guardado como plan B si hay conflicto legal con ComplyWorks.
Extera Procurement (11 caracteres, 4 sílabas): nombre más largo del sistema. No funciona en Latam ("compras") ni en Francia ("achats"). Sustituido por Source.
Extera Supply: alternativa a Source. Más genérico (connota cadena de suministro completa). Source es más preciso para la función de cualificación y selección de proveedores.
11 — Aplicaciones Prioritarias
Dónde se ve primero la nueva marca
No todo puede cambiar a la vez. Propuesta de implementación por impacto y visibilidad:
Prioridad 1
EXTERA
LOGO · FAVICON · APP ICON · LOGIN
Prioridad 2
DASHBOARD PRINCIPAL
Prioridad 3
LISTADO DOCUMENTAL
Prioridad 4
EXTERA
notificaciones@externalia.com
EMAIL · NOTIFICACIONES
Aplicaciones en entorno real
Co-branding · partners
El sistema de marca debe funcionar en tres modos: Extera en solitario, Extera con módulo de producto, y Extera junto a un partner. En el tercer caso, la E siempre lidera — el logo del partner aparece como complemento, nunca al mismo nivel. El co-branding sin esta jerarquía reproduce el problema del canal histórico: Extera sin aparecer en la foto.
Materiales comerciales · desbloqueador de ventas
El equipo comercial lleva meses levantando oportunidades sin material con el que cerrarlas. La nueva identidad tiene que aterrizarse primero aquí — antes incluso que en el producto. Un deck de empresa, un one-pager por módulo y un template de propuesta son el primer ROI visible del rebranding.
Deck de empresa
EXTERA
DECK · B · SOBRE OSCURO
One-pager módulo
EXTERA COMPLY
ONE-PAGER · A · COLOR
Template propuesta
PROPUESTA · D · UNA TINTA
11B — Badges de Producto · Sistema Espectral
EL ESPECTRO DEL ECOSISTEMA
La luz blanca contiene el espectro completo. La E de Extera es blanca porque es la marca paraguas — contiene todos los productos. Cada módulo hereda un color del espectro y lo expresa a través del complemento hexagonal. El portfolio activo son tres productos (Comply, Access, Source) — el resto del espectro queda reservado para crecimiento futuro. Explora las tres variantes del sistema.
BLANCO·ACCESS·SOURCE·COMPLY···
EXTERA
La E blanca sola. Sin complemento. Contiene el espectro completo.
#F5F3EE · sin complemento
EXTERA· · ·
Rojo · liberado como estado puro "CRÍTICO" del sistema documental. Ya no se asigna a producto para evitar disonancia semántica entre "el producto" y "su peor estado".
#C0392B · reservado
EXTERAACCESS
Naranja · señalética universal de acceso. Conos, barreras, puertas, control físico de presencia. Diferenciado en un sector donde los referentes usan azul o rojo.
#E8712A
EXTERA· · ·
Dorado · liberado como accent de marca puro. Tras absorber Connect, el dorado deja de ser color de producto y queda como color secundario corporativo — CTAs, highlights, detalles.
#C4933F · accent de marca
EXTERASOURCE
Verde · proveedor aprobado, luz verde. El mismo verde del estado VÁLIDO en el sistema documental — la metáfora funciona: en procurement, el resultado final es "aprobado" o "rechazado".
#1A7A4A · mismo verde que el estado VÁLIDO
EXTERA· · ·
Azul · reservado para futuros productos del ecosistema. No se asigna ahora para evitar colisión con el azul institución de marca (#1A3A5C).
#1A5FA0 · reservado
EXTERACOMPLY
Índigo · autoridad, formalidad, regulación. El registro emocional de compliance internacional enterprise. Territorio donde se posicionan los referentes modernos del sector (Hyperproof, LogicGate, Riskonnect).
#4B3A8A
EXTERA· · ·
Violeta · reservado para futuros productos del ecosistema.
#7B1FA2 · reservado
La regla del sistema: la E siempre en blanco papel. El complemento hexagonal en el color del módulo. El nombre del módulo en ese mismo color. El color nunca entra en la E — la E es neutra, universal, de todos.
11C — Espectro de Color · Referencia Rápida
TODO EL SISTEMA EN UNA VISTA
Esta página es la referencia de uso diario para equipos de producto, diseño y desarrollo. Todos los colores semánticos del sistema en un solo lugar: estados documentales, escala de confianza IA y paleta de marca.
Estados documentales
VÁLIDO
#1A7A4A · #EDF7F2
VERIFICADO
PENDIENTE
#8B5000 · #FFF8EC
EN REVISIÓN
AVISO
#A04A0E · #FFF3EB
VENCE EN 15 DÍAS
CRÍTICO
#C0392B · #FDF1F0
CADUCADO
EN PROCESO
#2E5F8A · #EEF4FA
PROCESANDO
RECHAZADO
#141413 · #F0EFEE
NO VÁLIDO
EXENTO
#626262 · #F5F5F5
NO APLICA
SIN ENVIAR
Borde discontinuo = acción usuario
PENDIENTE DE ENVÍO
Escala de confianza IA
ALTA CONFIANZA → AUTOMÁTICONO DETERMINABLE → MANUAL
NIVEL 1
Alta confianza
>90%
AUTO
NIVEL 2
Confianza buena
75–90%
SUGERIDO
NIVEL 3
Confianza media
50–75%
REVISAR
NIVEL 4
Confianza baja
25–50%
ESCALAR
NIVEL 5
No determinable
<25%
MANUAL
Paleta de marca
#141413
#1A3A5C
#2E5F8A
#3B7CB5
#C4933F
#E8C47A
#EDE9E1
#F5F3EE
#C0392B
✓
Todos los colores de texto verificados · WCAG AA
Los colores de texto en estados documentales y escala IA cumplen ratio mínimo 4.5:1 sobre sus fondos respectivos. La barra de progreso IA nivel 3 (#C4933F) es un elemento gráfico semántico — documentado como excepción de marca, no como texto.
Colores espectrales · asignación de producto
Tres productos activos, cuatro posiciones reservadas. El portfolio simplificado libera el rojo como estado puro "CRÍTICO" y el dorado como accent de marca. Azul y violeta se guardan para crecimiento futuro.
RESERVADO
estado CRÍTICO
#C0392B
ACTIVO
Extera Access
#E8712A
RESERVADO
accent de marca
#C4933F
ACTIVO
Extera Source
#1A7A4A
RESERVADO
futuro
#1A5FA0
ACTIVO
Extera Comply
#4B3A8A
RESERVADO
futuro
#7B1FA2
Orden físico del espectro visible (longitud de onda creciente). Los tres productos activos se distribuyen en posiciones no adyacentes para garantizar máxima diferenciación visual a cualquier tamaño.
11D — Mascota del Sistema
LA ABEJITA el alma del panal
Un sistema de marca con la solidez institucional de Extera necesita un contrapunto. Algo que humanice la experiencia, que dé feedback con personalidad, que haga que el sistema hable en un tono distinto al del isotipo. La abejita es ese contrapunto.
No es decoración. Es coherencia. Si el hexágono es la colmena y el oro es la miel, la abeja es la trabajadora que lo hace posible — la contrata, el coordinador, el autónomo. La mascota personifica al usuario del sistema en lenguaje visual. Y el estilo 8-bit no es nostalgia gratuita: es el guiño que equilibra la imagen institucional de la marca, el mismo movimiento que hace GitHub con su octopus o Linear con sus animaciones de carga.
La abejita aparece solo en momentos de feedback del sistema — nunca en comunicaciones corporativas, nunca en el producto principal, nunca compitiendo con el isotipo. Su espacio es el micro-momento: la carga, el éxito, el error, el procesamiento de IA.
Estados del sistema — interactivo
Sobre claro · 128px
esperando acción · · ·
Sobre oscuro · 128px
64px
32px
Dónde sí
Estados de carga dentro del producto — validación documental, procesamiento de documentos, sincronización con ERP.
Feedback positivo y negativo en flujos críticos — aprobación o rechazo de acreditación, timeout de sesión.
Estados vacíos (empty states) — cuando no hay documentos, cuando una cola está limpia.
Pantalla de procesamiento de IA — mientras el sistema valida automáticamente un documento.
Notificaciones push y toasts de sistema — con animación breve al aparecer.
Dónde no
Nunca en comunicaciones corporativas — emails, propuestas, contratos, presentaciones de venta.
Nunca en el mismo espacio visual que el isotipo — uno u otro, jamás juntos.
Nunca en flujos de Extera Access — el control de acceso físico es un contexto de seguridad real.
Nunca estática sin animación — la abejita vive en movimiento. Si no puede animar, no aparece.
Nunca redimensionada por debajo de 32px — por debajo pierde legibilidad y carácter.
Estados y su significado
IDLE
Aleteo lento, bob suave, parpadeo. El sistema está listo y esperando.
CARGANDO
Aleteo rápido, balanceo lateral. El sistema está trabajando — no interrumpir.
ÉXITO
Sube rápido, aleteo acelerado, marca verde. Acción completada correctamente.
ERROR
Temblor puntual, signo de exclamación rojo. Requiere atención del usuario.
IA
Movimiento pausado, puntos dorados. La IA está evaluando — puede tardar.
11E — Kit Corporativo de Plantillas
Los materiales que el equipo necesita
El Brand Book sin kit de plantillas es un documento que nadie puede usar. Cada tarjeta muestra la estructura del documento — haz clic para ver el preview ampliado.
VentasPrioridad 1 · Urgente
Ver preview →
Deck de empresa
12–16 slides. Quiénes somos, portfolio, casos de éxito.
Urgente
Ver preview →
One-pager por módulo
1 página A4 por módulo. Problema · Solución · Impacto.
Variante para el módulo de gestión de proveedores.
Urgente
Ver preview →
Ficha de producto (módulo)
2 páginas. 3 fichas: Comply · Access · Source.
Urgente
Ver preview →
Oferta comercial estándar
Propuesta modular con pricing. Editable.
Urgente
Primer entregable: el trío comercial
Deck + one-pager por módulo + template de propuesta desbloquean al equipo comercial de inmediato. El resto puede ir en paralelo. Coordinación con Marta de la Villa y Alejandro Pizarro — son quienes saben exactamente qué les falta para cerrar.
Extera Access gestiona accesos físicos reales: tornos, lectores NFC, pantallas de verificación en obra. El logo aparece en hardware que opera a diario en condiciones industriales. Estas son las reglas para esos contextos.
Pantalla de acceso
EXTERA
● ACCESO AUTORIZADO
NFC · 09:14:32 · Técnicos Reunidos
Lockup horizontal a 32px mínimo. Estado de acceso con color + icono + texto. El logo siempre arriba-izquierda.
Cartel en obra
EXTERA ACCESS
Punto de control
Acredite documentación antes de acceder
Versión A·Color sobre fondo claro. Tamaño mínimo del cartel: A4 (210×297mm). Logo a 22mm mínimo.
Casco y EPIs
EXTERA
Solo símbolo + wordmark en versión B·Sobre oscuro. Tamaño del símbolo: 15mm mínimo. Impresión en vinilo reflectante.
✓ Reglas físicas
→ Pantallas de acceso: fondo oscuro, logo blanco, estado con color semántico
→ Carteles: versión A sobre fondo papel, tamaño mínimo A4
→ EPIs: vinilo reflectante, símbolo ≥ 15mm, siempre centrado
→ Resistencia: materiales para exterior, UV-estable, resistente a agua
✗ Evitar
× Logo impreso directamente sobre metal sin fondo (legibilidad variable)
× Usar versión C·Sobre color en señalética (confunde con señales de seguridad)
× Combinar el logo Extera con logos de cliente en el casco
× Pantallas con resolución < 320×240 — usar solo símbolo sin wordmark
→
Para hardware de terceros integrado con Extera Access (lectores Dorlet, terminales de fichaje), aplicar las reglas de co-branding de la sección 05F. El logo Extera siempre visible en la pantalla de bienvenida del dispositivo, aunque el hardware sea de otro fabricante.
12 — Próximos Pasos
Cómo avanzar sin paralizarse
Un rebranding completo no se hace de golpe. Se hace por fases, con puntos de validación y con foco en los puntos de mayor visibilidad e impacto primero.
01
Validar posicionamiento en sesión
Sesión de trabajo con Jaime y Pablo para decidir sobre el tagline, la dirección del hexágono como símbolo y la arquitectura de naming. No es una presentación — es una decisión. Con Saray y equipo de producto en paralelo para validar la lectura del portfolio. 1-2 horas.
02
Trasladar a Notion como sistema vivo
Cada sección (posicionamiento, logo, paleta, versiones canónicas, reglas de uso) vive como una página referenciable desde diseño, producto y comunicación. Cuando algo cambia, se actualiza aquí.
03
Piloto en un punto de contacto
Antes de cambiar todo, aplicar la nueva identidad en un punto: la pantalla de login de Extera Comply o las notificaciones de email. Valida coherencia y genera tracción interna.
04
Design token system
Traducir la paleta y tipografía a tokens de diseño que entren en el producto. Desde el primer día, la nueva marca vive en variables CSS, no en pantallazos de Figma.
05
Unificar naming del ecosistema
Decidir la arquitectura de naming (Extera [Función]) y actualizar comunicaciones, web, contratos y soporte. No tiene que ser simultáneo: hay una transición.
06
Guía de marca viva
Un documento/portal interno (no un PDF estático) con reglas, ejemplos y recursos descargables. Que cualquier persona en la empresa sepa cómo usar la marca correctamente.
07
Kit comercial en nueva identidad
Deck de empresa, one-pager por módulo y template de propuesta en el nuevo sistema de marca. El equipo comercial está levantando oportunidades sin material con el que cerrarlas — este es el primer ROI visible del rebranding. Coordinado con Marta de la Villa y el área comercial.
13 — Gobernanza de Marca
QUIÉN DECIDE Y CÓMO
La marca es un sistema vivo, no un PDF. Para que funcione necesita un responsable, un proceso y un lugar donde vivir. Esta sección establece las reglas del juego.
Guardián de marca
Departamento de Product Design
Aprueba cualquier material nuevo que use la marca: presentaciones, web, producto, materiales de partner. Decide interpretaciones ambiguas del brand book. Autoriza excepciones.
Decisor final
Dirección General
Cambios estructurales que afectan a la identidad: nueva versión del símbolo, nuevo color de producto, nuevo módulo en el ecosistema, cambios en naming. No para operativa diaria.
Proceso de aprobación
01
Solicitar
Describe qué necesitas y para qué. Email o Slack al guardián de marca.
02
Revisar
El guardián revisa contra el brand book. Si cumple, aprueba. Si no, indica qué corregir.
03
Producir
Usa los assets del repositorio de marca. No recrees el logo desde cero. No improvises colores.
04
Validar
Antes de publicar: checklist de 07C. Si es material externo, revisión final obligatoria.
Material interno
24h
Presentaciones, emails, docs
Material externo
48h
Propuestas, web, social, partner
Cambio estructural
1 semana
Nuevo módulo, color, naming
Dónde viven los assets
Brand Book
Notion (versión navegable) + HTML interactivo (versión de presentación). Es la fuente de verdad de reglas y narrativa.
Design System
Figma (componentes) + repositorio Git (tokens JSON → CSS). Fuente de verdad de implementación.
Por fecha: v7.0 (abril 2026), v8.0... Cambio mayor = número entero. Correcciones = decimal (v7.1). Cada versión reemplaza la anterior.
Design System
Semver: PATCH = fix visual. MINOR = nuevo componente. MAJOR = breaking change (token renombrado, componente rediseñado).
→
Contacto de marca: Pablo Ledo · Product Design · pablo.ledo@extera.es — Para dudas de aplicación, solicitud de assets, excepciones o propuestas de evolución del sistema.
