Portafolio / Marca y sitio institucional
Un contrato entre Estados no tiene precio de mercado.
Cuando dos gobiernos contratan directamente no hay licitación que discipline el precio: hay una fórmula, un diferencial y un funcionario que tendrá que explicarlos ante el auditor y ante el parlamento. G2G Deal Design es la práctica de powerabode DMCC que diseña esa arquitectura comercial del lado del que compra. El encargo fue traducir un servicio de altísima confianza —procurement soberano, PPP, defensa, minerales críticos— en un sitio que se entienda en el primer viewport y aguante la lectura de un experto en el décimo; construirlo sin framework para que corriera en hosting compartido con PHP y Apache; y sostener en cada decisión técnica la misma promesa que vende la práctica: que todo lo que se afirma se pueda rastrear.
01El encargo
Explicar un servicio que se compra una vez.
El visitante de este sitio no está comparando proveedores. Es un ministerio, una empresa estatal o un equipo de compras públicas que va a firmar algo con consecuencias de veinticinco años, y lo que necesita saber primero es de qué lado está el que le habla. Un sitio de agencia normal —beneficios, casos, logotipos de clientes— no solo no sirve aquí: resta.
El encargo tenía dos exigencias que tiran en direcciones opuestas. El primer viewport tiene que ser legible para alguien que nunca oyó la expresión «resource-for-infrastructure», y el resto de la página tiene que aguantar a un negociador que sí sabe qué es una pendiente indexada a crudo. La respuesta fue estructural: una portada que ordena el argumento por capas —dónde aplica, qué se entrega, cómo se negocia, quiénes son— y rutas propias para quien ya sabe qué busca.
La segunda exigencia era de encuadre. G2G Deal Design no es una empresa suelta: es una práctica dentro de powerabode DMCC, con estándar de marca propio del grupo. El sitio tenía que leerse como institución sin disfrazarse de banco, y separar con claridad qué es la práctica, qué es la matriz y qué es cada una frente al lector.
Lo que tenía que resolver
- 01Hacer legible un servicio sin precio público
- 02Sostener la neutralidad en cada afirmación
- 03Dar profundidad sin espantar al recién llegado
- 04Separar la práctica de su empresa matriz
- 05Publicar sin cifras de cliente ni testimonios
- 06Recibir consultas confidenciales sin base de datos
- 07Correr sobre PHP y Apache en hosting compartido
- 08Quedar legible para buscadores y para modelos
Nuestro rol
Estrategia de contenido, sistema de marca y brand book, arquitectura de información, diseño y desarrollo del sitio completo, sistema de artículos, endpoint de contacto y sus controles antiabuso, analítica con consentimiento, datos estructurados y el despliegue automatizado sobre Apache.
02Dónde aplica
Tres arenas. Una disciplina.
Los Estados contratan Estado a Estado justo lo que una licitación abierta no puede asegurarles. Cambia lo que está en juego; no cambia el método. La portada se ordenó alrededor de esas tres arenas porque es la primera pregunta que se hace quien llega: «¿esto aplica a lo mío?».
Combustibles, GNL y transición.
Crudo, carbón y GNL para la red y para las fuerzas, y cada vez más los materiales de la transición: litio, cobre, cobalto. A menudo estructurados como acuerdos respaldados en recursos, donde se cambia infraestructura o financiación por acceso al suministro.
Y ahora, la infraestructura de la inteligencia.
Carreteras, puertos, redes eléctricas y centros de datos de IA. Llegan como estructuras complejas —deuda o capital, sanciones y seguridad entretejidas— y con condiciones atadas a la construcción y a la operación. El diseño decide si esas condiciones sirven al Estado o lo atan.
El canal G2G más antiguo.
Equipos, entrenamiento y soporte logístico contratados de gobierno a gobierno, el modelo del programa estadounidense de Foreign Military Sales —que el sitio cifra en 117.900 millones de dólares en un solo año reciente—. Se elige por seguridad de suministro, y necesita el mismo precio referenciado y la misma gobernanza auditable.
03La regla
Lo que decidió cada párrafo.
Una cifra sin fuente no es evidencia.
La práctica vende una cosa concreta: que el precio de un contrato sin competencia se pueda reconstruir desde un índice público y defender ante el auditor. Un sitio que vendiera eso con superlativos se desmentiría solo. Así que la regla de escritura fue la del propio servicio — cada afirmación con su referencia, cada cifra con su origen, y ninguna frase que no resista que alguien pregunte «¿de dónde sale?».
Eso ordenó decisiones que parecen de estilo y no lo son: los artículos llevan sección de referencias visible; los logotipos de la nube de experiencia van con una nota que dice explícitamente que no son clientes; la portada no tiene testimonios ni contadores; y donde no hubo dato verificado, no se publicó nada. Es más lento de escribir y es la única versión que se sostiene en una mesa donde todos son abogados.
AfirmarReferenciarAuditar
04Identidad
Una marca que tiene que caber en un sello.
El isotipo antes que el nombre
«G2G» es la abreviatura que el sector ya usa, y el cuadrado la convierte en marca: dos G blancas sobre navy con el 2 en teal cruzándolas por el centro. Funciona sin el wordmark porque en la mitad de los sitios donde vive —favicon, avatar, sello de firma de un PDF— no hay espacio para nada más.
La cola es del grupo
«DRIVEN BY ENERGY» en teal y con tracking abierto no es un tagline de esta práctica: es la firma de powerabode, y por eso el estándar del grupo prohíbe reescribirla como texto o encogerla por debajo de su mínimo. Antes de reducirla, se omite.
El mínimo, escrito
El brand book fija el área de seguridad en la altura de la «G» del isotipo por todo el perímetro, y dos mínimos: 120 px o 25 mm de ancho para el lockup completo, 32 px u 8 mm para el símbolo solo. Un sello que no se puede medir se acaba usando mal.
Sobre qué fondos vive
Usar el símbolo solo cuando el espacio manda
Favicon, avatar y sello de documento van con el isotipo aislado. Su trabajo ahí es señalizar, no nombrar, y el wordmark a ese tamaño solo añade ruido.
Cambiar a la versión de fondo claro sobre color
El isotipo es un cuadrado navy: sobre navy o sobre teal desaparece. Sobre cualquier fondo saturado va la versión de teselado claro, con las letras en navy.
Deformar, rotar o añadir efectos
Las cuatro prohibiciones del brand book son las mismas cuatro de siempre porque son las cuatro que ocurren: estirar el lockup para llenar una caja, girarlo, ponerle sombra y recolorearlo.
Ponerla sobre un fondo de bajo contraste
La cola letterspaced es la parte más fina del dibujo y es lo primero que se pierde. Sobre foto o sobre trama va el isotipo, o el lockup dentro de una caja plana.
05Sistema visual
Azul de ministerio, teal de revisión.
Titulares, bandas oscuras y el cuadrado del isotipo
- HEX
- #1B3764
- RGB
- 27 · 55 · 100
Etiquetas de sección, enlaces y acentos escritos
- HEX
- #217C74
- RGB
- 33 · 124 · 116
El 2 del isotipo y los elementos dibujados del brand book
- HEX
- #46B5AA
- RGB
- 70 · 181 · 170
- CMYK
- 61 · 0 · 6 · 29
Cuerpo de texto y navegación en reposo
- HEX
- #4B5C72
- RGB
- 75 · 92 · 114
Bandas alternas y tarjetas
- HEX
- #F5F8FB
- RGB
- 245 · 248 · 251
Divisores, bordes de campo y hairlines
- HEX
- #E3EAF2
- RGB
- 227 · 234 · 242
Anillo de foco visible, y solo eso
- HEX
- #F2C14E
- RGB
- 242 · 193 · 78
06Tipografía
Geométrica de titular, neutra de lectura.
Space Grotesk
Arquitectura del acuerdo
500 Medium · 700 Bold
Inter
Un precio G2G nunca es una cifra fija: es una fórmula.
400 · 500 · 600 · 700
Comfortaa
powerabode
400 · 500
Arquitectura del acuerdo
32 / 38 pt · Bold, interlineado 1,2×Gobernanza sin competencia
20 / 26 ptPrecio, riesgo y ejecución
14 / 18 ptUn precio G2G nunca es una cifra fija: es una fórmula.
11 / 17 pt · interlineado 1,5–1,6×PALETA DE COLOR
Caja alta en teal · tracking +0,02–0,03 empowerabode
Comfortaa en minúscula, una talla mayor que su entorno07Voz y tono
Nunca vende. Argumenta.
Autoritativa
Afirma con evidencia, nunca con adjetivos. Cada frase tiene que resistir el escrutinio de un auditor, porque un auditor la va a leer.
Neutral
No toma partido comercial. El lenguaje refleja la independencia que ofrece el servicio: si el texto empieza a sonar a vendedor, el servicio deja de ser creíble.
Directa
Frases cortas, verbos activos. Ningún párrafo esconde una cifra o una condición al final de una subordinada.
Sí
Cada precio se referencia a un índice público y puede ser trazado por el auditor.
No
¡Ofrecemos las mejores soluciones energéticas del mercado!
Sí
Los nombres mostrados identifican entornos profesionales previos de miembros del equipo.
No
Entre nuestros clientes están las mayores petroleras del mundo.
Sí
Un precio G2G nunca es una cifra fija: es una fórmula, un diferencial, una pendiente.
No
Conseguimos siempre el mejor precio posible para nuestros clientes.
08El documento
Catorce láminas y una sola regla por lámina.
El brand book es el documento donde la marca queda fijada: manifiesto, sistema de logotipo, área de seguridad, color, tipografía, imagen, voz y las aplicaciones —tarjeta, hoja membretada y firma de correo—. Está completo aquí, servido tal como se entregó: abre cualquier lámina para verla a tamaño real.
09Arquitectura
Cuatro entradas al mismo argumento.
La primera versión era una sola página. El sitio de hoy tiene veinte URLs canónicas y cuatro puertas, porque los cuatro lectores que llegan no llegan por lo mismo: el que investiga PPP, el que busca una respuesta concreta, el que quiere saber quién firma y el que ya decidió escribir.
Un mega menú que agrupa por intención.
Tres grupos —definir el mandato, navegar la evidencia, conocer la práctica— en un menú accesible construido sobre `details`, con estado `aria-expanded`, cierre con Escape y devolución del foco. En móvil el mismo contenido cae en un cajón con bloqueo de scroll.
El pilar que sostiene su propio cúmulo.
Modelos, compromisos del Estado, reparto de riesgos, renegociación y un centro de anuncios con programas y cierres financieros enlazados a su fuente. Es la ruta que más tráfico de intención concentra y la que enlaza hacia dentro con más artículos.
Catorce preguntas con respuesta larga.
Índice cronológico con filtros por tema, y cada artículo con la misma plantilla: caja de respuesta corta, qué se va a aprender, secciones con anclas, conclusiones numeradas, referencias visibles y FAQ que coincide con la del JSON-LD.
10El sitio
Las páginas, tal como las sirve el dominio.
Titular en Light con la cola en Bold: el patrón de encabezado del estándar del grupo powerabode, que es también la razón de que el sitio componga en Open Sans y no en la Space Grotesk del brand book. Dos acciones y ninguna más: escribir, o entender cómo funciona.
El panel agrupa por lo que el visitante quiere hacer, no por cómo está organizada la empresa. La tarjeta navy de la izquierda es la promesa; las tres columnas, las rutas.
Minerales críticos y energía, infraestructura y desarrollo, defensa y seguridad. Es la sección que responde «¿esto aplica a lo mío?» antes de que nadie haya bajado un tercio de la página.
El argumento central del servicio, dibujado: la licitación solo disciplina las tarifas —el 15 %—, y el 85 % restante vive en especificación y eficiencia. Es un gráfico en CSS que se arma al entrar en pantalla; el dato viaja en el HTML, no en una imagen.
Una negociación soberana no son dos personas: son ministerios, empresas estatales, reguladores, auditores, parlamento y prestamistas. El diagrama pone a los actores de los dos Estados orbitando el contrato.
Suministro directo a término, recurso por infraestructura, marcos de tránsito y almacenamiento, y coinversión bilateral. Cada forma con su propia arquitectura, en la misma rejilla.
La ruta con vida propia: modelos, compromisos, gobernanza y renegociación desde la posición del comprador público, con su propio centro de anuncios.
Dos carriles de logotipos que se mueven en sentidos opuestos y se detienen al pasar el cursor o al recibir foco. Debajo, la nota que hace honesta la sección: son entornos previos de miembros del equipo, no una lista de clientes ni un aval.
Descubrimiento editorial con imagen, filtros por tema y orden cronológico real: cada tarjeta lleva su fecha ISO en el marcado y el artículo más nuevo se queda con el tratamiento destacado.
Todo artículo abre con la respuesta corta y con lo que se va a aprender. Quien solo necesitaba el dato lo tiene en el primer viewport; quien necesita el razonamiento sigue seis secciones más.
Tabla de contenidos generada desde los encabezados del propio artículo, pegajosa y con marcado de la sección activa mientras se baja. Sin librería: es el mismo patrón que el resto del sitio.
Programas, licitaciones y cierres financieros de PPP con su fuente enlazada y una observación breve del lado del comprador. La sección empieza diciendo qué es y qué no es.
ISO 9001, 14001 y 45001 publicadas como bloque visible y como entidades `Certification` enlazadas a la organización en el JSON-LD. Lo que se ve y lo que leen las máquinas es lo mismo.
Cuatro campos y una frase que dice para qué se usan los datos. Debajo, la línea de reCAPTCHA: la protección se declara donde ocurre, no en una política que nadie abre.
GA4 y Clarity no cargan hasta que alguien acepta, y rechazar no cambia el sitio — así lo dice el aviso. La preferencia se puede reabrir desde el pie en cualquier momento.
El mismo mega menú, plegado: grupos desplegables, objetivos táctiles de 44 px, bloqueo de scroll mientras está abierto y devolución del foco al cerrar.
La misma jerarquía en 430 px de ancho, con la acción de contacto fija al pie —respetando el área segura del dispositivo y desapareciendo mientras el aviso de cookies o el menú están abiertos—. Sin desbordamiento horizontal en ninguno de los anchos probados.
La marca en co-firma con powerabode: franja teal al canto, el wordmark del grupo arriba y la línea de servicios en el reverso. Es donde se comprueba si un sello aguanta 8 mm.
11El despliegue
De un commit a Apache, sin manos.
El sitio vive en hosting compartido, que es exactamente donde un despliegue manual se rompe: alguien sube un archivo de más, olvida el `.htaccess` o publica la configuración con el secreto dentro. El flujo se automatizó para que ninguna de esas tres cosas dependa de acordarse.
GitHub Actions
Orquesta validación y publicaciónValidador
Sitemap, JSON-LD, títulos y canónicasPaquete de release
Solo lo que se sirveSecreto de reCAPTCHA
Inyectado, nunca versionadoApache · Bluehost
public_html y .htaccessIndexNow
Aviso a los buscadores
- 01
Validar antes de construir
Cada página indexable tiene que estar en el sitemap y cada entrada del sitemap tiene que apuntar a una página indexable. Se comprueban también el JSON-LD, las canónicas, los hreflang, los alt y los IDs duplicados. Si algo falla, no hay paquete.
- 02
Construir el paquete
Un script arma el archivo de release con lo que se sirve y deja fuera lo que no: metadatos del repositorio, documentación, herramientas locales y fuentes. Lo que se sube es exactamente el árbol de `public_html`.
- 03
Inyectar el secreto
La clave privada de reCAPTCHA entra desde los secretos del repositorio a la configuración del release. Si falta, el despliegue se cae — que es mucho mejor que publicar un formulario que rechaza a todo el mundo en silencio.
- 04
Sincronizar por SSH
El paquete se extrae directamente en el `public_html` de Bluehost, con el `.htaccess` de producción dentro. No hay paso manual entre el commit aprobado y el árbol servido.
- 05
Dejar que Apache enrute
HTTPS y host canónico, `www` al ápice, URLs con barra final, guarda de existencia de archivo para que las páginas legales `.html` no redirijan a directorios que no existen, 404 propio, listados de directorio cerrados y las cabeceras de seguridad y caché.
- 06
Avisar a IndexNow
Las URLs del sitemap se envían al protocolo de descubrimiento después de subir. El paso no bloquea: si el servicio está caído, el despliegue del sitio no se cae con él.
20 URLs canónicas · 1 archivo de release · 0 pasos manuales entre el commit y Apache
12La consulta
Cinco filtros antes de un solo correo.
Un formulario público en un dominio de asesoría soberana recibe spam desde el primer día, y la respuesta habitual —un captcha visible— le cobra el peaje a la persona equivocada. El endpoint es un único archivo PHP del mismo sitio: sin base de datos, sin sesión y sin fichero de datos de cliente. Lo que hace es filtrar y enviar dos correos.
Origen, cebo y reloj.
Comprobación de `Origin` y `Referer` del mismo sitio, campo trampa que devuelve un éxito falso al que lo rellena, y un mínimo de 1,5 segundos entre que se pinta el formulario y llega el envío. Los tres son invisibles para quien escribe de verdad.
reCAPTCHA v3, con las tres comprobaciones.
No basta con que la puntuación pase: se validan también la acción declarada y el hostname que devuelve el servicio. Un token robado de otra página del mundo no sirve aquí. La clave pública viaja en el HTML; la privada nunca sale del secreto del repositorio.
Límites sin guardar a nadie.
Límites por IP, por destinatario y para el sitio entero, con claves derivadas por HMAC: los contadores existen, pero en disco no queda ni una IP ni un correo en claro. Y el acuse al visitante no repite su mensaje, para que el formulario no pueda usarse como reenviador con la marca del cliente.
13El descubrimiento
Lo que el dominio declara hoy.
Cifras contadas sobre lo que sirve g2gdealdesign.com el 29 de agosto de 2026, no sobre el documento de entrega: el sitemap se genera desde las páginas publicadas, así que crece solo. No hay aquí ninguna cifra de tráfico ni de posiciones — esas dependen de accesos de propietario que no son nuestros.
- 20
- URLs canónicas en el sitemap generado
- 14
- Análisis publicados en Insights
- 10
- Entidades enlazadas en el JSON-LD de la portada
- 3
- Certificaciones ISO declaradas como entidad
14El stack
Ninguna dependencia que no se sirva.
La decisión de arquitectura fue no tener aplicación. No hay build de framework, ni base de datos, ni sesión, ni secreto en el cliente: HTML, CSS y JavaScript servidos tal cual, y una única función de servidor —el correo del formulario— que es lo único que el hosting compartido tiene que saber hacer. Un sitio que se explica solo es también un sitio que sobrevive al equipo que lo hizo.
HTML5 · CSS · JavaScript sin framework
Estilos y scripts repartidos por responsabilidad —base, navegación, pie, artículos, iconos animados y analítica—, imágenes reales cacheables con carga diferida bajo el pliegue y un sistema de iconos SVG animados escrito a mano, sin runtime de framework para decorar.
PHP · Apache · Bluehost
Un archivo PHP para la consulta y un `.htaccess` para todo lo demás: canónicas, redirecciones, 404, cabeceras y cierre de listados. La publicación la orquesta GitHub Actions · IndexNow, que valida, empaqueta, inyecta el secreto, sincroniza y avisa a los buscadores.
GA4 · Microsoft Clarity · reCAPTCHA v3
La analítica no carga hasta que hay consentimiento explícito, el almacenamiento publicitario y las señales de Google quedan denegados, el formulario va enmascarado para Clarity y reCAPTCHA se declara aparte, porque protege un formulario y no mide comportamiento.
15El estado
Lo que está hecho y lo que no es nuestro.
El sitio está en producción y responde bajo su ápice: g2gdealdesign.com, comprobado el 29 de agosto de 2026. En esa comprobación el dominio sirve 20 URLs canónicas con 8 entradas de imagen en el sitemap, un robots.txt que nombra explícitamente a los rastreadores de búsqueda y de IA, un llms.txt con el contexto de la práctica y un grafo JSON-LD con la organización, la matriz, las personas, las certificaciones y las preguntas frecuentes enlazadas entre sí.
Durante la entrega el proyecto cambió de forma más de una vez, y eso también es parte del caso: la cabecera plana se volvió un mega menú accesible; un listado de artículos se volvió un índice editorial con filtros y cronología real; una rejilla rígida de logotipos se volvió una nube animada con máscara de bordes y salida estática bajo movimiento reducido; y un experimento de prueba de trabajo propio se retiró antes de publicar en favor de reCAPTCHA v3, conservando las mejoras que sí valían por sí solas —el tiempo mínimo, los límites y el acuse que no repite el mensaje del remitente—.
También se corrigieron cosas que solo aparecen contra un Apache real: las páginas legales `.html` redirigían a directorios inexistentes hasta que se les puso una guarda de existencia de archivo, la portada tenía un duplicado en `/index.html` y el logotipo del hero desbordaba en móvil. Ninguna de las tres se ve en un servidor de desarrollo.
Queda del lado del propietario
- 01Confirmar la llegada de datos en GA4 y Clarity
- 02Verificar SPF, DKIM y DMARC del remitente
- 03Enviar el sitemap desde Search Console
- 04Solicitar indexación en Bing Webmaster Tools
- 05Aprobar autores y revisores con nombre
- 06Decidir si se añade suscripción por correo
Qué no afirma este caso
No hay cifras de tráfico, posiciones, conversiones ni clientes, y no hay testimonios. La infraestructura de descubrimiento se construyó y se puede comprobar; que un buscador indexe es un resultado externo que depende de accesos del propietario. Publicar lo segundo como si fuera lo primero sería exactamente el tipo de afirmación que este sitio existe para desmontar.
Sigue el trabajo
Cuando lo que se vende es neutralidad, el sitio es la primera prueba.
Asesoría, sector público, servicios profesionales de alta confianza: en estas categorías el diseño no adorna el argumento, lo sostiene. Una cifra sin fuente, un testimonio sin nombre o un formulario que filtra datos cuestan más que cualquier rediseño.
Cuéntanos tu proyecto