sistema-de-marca

Sistema de marca

Un repositorio visual y editorial completo, listo para usar: colores, tipografía, degradado, componentes, reglas de logotipo, tono de voz externo y estructura de entregables. Se aplica a cualquier salida destinada a un cliente, prospecto o audiencia externa.

Estos valores son valores por defecto. Cuando un proyecto tiene su propia guía, leerla primero y reemplazar los tokens (paleta, fuentes, logotipo): las reglas de composición, el tono y la estructura de los entregables siguen siendo válidos.

Espíritu general: economía de medios, espacio blanco generoso, tipografía de alta legibilidad, estética suiza y Bauhaus.

Archivos de referencia:

• references/tokens.css y references/tokens.json: los tokens siguientes, listos para importar.
• references/charte.png (y .svg): la paleta, la tipografía y los componentes en una lámina.

---

1. Paleta

Rol	Hex	Notas
Color del logotipo	#295FEC	Solo logotipo
Primario (CTA, enlaces, acentos)	#3D65E8	Interfaz, textos de acento, botones
Fondo global claro	#EBEFF7	Fondo de diapositivas de contenido, bandas
Fondo off-white (base del degradado)	#F8F9FB	Base de diapositivas y páginas con degradado
Superficie, tarjeta	#FFFFFF	Tarjetas, bloques, recuadros
Bloque superficie ligera	#F0F2F7	Tarjetas en rejillas
Texto principal	#111827	Cuerpo, títulos oscuros
Texto discreto	#6B7280	Etiquetas, leyendas, metadatos
Verde de estado	#22C55E	Indicadores positivos

Un solo nivel de color de acento por soporte: el color primario.

2. Degradado de fondo

Un degradado radial suave, aplicado sobre superficies claras y diapositivas. Permanece sutil: invisible a primera vista.

background: radial-gradient(
  ellipse at 85% 10%,
  rgba(180, 215, 245, 0.55) 0%,
  rgba(200, 230, 252, 0.25) 35%,
  transparent 65%
), #F8F9FB;

/* Variante en dos esquinas opuestas */
background:
  radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
  radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
  #F8F9FB;

En PPTX: fondo de diapositiva #F8F9FB, relleno degradado radial en la esquina superior derecha, color de inicio #B4D7F5 al 55 % de opacidad, hacia transparente.

3. Componentes

Botones

• Acción primaria: forma de píldora (radio 999 px), fondo primario, texto blanco, icono de flecha a la derecha.
• Acción secundaria: píldora, fondo blanco, borde ligero, texto oscuro, icono de flecha a la derecha.

Tarjetas

• Fondo blanco o superficie ligera, radio 16 px, sombra suave, sin borde marcado.
• Metadato: el año en texto discreto, luego un separador de punto (por ejemplo «2024 · Nombre del proyecto»).
• Título en semi-negrita, cuerpo en regular, enlace abajo en texto discreto.

4. Tipografía

Uso	Fuente	Grosor
Títulos principales	Inter	Black 900 o ExtraBold 800
Subtítulos, etiquetas	Inter	SemiBold 600
Cuerpo de texto	Inter	Regular 400
Metadatos, leyendas	Inter	Regular 400, texto discreto

Fuente de respaldo prioritaria: Public Sans. Respaldo del sistema: Geist, SF Pro, Helvetica Neue. Sin fuentes con serifa ni decorativas.

5. Iconos

Phosphor Icons o Lucide, grosor Regular o Light según el contexto. Sin emojis en los entregables.

6. Logotipo

El logotipo del proyecto se proporciona con el proyecto: ningún archivo de logotipo acompaña a este skill. Reglas de uso válidas para cualquier logotipo:

• Diapositivas, portada sobre fondo de color: logotipo en la parte superior izquierda, versión blanca si existe, altura del símbolo 36 a 40 px.
• Diapositivas de contenido, fondo claro: símbolo solo o logotipo completo en el pie de página, altura 20 a 24 px, texto discreto, alineado abajo a la izquierda.
• Documentos Word: logotipo en el encabezado de la primera página, alineado a la izquierda, altura 28 a 32 px, sin estiramiento.
• Artefactos web: símbolo SVG en línea, 32 px, con un enlace al sitio.
• Margen de protección: al menos 1 vez la altura del símbolo a cada lado, sin texto ni elemento gráfico en esta zona.
• A evitar: deformar o estirar el logotipo, recolorearlo fuera de su color o del blanco, usar una versión borrosa o de baja resolución, colocarlo sobre un fondo de contraste insuficiente.

7. Tono de voz externo

• De par a par, nunca condescendiente, nunca comercial.
• Preciso y fundamentado: casos reales, métricas, mecanismos observables.
• Accesible sin vulgarizar. La experiencia se nota en la precisión, no en los superlativos.
• Aplicar sober-writing en paralelo para la postura redaccional, y francais-parfait o espanol-perfecto para un texto en español.

Prohibido en todos los documentos externos: «apasionado por», «orientado a resultados», «creador de valor», las biografías autofelicitativas en tercera persona, las listas de habilidades sin contexto ni prueba, el tono de agencia que promete mucho y explica poco.

8. Estructura de los entregables

Propuesta comercial, one-pager

1. El contexto y el desafío del cliente, sin introducción sobre uno mismo.
2. El ángulo de intervención y su mecanismo.
3. Los entregables y los hitos.
4. El precio y las modalidades.
5. Las referencias pertinentes (casos similares).

Caso de estudio

1. La situación inicial: métricas, restricciones, organización.
2. Las decisiones tomadas, y por qué.
3. Los resultados medibles.
4. Lo que se podría haber hecho de otra manera.

Biografía profesional (80 a 100 palabras)

• Comenzar con el rol y el ángulo que diferencia.
• Dos o tres pruebas concretas: clientes, resultados, contextos.
• Cerrar con la disponibilidad o la especialización actual.

Correo de prospección: asunto específico para el destinatario; cuerpo de 80 a 120 palabras, con una observación sobre su situación, una propuesta directa y una llamada a la acción clara.

Documento Word: logotipo en el encabezado, pie de página con los datos del proyecto, cuerpo en Inter o Public Sans, títulos en semi-negrita, un solo acento de color, sin adornos decorativos.

9. Combinar con slides y pptx

Tres skills, tres roles:

Skill	Rol
brand-system (esta)	La identidad: paleta, tipografía, degradado, componentes, logotipo, tono
slides	El diseño: quince diseños, estructura narrativa, títulos
pptx (skill de Anthropic, a instalar por separado)	La generación técnica del archivo .pptx

Procedimiento para producir una presentación:

1. Leer brand-system para fijar los tokens (o reemplazarlos por los del proyecto).
2. Leer slides para elegir la estructura del deck y los diseños, usando estos tokens.
3. Leer pptx para generar el archivo, aplicando los valores de los dos primeros.
4. Controlar el resultado diapositiva por diapositiva (exportación en imágenes) con la verificación de slides.

10. Verificación antes de cualquier entregable

1. El posicionamiento se basa en pruebas, no en calificativos.
2. El tono es de par a par, no comercial.
3. El logotipo respeta sus reglas de uso y sus márgenes.
4. Color del logotipo y color de acento de la interfaz distintos: #295FEC para uno, #3D65E8 para el otro.
5. Tipografía Inter o Public Sans únicamente.
6. Sin emojis, sin guiones largos, sin palabras de moda vacías.
7. sober-writing aplicada, y francais-parfait para un texto en francés o espanol-perfecto para un texto en español.