Cómo personalizar el panel de Payload CMS con tu marca

Cuando le entregas un sitio a un cliente, lo que el cliente ve todos los días no es la web: es el panel donde edita. Si ese panel dice Payload, con los colores y el logo de Payload, la sensación es la de una herramienta ajena que alguien le instaló. Si lleva su marca, o la tuya, es su panel. Payload te deja cambiarlo casi todo, y la licencia (MIT) lo permite.

Esto es lo que hicimos con el panel de este sitio. Lo que ves en las capturas es el panel real de codegea.com, en local.

Qué cambiamos

Cinco cosas, de la más visible a la menos:

1. El logo y el icono (arriba a la izquierda, en el login y en el panel).
2. Los colores y la tipografía.
3. El título de la pestaña, el favicon y la imagen que sale al compartir el enlace.
4. Una pantalla de bienvenida con accesos directos.
5. Los textos del menú y de la interfaz.

Así queda la pantalla de inicio de sesión:

Y el panel, con la bienvenida y el menú:

Paso 1: el título de la pestaña y el favicon

En payload.config.ts, dentro de admin.meta:

admin: {
  meta: {
    titleSuffix: '· Codegea CMS',
    description: 'Panel de contenido de codegea.com',
    icons: [
      { rel: 'icon', url: '/favicon.ico' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
      { rel: 'apple-touch-icon', url: '/apple-touch-icon.png' },
    ],
    openGraph: {
      title: 'Codegea CMS',
      siteName: 'Codegea CMS',
      images: [{ url: '/og-codegea-2026.jpg', width: 1200, height: 630 }],
    },
    twitter: { title: 'Codegea CMS' },
  },
},

titleSuffix es lo que aparece al final de cada pestaña: «Artículos · Codegea CMS». Lo del openGraph importa más de lo que parece: si alguien pega la dirección del panel en WhatsApp, sale tu imagen y no la de otro.

Paso 2: el logo y el icono

Payload te deja reemplazar dos componentes gráficos. Les das la ruta de tu componente, con el formato ruta#NombreExportado:

admin: {
  components: {
    graphics: {
      Logo: '/components/admin/logo#Logo',
      Icon: '/components/admin/icon#Icon',
    },
  },
},

El logo es un componente de React normal. El nuestro dibuja el isotipo en SVG y el nombre al lado:

export const Logo = () => (
  <div className="cg-logo">
    <Isotype size={40} />
    <span>Codegea</span>
  </div>
);

El icono es la versión pequeña, la que aparece en la barra superior, junto a las migas de pan. Después de añadir cualquier componente nuevo, hay que regenerar el mapa de importaciones del panel:

pnpm generate:importmap

Si te olvidas, tu componente no aparece. Es el fallo más común.

Paso 3: colores y tipografía

Payload expone su aspecto como variables de CSS. En el layout del panel se importa un archivo custom.css, y ahí va el tuyo. Nosotros sobrescribimos tres grupos de variables.

Primero, la tipografía y la paleta de marca:

:root {
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --cg-cobalt: #1e3faa;
  --cg-cobalt-dark: #16317f;
  --cg-ink: #0b0f1a;
  --cg-paper: #eef1f7;
}

Después, los fondos y textos del tema claro y del oscuro, que Payload pinta con las variables --theme-*:

html[data-theme='light'] {
  --theme-bg: var(--cg-paper);
  --theme-elevation-0: #fff;
  --theme-elevation-50: #f6f8fc;
  --theme-text: var(--cg-ink);
}

html[data-theme='dark'] {
  --theme-bg: var(--cg-ink);
  --theme-elevation-0: #0b0f1a;
  --theme-elevation-800: #eef1f7;
}

Por último, el color de los botones principales y de los enlaces:

.btn--style-primary {
  --bg-color: var(--cg-cobalt);
  --color: #fff;
  --hover-bg: var(--cg-cobalt-dark);
}

a:not([class]) {
  color: var(--cg-cobalt);
}

Es la parte más rápida y la que más cambia el aspecto: con esas pocas variables, el panel entero pasa del gris de fábrica al papel y cobalto de la marca. Define siempre las dos variantes, la clara y la oscura; si solo haces una, quien use el modo oscuro verá medio panel de un color y medio de otro.

Paso 4: una bienvenida con accesos directos

Payload permite montar componentes propios antes del dashboard. El nuestro es una cabecera con una frase y tres enlaces: ver el sitio, crear un artículo y crear un proyecto.

admin: {
  components: {
    beforeDashboard: ['/components/admin/welcome#Welcome'],
  },
},

'use client';

export const Welcome = () => {
  const { i18n } = useTranslation();
  const copy = i18n.language === 'en' ? COPY.en : COPY.es;
  return (
    <section className="cg-welcome">
      <h2>{copy.title}</h2>
      <p>{copy.text}</p>
      <nav>{/* los tres enlaces */}</nav>
    </section>
  );
};

Lo único especial es useTranslation, de @payloadcms/ui: te dice en qué idioma está el panel, para mostrar el texto en español o en inglés. Para quien entra de vez en cuando, esos tres enlaces ahorran buscar dónde se crea un artículo.

Paso 5: los textos

Hay tres niveles de texto:

• Tus propias colecciones. Les pones labels por idioma y un group para agruparlas en el menú. «Publicaciones sociales», «Redes», «Ajustes» salen de ahí.
• Los textos de Payload. Se pueden sobrescribir por idioma con i18n.translations. Nosotros cambiamos uno: el texto «Ajustes de Payload», que pasó a decir «Ajustes de Codegea CMS». Es el único texto del panel que nombraba al CMS base.
• Los idiomas del panel. i18n.supportedLanguages define cuáles ofrece. El panel funciona en español y en inglés, y cada editor elige el suyo.

Lo que todavía se nota

Quedarnos sin una sola mención a Payload era la regla, y casi se cumple. Pero mira el menú lateral:

Fíjate en Forms, Form Submissions, Search Results y API Keys. Esos nombres vienen de los plugins (formularios, búsqueda, MCP) y no están traducidos ni renombrados. Se pueden cambiar con las opciones de sobrescritura de cada plugin, y en este sitio es una tarea pendiente. Lo dejamos en el artículo porque pasa en cualquier proyecto: la marca blanca se parece más a una lista de pendientes que a un interruptor.

Lo que aprendimos

• Empieza por el CSS. Con unas pocas variables ya se ve otro producto. El logo y la bienvenida pulen; el color convence.
• Prueba el modo oscuro y el idioma que no usas. Los fallos están ahí.
• Revisa la pestaña del navegador, el correo de restablecer contraseña y la imagen al compartir. Son los sitios donde el nombre original se cuela.
• Documenta la regla. Nosotros la escribimos en el CLAUDE.md del repositorio: «no reintroducir referencias a Payload en textos visibles». Sin eso, el siguiente cambio las vuelve a poner.

Cuándo no vale la pena

Si el panel solo lo usas tú, o el cliente casi no entra, alcanza con el título de la pestaña y los colores. La marca blanca se paga cuando alguien convive con el panel todos los días. Y no hace falta rehacer nada de lo que Payload ya trae bien: la edición de contenido, los permisos o la búsqueda.

Si quieres seguir con el CMS, mira cómo lo extendimos con una función entera en un estudio para publicar en redes sociales, y por qué lo elegimos en Payload vs Strapi vs Directus.