Guía de marca

Un sistema silencioso

Referencia de trabajo del lenguaje visual de juanrapacioli.com. Colores, tipografía, componentes y jerarquía, especificados una sola vez para mantener la consistencia entre páginas y colaboradores.

Brand guidelines v1.0 · 2026

Colores

Paleta

El sistema parte de un rosa de acento sobre una base cálida de cremas. Los grises son una rampa corta: tinta primaria para el texto, tinta suave para texto secundario, y hairline para divisores. El ámbar aparece solo en la atmósfera del hero y como acento menor.

Acento

Pink
#e0357a
Acento. Itálica de énfasis, borde de tarjetas, labels de sección.
Pink light
#f7c5da
Atmósfera del hero, comilla de testimonios, tagline del footer.
Amber
#f0a843
Atmósfera del hero (opacidad baja) y puntos de lista.

Texto y hairlines

Ink
#1a1208
Texto primario y superficie del footer.
Ink light
#5a4e3c
Texto secundario, captions y metadatos.
Hairline
rgba(26,18,8,0.1)
Hairlines y divisores entre secciones.

Superficies

Las secciones de contenido alternan entre crema y crema oscuro. El footer es tinta sobre blanco. El gradiente está reservado para la superficie del hero.

Superficie del hero (radial)
Contenido (crema)
#fdf6ee
Contenido alternado (crema oscuro)
#f5ebe0
Footer (tinta)
#1a1208
El rosa es un acento. Si empieza a dominar la composición, está mal aplicado.
Los grises siguen la rampa. No se usan valores fuera de la escala.
Los gradientes son exclusivos del hero. El resto de las superficies se resuelven con rellenos sólidos.

Tipografía

Voz tipográfica

Dos familias: DM Serif Display para títulos y DM Sans para todo lo demás. La cursiva rosa marca una sola palabra o un nombre propio, nunca frases enteras.

Juan Rapacioli
El gesto de firma: la itálica rosa nombra a la persona.
H1 / DisplayDM Serif Display · Redonda + Itálica
Juan Rapacioli
H2 / HeadingDM Serif Display · Redonda
Sobre mí
BodyDM Sans · Regular 400
Cuerpo de texto en DM Sans. Diseño sistemas de contenido y combino escritura human-centered con el uso estratégico de IA para conectar objetivos de negocio con necesidades de personas usuarias.
Small / CaptionDM Sans · 13px · Tinta suave
Texto secundario y captions en DM Sans, 13px, tinta suave.
Label / EyebrowDM Sans · Semibold 600 · Versalita · Rosa
Portfolio

Reglas de uso

Pesos mínimos. Regular (400) y medium (500) son los pesos principales; semibold (600) queda reservado para labels, botones y elementos de interfaz.
Itálica parcial. Marca una sola palabra o nombre propio. Nunca frases enteras.
Sin guiones largos. Se resuelve con punto, coma o paréntesis según el caso.

Componentes

Piezas y jerarquía

El sistema se compone de tarjetas con borde izquierdo rosa de 3 pixeles. Ese borde es el gesto de firma visual. Se aplica a tarjetas y bloques de dato, no a títulos ni a párrafos ni al footer.

Componente 01

Content card

Tarjeta de contenido con borde izquierdo rosa de 3 px. Usada en portfolio, skills y certificaciones.

Content Design System construido desde cero (Banco Macro).

Componente 02

Data block

Mismo tratamiento de borde izquierdo. Usada en About Me para los proof points (Macro, Galicia, Anthropic).

Campañas B2B con +392% y +128% sobre benchmark de conversión (Banco Galicia).
Certificaciones en Claude y Claude Code (Anthropic).

Componente 03

Testimonial card

Comilla rosa, texto en serif itálica, autor en sans bold, rol en tinta suave. El nombre del autor y su rol se separan por salto de línea, sin puntos medios ni guiones.

It’s not often that you have the chance to work with someone with such a unique set of skills. At his core, Juan is a writer who has expanded his expertise from a foundation in storytelling, poetry, and essays to the world of UX. He possesses a rare combination of work ethic, pragmatism, and creativity that would make him an excellent fit for any team looking for someone with autonomy and a problem-solving mindset.

Guido Villaverde

Senior Engineering Manager at Miro

Componente 04

Timeline card

Rango de años en sans sobre la izquierda. A la derecha, el rol en serif bold, la compañía en rosa y la descripción en sans. Sin itálicas.

Ene 2025 a Mar 2026

Content Strategist

Banco Galicia (Nonconformist)

Contenido B2B para productos financieros. Campañas con +392% y +128% sobre benchmark.

Componente 05

Footer

Superficie oscura. Nombre y tagline a la izquierda, enlaces, contacto. CTA con botón rosa.

Juan
Rapacioli

Content Designer & Strategist | UX | AI-driven workflows

Enlaces

  • LinkedIn
  • Linktree

Contacto

  • juanrapacioli@gmail.com

Construyamos algo juntos.

Contacto

Reglas de uso

El borde rosa de 3 px es el gesto de firma. Se aplica solo a tarjetas y bloques de dato. Nunca a títulos, párrafos o al footer.
Cada sección sigue el mismo patrón. Label (versalita rosa), heading (serif), cuerpo (sans). Tres pasos, ni uno más.
Sin guiones largos ni separadores intermedios. La jerarquía visual hace el trabajo.

Usá Imprimir del navegador y elegí “Guardar como PDF” para descargar una copia local.

← Volver al sitio