CuHe Labs
CuHe Labs

Brand kit

Guía de uso de marca CuHe Labs

Assets oficiales para acreditar proyectos diseñados, desarrollados o creados por CuHe Labs.

Hay cuatro familias de assets y no se mezclan: Email Header para correos automáticos, Email Signature para firmas personales, CuHe Credit para footers de sistemas y Project Banner para cierres visuales de proyectos. Todos los enlaces van a https://cuhelabs.com.

Clasificación

Qué asset usar

Cada pieza tiene un solo trabajo. No uses el header de email como firma, ni el Credit como cabecera de correo, ni el banner de proyecto dentro de un sistema.

Email Header

Para correos automáticos de CuHe Labs: confirmaciones, notificaciones y onboarding. Banner 600 px, no es una firma.

Email Signature

Para firmas personales de Juan, Omar y el equipo. Logo PNG 220 px, Light Minimal, sin header oscuro.

CuHe Credit

Para footer de proyectos, logins y dashboards. Isotipo + texto, sin caja ni aspecto de aviso.

Project Banner

Para cierres visuales amplios de proyectos y landings. No va en firmas ni en emails transaccionales.

Uso

Cuándo usar cada banner

Hay tres textos y dos fondos. El banner no reemplaza al Credit: el banner es para bloques amplios; el Credit es la atribución discreta.

Light

Sitios con fondo claro

Usa las versiones light. El banner ya trae fondo blanco y contraste para footers o cierres claros.

  • /brand/cuhe-banner-light-creado-por.png
  • /brand/cuhe-banner-light-desarrollado-por.png
  • /brand/cuhe-banner-light-disenado-y-desarrollado-por.png

Dark

Sitios con fondo oscuro

Usa las versiones dark solo en bloques amplios. En footer o login compacto, prefiere CuHe Credit dark.

  • /brand/cuhe-banner-dark-creado-por.png
  • /brand/cuhe-banner-dark-desarrollado-por.png
  • /brand/cuhe-banner-dark-disenado-y-desarrollado-por.png

Login, dashboards o sistemas

Prefiere CuHe Credit xs o sm. El banner de 300 px solo si hay un bloque amplio bajo el formulario.

Footer de sitios corporativos

Prefiere CuHe Credit, 170–240 px. Evita el banner blanco en footers oscuros o compactos.

Cierre visual de landings

Banner 300–520 px. El Credit md sirve si el cierre debe verse más como sello que como bloque.

Assets

Banners oficiales

Vista previa, ruta pública y código listo para pegar. Las imágenes se sirven desde cuhelabs.com/brand/.

Creado por CuHe Labs

Fondo claro

Creado por

cuhe-banner-light-creado-por.png

https://cuhelabs.com/brand/cuhe-banner-light-creado-por.png

Desarrollado por CuHe Labs

Fondo claro

Desarrollado por

cuhe-banner-light-desarrollado-por.png

https://cuhelabs.com/brand/cuhe-banner-light-desarrollado-por.png

Diseñado y desarrollado por CuHe Labs

Fondo claro

Diseñado y desarrollado por

cuhe-banner-light-disenado-y-desarrollado-por.png

https://cuhelabs.com/brand/cuhe-banner-light-disenado-y-desarrollado-por.png

Creado por CuHe Labs

Fondo oscuro

Creado por

cuhe-banner-dark-creado-por.png

https://cuhelabs.com/brand/cuhe-banner-dark-creado-por.png

Desarrollado por CuHe Labs

Fondo oscuro

Desarrollado por

cuhe-banner-dark-desarrollado-por.png

https://cuhelabs.com/brand/cuhe-banner-dark-desarrollado-por.png

Diseñado y desarrollado por CuHe Labs

Fondo oscuro

Diseñado y desarrollado por

cuhe-banner-dark-disenado-y-desarrollado-por.png

https://cuhelabs.com/brand/cuhe-banner-dark-disenado-y-desarrollado-por.png

Atribución

Créditos para proyectos

El banner sirve para cierres visuales y landings amplias. El CuHe Credit es la alternativa compacta para footer, login, dashboards y sistemas, sin caja blanca ni aspecto de aviso publicitario.

Banner

Cierres de landing o bloques amplios. 300–520 px. Sigue usando las imágenes cuhe-banner-*.png.

Credit

Footer, login y dashboards. 170–240 px. Isotipo oficial + texto, sin rectángulo.

Assets

CuHe Credit

CG Reino de Belleza

Footer oscuro, credit dark

No uses el banner light con caja blanca. En el footer morado va CuHe Credit dark, creado, sm, centrado, con 18–24 px de margen superior.

Creado por CuHe Labs

CSS del componente

.cuhe-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: inherit;
  opacity: .88;
  transition: opacity .2s ease, transform .2s ease;
}

.cuhe-credit:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.cuhe-credit img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

.cuhe-credit span {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.cuhe-credit strong {
  font-weight: 600;
}

.cuhe-credit--xs img { width: 24px; height: 24px; }
.cuhe-credit--xs span { font-size: 11px; }
.cuhe-credit--sm img { width: 30px; height: 30px; }
.cuhe-credit--sm span { font-size: 12px; }
.cuhe-credit--md img { width: 36px; height: 36px; }
.cuhe-credit--md span { font-size: 13px; }

.cuhe-credit--dark { color: rgba(255,255,255,.72); }
.cuhe-credit--dark strong { color: #fff; }
.cuhe-credit--light { color: #64748b; }
.cuhe-credit--light strong { color: #0f172a; }

.cuhe-credit--auto { color: #64748b; }
.cuhe-credit--auto strong { color: #0f172a; }

@media (prefers-color-scheme: dark) {
  .cuhe-credit--auto { color: rgba(255,255,255,.72); }
  .cuhe-credit--auto strong { color: #fff; }
}

Implementación

Código recomendado

El enlace siempre apunta a CuHe Labs, abre en una pestaña nueva y no deforma la imagen.

HTML

html

<a href="https://cuhelabs.com" target="_blank" rel="noopener noreferrer" aria-label="Visitar CuHe Labs">
  <img
    src="https://cuhelabs.com/brand/cuhe-banner-dark-desarrollado-por.png"
    alt="Desarrollado por CuHe Labs"
    style="width: min(300px, 80vw); height: auto; display: block; margin: 24px auto 0;"
  />
</a>

CSS

css

.cuhe-banner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cuhe-banner:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.cuhe-banner img {
  width: min(300px, 80vw);
  height: auto;
  display: block;
}

React / Next.js

tsx

export function CuHeCredit({
  variant = "dark",
  text = "desarrollado",
  size = "mini",
}: {
  variant?: "dark" | "light";
  text?: "creado" | "desarrollado" | "disenado";
  size?: "mini" | "compact";
}) {
  const fileMap = {
    dark: {
      creado: "cuhe-banner-dark-creado-por.png",
      desarrollado: "cuhe-banner-dark-desarrollado-por.png",
      disenado: "cuhe-banner-dark-disenado-y-desarrollado-por.png",
    },
    light: {
      creado: "cuhe-banner-light-creado-por.png",
      desarrollado: "cuhe-banner-light-desarrollado-por.png",
      disenado: "cuhe-banner-light-disenado-y-desarrollado-por.png",
    },
  };

  const file = fileMap[variant][text];
  const width = size === "mini" ? 300 : 420;

  return (
    <a
      href="https://cuhelabs.com"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Visitar CuHe Labs"
      className="inline-flex items-center justify-center opacity-90 transition hover:-translate-y-0.5 hover:opacity-100"
    >
      <img
        src={`https://cuhelabs.com/brand/${file}`}
        alt="Desarrollado por CuHe Labs"
        style={{ width: `min(${width}px, 80vw)`, height: "auto" }}
      />
    </a>
  );
}

Criterio

Recomendaciones por tipo de proyecto

Landing o sitio corporativo

Cierre visual: banner 300–520 px. Footer compacto: CuHe Credit 170–240 px.

Login de sistema

CuHe Credit xs o sm, dark o light según el fondo, con 18 a 24 px de margen superior.

Dashboard o app interna

CuHe Credit xs o sm en el footer interno. Sin caja blanca ni banner grande.

Sitio premium o de servicios

Usa “Diseñado y desarrollado por CuHe Labs”.

Sistema técnico, SaaS o app

Usa “Desarrollado por CuHe Labs”: suena más preciso y profesional.

Proyecto informal o propio

Usa “Creado por CuHe Labs”.

Cuidado de marca

Reglas visuales

  • No uses banners gigantes dentro de sistemas ni footers compactos.
  • En footer oscuro usa CuHe Credit dark, no el banner light con caja blanca.
  • No pongas la atribución sobre un fondo sin contraste.
  • No deformes las imágenes: width fluido y height: auto.
  • No cambies los colores del logo, del banner ni del isotipo.
  • Logo de email en firmas: PNG de 220 px. En correos automáticos usa el Email Header, no la firma ni el Credit.
  • El Email Header no es firma personal ni crédito de proyecto. Va solo en emails transaccionales.
  • Enlaza siempre a https://cuhelabs.com.
  • Usa alt descriptivo, por ejemplo “Desarrollado por CuHe Labs”.
  • En móvil, centra el Credit. El banner usa width: min(300px, 80vw).

Identidad

Logos oficiales

Úsalos solo si el banner o el Credit no caben. No los redibujes ni cambies sus colores. En correo usa el PNG de 220 px, no el SVG.

CuHe Labs — Logo horizontal
Logo horizontal
CuHe Labs — Isotipo
Isotipo
CuHe Labs — Logo principal
Logo principal
CuHe Labs — Monocromo
Monocromo
CuHe Labs — Negativo
Negativo

Correo

Headers para correos automáticos

Cabecera oficial de CuHe Labs para emails automáticos, formularios, notificaciones y comunicaciones transaccionales.

CuHe Labs — Software, Apps & Soluciones TI

Email Header

Tech Dark

Cabecera oficial de CuHe Labs para emails automáticos, formularios, notificaciones y comunicaciones transaccionales.

https://cuhelabs.com/brand/email/cuhe-email-header-tech-1200.png

Uso recomendado

  • Confirmación de formulario
  • Notificaciones
  • Onboarding
  • Comunicaciones automáticas
  • Emails de sistemas CuHe

No usar como

  • Firma personal
  • Crédito de proyecto
  • Footer de sitios
  • Banner “Creado por”
DescargarVer imagen

Original: https://cuhelabs.com/brand/email/cuhe-email-header-tech.png
PNG 1200: https://cuhelabs.com/brand/email/cuhe-email-header-tech-1200.png

Correo

Firmas de correo

Email Signature: firma personal de Juan, Omar y el equipo. No uses aquí el Email Header ni los banners de proyecto. HTML con tablas e estilos inline para Ferozo, Gmail y Outlook. Logo PNG de 220 px. Ancho máximo 520 px.

Logo PNG

Logo horizontal oficial, exportado a PNG. 210–220 px de ancho. No uses SVG en el correo.

Identidad

Nombre, cargo, CuHe Labs, correo corporativo, sitio y LinkedIn. Una sola firma por persona.

Compatibilidad

Tablas, cellpadding y estilos inline. Sin flex, grid, CSS externo ni JavaScript.

v2

Firma oficial CuHe Labs — Light Minimal v2

Uso diario. Copia el HTML, ábrelo o usa la URL pública. En Ferozo pégalo en Source code (<>) con Firma HTML encendida.

CuHe Labs

Juan Francisco Herrera Carreño

Socio fundador · CuHe Labs

jherrera@cuhelabs.com

cuhelabs.com  ·  LinkedIn

Software a medida · Apps · Integraciones · IA aplicada

Uso diario — recomendada

Juan Francisco Herrera Carreño

Socio fundador

https://cuhelabs.com/brand/signatures/v2/juan-francisco-herrera-light.html

Abrir HTML
CuHe Labs

Omar Curvelo

Socio fundador · CuHe Labs

ocurvelo@cuhelabs.com

cuhelabs.com  ·  LinkedIn

Software a medida · Apps · Integraciones · IA aplicada

Firma oficial

Omar Curvelo

Socio fundador

https://cuhelabs.com/brand/signatures/v2/omar-curvelo-light.html

Abrir HTML
CuHe Labs

[Nombre Apellido]

[Cargo] · CuHe Labs

[correo@cuhelabs.com]

cuhelabs.com

Software a medida · Apps · Integraciones · IA aplicada

Firma oficial

[Nombre Apellido]

[Cargo]

https://cuhelabs.com/brand/signatures/v2/template-light.html

Abrir HTML

Instalación

Cómo instalarla

El HTML es el mismo. En Ferozo hay que pegarlo en Source code.

Webmail Ferozo

  1. 01No pegues el HTML en un correo nuevo. Eso deja el código visible.
  2. 02Configuración → Identidades → selecciona tu identidad.
  3. 03Enable Signature Builder: OFF. Firma HTML: ON.
  4. 04En el recuadro Firma, pulsa Source code (<>), pega el HTML y vuelve a pulsar <> para verla armada.
  5. 05Si Ferozo agrega automáticamente el separador -- antes de la firma, no lo pongas en el HTML. Revisa la identidad o el editor y desactiva el separador automático si la opción existe.
  6. 06Guardar. Redacta un correo real (editor normal, no HTML) y envíalo a otra cuenta para probarlo.

Gmail / Outlook

  1. 01Gmail: Configuración → Ver todas las opciones → Firma. Pega el HTML y asígnala a correos nuevos.
  2. 02Outlook: Firma → Nueva. Si pega texto plano, inserta el PNG del logo (220 px) y replica nombre, cargo y enlaces.
  3. 03Envía un correo de prueba y confirma logo, enlaces y que no se vean etiquetas.

Cuidado de marca

Reglas de las firmas

  • Una sola firma oficial por persona. Light Minimal v2 es la de uso diario.
  • Logo de email: PNG de 220 px. No uses SVG en Ferozo, Gmail ni Outlook.
  • Ancho total de la firma: máximo 520 px. No la metas en una caja ni en fondo oscuro.
  • No uses el Email Header, ni banners “Creado / Desarrollado por”, dentro de una firma personal.
  • No redibujes el logo ni cambies sus colores.
  • Tipografía Arial o Helvetica. Nombre 17 px / 700 / #0F172A. Cargo 12 px / 600 / #14B8A6.
  • No agregues el separador -- en el HTML. Si aparece al enviar, lo pone Ferozo.
  • Sin foto, iconos extra, GIF, frases motivacionales ni datos inventados.
  • Todos los enlaces van a https://cuhelabs.com, salvo el correo y el LinkedIn personal.