02 — EL PROCESO
Mapeo Facial
Se trazan puntos de referencia en el rostro respetando la geometría natural.
01 — TipografíaInter es la fuente oficial
Toda la comunicación visual usa Inter — una tipografía moderna, sin costo, disponible en Google Fonts. Antes había referencias a "Gotham" en el código, pero nunca se renderizó así; usamos Inter porque es gratis, se ve idéntica a lo que ya tenemos publicado, y está integrada en Canva y Figma.
Descarga / instalación:
Google Fonts → fonts.google.com/specimen/Inter
En Canva y Figma aparece directamente al buscar "Inter" en el selector de fuentes. En Photoshop, instálala una vez desde Google Fonts y queda disponible.
Google Fonts → fonts.google.com/specimen/Inter
En Canva y Figma aparece directamente al buscar "Inter" en el selector de fuentes. En Photoshop, instálala una vez desde Google Fonts y queda disponible.
Antes y Después
Cejas densas, naturales, diseñadas a la medida de cada rostro.
Aa Bb Cc 123Regular · 400
Aa Bb Cc 123Medium · 500
Aa Bb Cc 123Semibold · 600
Aa Bb Cc 123Bold · 700
Aa Bb Cc 123Extrabold · 800
Reglas de uso
- Títulos / Headlines → Inter Extrabold 800, tracking
-0.015em, una palabra clave en verde#008c3b. - Cuerpo / Body → Inter Regular 400, line-height 1.55, color
rgba(255,255,255,0.65). - Labels / Etiquetas (ej. "01 — ¿QUÉ ES?") → Inter Semibold 600, MAYÚSCULAS, tracking
0.3em, color verde. - Botón / CTA → Inter Bold 700 o Extrabold 800, tracking
0.05em, fondo verde, texto blanco.
02 — ColorPaleta de marca
Verde y azul marino son los dos pilares. El verde es el acento de atención — úsalo en una palabra del titular, los labels numerados, botones CTA y el contorno de la foto "Después". El azul marino es el fondo; el off-black se usa como base detrás de las fotos.
Principales
Texto
03 — LayoutLa fórmula de cada slide
Todos los slides interiores (slides 2 a 5) siguen exactamente la misma receta visual. La única diferencia entre ellos es la foto de fondo y el texto. Esta consistencia es lo que hace que el carrusel se lea como una sola pieza.
- Foto full-bleed de Colombia Care — nunca stock. Primer plano de ceja, cirugía o paciente.
- Overlay oscuro en gradiente — la foto se ve arriba y se oscurece casi a negro hacia abajo para que el texto sea legible.
- Texto anclado abajo-izquierda — padding lateral 60px, padding inferior 80px.
- Label numerado en verde — "0X — TÍTULO" en mayúsculas, tracking generoso.
- Titular con una palabra en verde — resalta la palabra clave del slide, no todo el título.
- Cuerpo en dim white — una o dos frases máximo. No llenes el slide de texto.
Código del overlay oscuro (para Figma / Canva)
background: linear-gradient( 180deg, rgba(10,15,25,0.20) 0%, rgba(10,15,25,0.15) 25%, rgba(10,15,25,0.80) 65%, rgba(10,15,25,0.95) 100% );
En Canva: añade un rectángulo negro encima de la foto, selecciona "Degradado", y pon los 4 stops anteriores. O usa un overlay lineal vertical de #0a0f19 al 20% arriba y 95% abajo.
04 — Jerarquía de tamañosPuntos / pixels por slot
Estos son los tamaños para canvas 1080 × 1350 (Instagram 4:5). Si trabajas en otro canvas, escálalos proporcionalmente.
18 px
Label numerado
Inter Semibold 600 · tracking 0.3em
44 px
Titular interior
Inter Extrabold 800 · tracking -0.015em
54 px
Titular portada (slide 1)
Inter Extrabold 800
23 px
Cuerpo principal
Inter Regular 400 · line-height 1.55
22 px
Subtítulo / caption
Inter Regular 400 · color dim
26 px
Texto del botón CTA
Inter Bold 700 · tracking 0.05em
05 — CanvasDimensiones por formato
1080 × 1350
Carrusel Instagram
Aspecto 4:5 (portrait)
1080 × 1920
Stories / Reels
Aspecto 9:16
1920 × 1080
Landing hero / banner web
Aspecto 16:9
1080 × 1080
Post feed cuadrado
Úsalo sólo si es absolutamente necesario
06 — Sí / NoLo que sí y lo que no
Sí
- Usa fotos reales de Colombia Care (quirófano, pacientes, ceja en close-up).
- Resalta una palabra del titular en verde, no todo el título.
- Ancla el texto a la parte inferior izquierda del slide.
- Usa el label numerado "0X — …" en TODO slide interior.
- Respeta acentos y puntuación española (Después, ¿Qué?, Precisión).
- Deja aire — máximo 2 frases de cuerpo por slide.
- Usa el mismo overlay oscuro en todos los slides del mismo carrusel.
No
- No uses fotos de stock ni imágenes de otras clínicas.
- No uses Gotham, Montserrat, Poppins ni ninguna otra fuente — sólo Inter.
- No pintes el título completo en verde.
- No centres los textos de los slides interiores (sólo portada y CTA van centrados).
- No uses colores fuera de la paleta (nada de turquesa, morado, amarillo fuerte).
- No llenes el slide de texto — si no cabe, córtalo.
- No uses emojis en los títulos.
07 — Copy checklistErrores ortográficos comunes
Esta lista es la que revisamos antes de publicar. Si ves alguno de estos errores, pásalo por corrección:
| Mal | Bien | Nota |
|---|---|---|
| Despues | Después | Siempre con tilde en la e. |
| Marcacion | Marcación | Tilde en la ó. |
| Precision | Precisión | Tilde en la ó. |
| Milimetrica | Milimétrica | Tilde en la é. |
| Que es? | ¿Qué es? | Abrir con ¿, tilde en Qué. |
| Como | Cómo | En preguntas va con tilde. |
| Cuando / Donde | Cuándo / Dónde | En preguntas van con tilde. |
| Trasplante capilar Medellin | Trasplante capilar Medellín | Medellín lleva tilde. |
| diseno | diseño | Siempre con ñ. |
| anatomia | anatomía | Tilde en la í. |
08 — Voz y tonoCómo hablamos
- Tono: profesional pero cercano. Ni formal-frío (no "estimado paciente") ni demasiado casual (no "amig@").
- Persona: segunda persona del singular — "tus cejas", "tu rostro", "lista para…". Dirigida directamente al lector.
- Promesa: naturalidad y precisión, no agresividad comercial. Evitamos palabras como "transformación total", "milagro", "impresionante".
- Longitud: frases cortas. Un slide interior tiene máximo 2 frases de cuerpo. Si no cabe, córtalo.
- Llamados a acción: "Agenda tu consulta", "Habla con nuestros especialistas", "Conoce tu plan personalizado". Nunca "compra", "reserva ya", "oferta limitada".