Convierte un diseño en ajustes reutilizables de POM

Usa este flujo de trabajo para trasladar un diseño aprobado a POM Theme. El objetivo es un conjunto reducido de opciones reutilizables, no una colección aparte de anulaciones para cada página.

Prepara el diseño de origen

Reúne:

• colores primario, secundario, neutro, de éxito, de aviso y de error;
• variantes del logotipo y un icono del sitio cuadrado;
• archivos de fuentes con licencia con los pesos y estilos realmente utilizados;
• especificaciones de cuerpo, párrafo, encabezado y encabezado de presentación;
• estados predeterminados y alternativos de los botones;
• iconos de interfaz y sociales aprobados;
• ejemplos de espaciado en áreas de visualización anchas y estrechas.

Elimina los valores duplicados que cumplen la misma función antes de introducir los ajustes.

1. Establece las bases

1. Añade las variantes del logotipo en Design system → Brand.
2. Asigna colores semánticos de Color #1 a Color #15.
3. Elige la Safe font.
4. Añade Font Families personalizadas y sus variantes necesarias.

Estas opciones alimentan los selectores posteriores de paleta y fuente.

2. Configura el texto y las acciones

1. En General styles, define los valores de cuerpo, párrafo, enlace, H1–H6 y Display 1–4.
2. Configura el botón predeterminado.
3. Añade solo los estilos de botón alternativos necesarios para acciones diferenciadas.
4. Asigna a cada botón adicional un slug descriptivo y estable.

3. Añade activos y estados compartidos

Crea bibliotecas SVG únicamente para los iconos aprobados que no estén ya disponibles. Configura los iconos de interfaz predeterminados en Brand. En Components, define los colores de aviso y activa el conmutador de contenido Inner Row solo cuando el sitio necesite ese comportamiento.

4. Crea una página representativa

Crea un borrador que contenga:

• texto de cuerpo y todos los niveles de encabezado utilizados por el sitio;
• combinaciones de paleta de texto y fondo;
• botones predeterminados y alternativos;
• un formulario con comentarios de éxito y error;
• una sección de varias columnas con contenido real;
• cualquier icono personalizado.

Usa esta página para probar el sistema, no para redefinirlo de forma local.

5. Revisa y publica

Comprueba Theme preview, el borrador representativo y las plantillas públicas relevantes. Prueba el contraste, el foco del teclado, el texto largo, las alternativas de fuentes, las pantallas anchas y los cuatro rangos responsivos del Page Builder. Registra las excepciones locales intencionadas para que los editores posteriores no las copien como valores predeterminados.