Referencias visuales — WhatsApp iOS + Cloud API
Capturas reales de referencia para ajustar el mockup y la especificación visual que se deriva de ellas. Recopiladas el 27-09-2026.
Cómo se obtuvieron. Casi todas vienen de la documentación oficial de Meta
(developers.facebook.com/documentation/business-messaging/whatsapp/...). Esas capturas son de
WhatsApp iOS (colita abajo, botones con icono, fuente SF, hoja inferior iOS) y están a ~3x
(1190 px ≈ 393 pt). Meta devuelve error a curl, así que la página se renderizó con Playwright y la
imagen se descargó con la misma sesión. Las dos capturas completas del chat vienen de la ficha oficial
de WhatsApp en el App Store (iPhone 6,9").
Cómo leer los valores. Los hex están medidos por muestreo de píxeles (el color dominante de
una región) sobre estas capturas. Las medidas en pt salen de dividir entre 3. Son aproximaciones:
PNG comprimido, antialiasing y perfil de color. El texto indica la fuente de cada valor: [medido],
[observado] (se ve en la captura pero no tiene número exacto) o [estimado] (no está confirmado).
1. Capturas
| Archivo | Fuente | Qué muestra |
|---|---|---|
ios-chat-claro-appstore.png |
https://apps.apple.com/us/app/whatsapp-messenger/id310633997 (captura 6.9" Display 2) | Chat iOS completo en claro: header (chevron negro, avatar, nombre, "online", iconos vídeo y llamada en línea), aviso de cifrado amarillo, nota de voz, burbuja saliente con ticks azules, foto, ubicación en vivo con botón verde dentro de la burbuja |
ios-chat-oscuro-appstore.png |
ídem (captura 6.9" Display 4) | Chat iOS en oscuro: fondo casi negro con doodle, entrante gris neutro, saliente verde oscuro, ubicación, sticker y composer oscuro (+, píldora, cámara, micro) |
ios-composer-ticks-leido.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/mark-message-as-read | Saliente con ✓✓ azul iOS y composer iOS: "+", píldora blanca con borde e icono de sticker, cámara y micro, home indicator negro |
botones-respuesta-header-imagen.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-reply-buttons-messages | Reply buttons con header de imagen inset, body, footer gris, hora, y 2 botones dentro de la misma burbuja con icono ↩ verde |
botones-respuesta-tras-pulsar.png |
ídem (2.ª captura) | Estado tras pulsar: el botón usado queda gris/deshabilitado y la respuesta saliente cita el mensaje original (nombre, miniatura, extracto) |
template-imagen-url-llamada-quickreply.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/utility-templates/utility-templates | Plantilla de utilidad: header imagen, body con primera línea en negrita, footer, botones URL (↗ en caja), llamada (teléfono) y quick reply (↩) apilados dentro de la burbuja |
template-ver-todas-opciones-android.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/components | (Android, estructura) Plantilla con más de 3 botones: se ven 2 y luego "See all options" (icono de lista), que abre una hoja "All Options" con todos los botones y sus iconos |
lista-burbuja.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-list-messages | List message: header en negrita, body, footer gris, hora y botón con icono de lista dentro de la burbuja |
lista-hoja-inferior.png |
ídem (2.ª) | Hoja inferior iOS de la lista: título centrado (= texto del botón), X en círculo gris, títulos de sección en gris y negrita, filas título/descripción sin chevrons, separadores con sangría y el pie "Tap an item to select it" |
lista-respuesta-cita.png |
ídem (3.ª) | Respuesta a la lista: burbuja saliente con cita del mensaje + título y descripción de la fila elegida |
cta-url-header-imagen.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-cta-url-messages | CTA URL: todo en una burbuja (imagen inset, body, footer, hora, separador, botón ↗ "See Dates" verde); sin fila de dominio |
carrusel-plantilla-media-cards.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/marketing-templates/media-card-carousel-templates | Carrusel de plantilla: burbuja de body con hora y debajo tarjetas horizontales (imagen inset, texto 17 pt, botones ↩ y ↗); la siguiente tarjeta asoma; sin puntos |
carrusel-interactivo-quick-replies.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-media-carousel-messages | Carrusel interactivo: 3 tarjetas con título en negrita + descripción y 2 quick replies con icono |
carrusel-productos.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/marketing-templates/product-card-carousel-templates | Carrusel de productos: panel gris claro con título y precio, botón "View" |
imagen-caption.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/image-messages | Imagen inset con esquinas redondeadas, caption y hora a la derecha, botón de reenviar fuera |
video-caption.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/video-messages | Vídeo: play en círculo claro translúcido, icono de cámara con duración abajo a la izquierda, caption |
documento.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/document-messages | Documento: panel gris interno con icono de página "PDF", nombre en 2 líneas, "243 KB • html", descarga en círculo verde y caption |
audio-nota-voz.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/audio-messages | Nota de voz: triángulo de play gris sin círculo, punto verde de progreso, waveform, avatar con micro verde, duración y transcripción |
ubicacion.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/location-messages | Ubicación: mapa inset con pin rojo, nombre en regular 17 pt y dirección gris subrayada |
contacto.png |
https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/contacts-messages | Contacto: avatar genérico gris, nombre en negrita y chevron, hora, y dos botones lado a lado "Message" / "Save contact" |
2. Especificación visual (iOS 2025–2026)
Valores en pt/CSS px sobre un ancho de 393. Si #pantalla está escalada, se escala todo junto.
2.1 Paleta
| Token | Claro | Oscuro | Fuente |
|---|---|---|---|
| Fondo del chat (wall) | #f4f1ec (App Store #f6f1ea) |
#0a0a0a |
[medido] |
| Trazo del doodle | #e8e0d4 (tostado cálido, opaco) |
#1f2121 |
[medido] |
| Burbuja entrante | #ffffff |
#232626 (gris neutro, no azulado) |
[medido] |
| Burbuja saliente | #d9fdd3 |
#004f35 (App Store comprimido; revisar a ojo) |
[medido] |
| Texto de burbuja | #000000 |
#ffffff |
[observado] |
| Hora y footer (entrante) | #7f7f7f |
≈#8d9494 |
[medido] / [estimado] |
| Hora en saliente | #6b7d68 (gris verdoso) |
≈#8fb3a3 |
[medido] / [estimado] |
| ✓ / ✓✓ entregado | igual que la hora | igual que la hora | [observado] |
| ✓✓ leído | #027bfc (≈ azul iOS #007aff) |
#0a84ff [estimado] |
[medido] |
| Texto de botones de acción (quick reply, URL, lista, carrusel) | #408559 |
≈#21c063 [estimado] |
[medido] |
| Separador de botones | #cccccc (1 px físico ≈ 0,33 pt → CSS 0.5px o 1px rgba(0,0,0,.2)) |
rgba(255,255,255,.12) [estimado] |
[medido] |
| Header / barra del composer | #f4f3f2 (translúcido sobre el wall) |
header #121313, barra #232626 |
[medido] |
| Campo del composer | #ffffff con borde #d1d1d6 0,5 pt |
#393c3c sin borde |
[medido] / [observado] |
| Iconos del chrome (chevron, vídeo, llamada, +, cámara, micro) | #000000 (de línea) |
#ffffff |
[observado] |
| Aviso de cifrado | fondo #ffefd1, texto #1f1f1f, radio 10 |
≈#2a2a26 [estimado] |
[medido] |
| Hoja de lista: fondo | #ffffff |
≈#1c1c1e [estimado] |
[medido] |
| Hoja: título de sección / descripción | #757778 |
≈#8d8d93 [estimado] |
[medido] |
| Hoja: separadores | #c6c6c8 |
≈#38383a [estimado] |
[medido] |
| Hoja: botón cerrar | círculo #eeeeef, X #838388 |
≈#2c2c2e / #a0a0a5 |
[medido] / [estimado] |
| Velo detrás de la hoja | rgba(0,0,0,.26) |
rgba(0,0,0,.5) [estimado] |
[medido] |
| Panel interno de documento / producto | #f6f5f4 |
≈#1b1d1d [estimado] |
[medido] |
| Home indicator | #000000 (claro) |
#ffffff (oscuro) |
[observado] |
2.2 Burbuja
- Radio 18 pt en las cuatro esquinas. La colita va abajo: la entrante abajo a la izquierda y la saliente abajo a la derecha, como una curva que sale del borde inferior (se ve en todas las capturas de Meta). Solo la lleva la última burbuja de un grupo del mismo emisor. La esquina de arriba no se afila. [observado]
- Ancho máximo aproximado de 280–290 pt (~72 % de 393). Las plantillas y las burbujas con media usan ese ancho completo. [medido]
- Padding de texto aproximado: 7 pt arriba, 12 pt a izquierda y derecha, 6 pt abajo. [medido]
- Fuente del body: 17 pt SF Pro, interlineado de ~22 pt, negro. [medido]
- Hora: ~12 pt con números tabulares, abajo a la derecha. Con footer, la hora se alinea con la última línea del footer. Ticks de ~16×11 pt. [medido]
- Separación: ~2 pt entre burbujas del mismo emisor y ~8–10 pt al cambiar de emisor. [observado]
2.3 Media dentro de la burbuja (imagen, vídeo, ubicación y header de plantilla o interactivo)
- Inset, no a sangre: margen de 4 pt (arriba y a los lados) entre la media y el borde de la burbuja. Radio interior de ~13–14 pt. [medido]
- Con caption o body debajo, el texto sigue con el padding normal. Sin caption, la hora va sobre la imagen en blanco con una sombra suave. [observado]
- Proporción del header: en plantillas se recorta a ~1,91:1 (utility, CTA). En interactivos se mantiene la del archivo, hasta cuadrado (reply buttons). [observado]
- Vídeo: play centrado en un círculo de 50 pt
rgba(230,230,230,.8)con triángulo gris oscuro. Abajo a la izquierda, icono de cámara y duración en blanco de 13 pt. [observado]
2.4 Botones de plantilla y botones interactivos (reply buttons)
En iOS se pintan igual: van dentro de la misma burbuja, no en una tarjeta aparte.
- Bajo el body/footer/hora va un separador a todo el ancho de la burbuja, de borde a borde y sin sangría. [medido]
- Cada botón ocupa una fila de ~43–44 pt, con el contenido centrado. Entre botones hay otro separador a todo el ancho. [medido]
- Texto de 17 pt regular en
#408559, con un icono de ~20 pt a la izquierda y 8 pt de hueco. [medido]- Quick reply → flecha de responder ↩ en línea (arco curvo).
- URL → cuadrado redondeado con flecha ↗ dentro.
- Llamada → auricular en línea.
- Lista → icono ≡ con puntos (tres puntos + tres líneas).
- "Ver todas las opciones" → icono de lista.
- Con más de 3 botones se muestran 2 y una tercera fila "Ver todas las opciones" sin contador. Esa fila abre una hoja "Todas las opciones" con todos los botones (icono + texto, alineados a la izquierda) y un separador entre URL/llamada y quick replies. No se despliegan en línea. [observado, Android; mismo comportamiento documentado por Meta]
- Tras pulsar un quick reply, esa fila queda en gris (
#b0b0b0, sin interacción). [observado] - La respuesta saliente cita el mensaje: un bloque interno con radio de 8 pt, fondo
rgba(0,0,0,.04)sobre verde (#d5f3cf), barra izquierda de 4 pt de color, nombre del negocio en semibold 15 pt, extracto de 1–3 líneas en 15 pt gris y miniatura a la derecha si hay media. Debajo va el texto del botón en 17 pt. [medido/observado]
2.5 Plantilla (template)
Orden: header → body → footer → hora → separador → botones, en una sola burbuja de 18 pt con colita.
- Header de texto: 17 pt semibold, negro.
- Body: 17 pt regular. Admite
*negrita*. - Footer: 15 pt gris
#7f7f7f, 4 pt por debajo del body. - Hora a la derecha, en la línea del footer.
- Header de documento: el mismo panel gris interno que el mensaje de documento (§2.9).
2.6 Lista
- Burbuja: header 17 pt semibold, body 17 pt, footer 15 pt gris, hora, separador y botón con icono ≡ y el texto
botonen verde. Todo dentro de la burbuja. - Hoja inferior:
- Panel blanco, esquinas superiores de ~12 pt y altura según el contenido.
- Cabecera de ~56 pt con el título centrado = texto del botón, en 17 pt semibold.
- A la derecha, un círculo de 30 pt
#eeeeefcon una X de 13 pt#838388. - Título de sección: 15 pt semibold
#757778, con 16 pt de sangría y ~24 pt de aire encima. - Fila: título 17 pt negro y descripción 15 pt
#757778. Padding vertical de ~12 pt (~76 pt de alto con descripción). Sin chevron ni radio en iOS. - Separador de 0,33 pt
#c6c6c8con 16 pt de sangría izquierda que llega al borde derecho. - Pie centrado "Toca un elemento para seleccionarlo" en 15 pt gris, con el home indicator debajo.
- Velo
rgba(0,0,0,.26).
2.7 CTA URL
- Una sola burbuja: media inset opcional, body, footer, hora, separador y botón ↗ + etiqueta en verde.
- No hay fila de dominio ni texto azul.
2.8 Carrusel (plantilla media card o interactivo)
- Burbuja de body normal (con hora y colita) y, debajo, tarjetas en scroll horizontal.
- Tarjeta de ~287 pt de ancho (~73 %). La primera se alinea con el borde izquierdo de las burbujas, las demás se desbordan hasta el borde de la pantalla y la siguiente asoma. Separación de ~4 pt. [medido]
- Tarjeta blanca de 18 pt de radio, sin colita y sin hora. Imagen inset de 4 pt, radio de ~12 pt y proporción ~1,7:1. [medido]
- Texto de la tarjeta en 17 pt. En interactivo: título semibold 17 pt + descripción 17 pt.
- Botones como en §2.4: separador a todo el ancho, filas de 44 pt con icono ↩/↗ en verde.
- Sin puntos de paginación. [observado]
- Producto: panel
#f6f5f4con título 17 pt semibold y precio 15 pt gris; botón "Ver".
2.9 Otros tipos
- Documento:
- Panel interno
#f6f5f4con radio de 10 pt y 4 pt de inset. - Dentro: icono de página blanca de 30×38 pt con la extensión en gris de 9 pt, nombre de archivo en 17 pt (hasta 2 líneas) y "243 KB • pdf" en 15 pt gris.
- A la derecha, descarga en círculo de 30 pt con borde verde
#4caf6ay flecha verde. - Debajo, caption de 17 pt con la hora.
- Panel interno
- Nota de voz:
- Triángulo de play gris
#6b6b6bde 22 pt sin círculo. - Waveform de barras de 2 pt
#b3b3b3con un punto verde de progreso de 12 pt al inicio. - Duración en 13 pt gris debajo de la waveform.
- A la derecha, avatar de 44 pt con micro verde en la esquina inferior izquierda.
- Hora abajo a la derecha.
- Triángulo de play gris
- Ubicación:
- Mapa inset de 4 pt, radio de 13 pt y ~155 pt de alto.
- Nombre en 17 pt regular.
- Dirección en 15 pt gris subrayada.
- Hora en una línea propia a la derecha.
- Contacto:
- Avatar genérico de 44 pt (degradado gris con silueta blanca), nombre en 17 pt semibold y chevron
›gris. - Hora a la derecha.
- Separador y dos botones lado a lado "Mensaje" | "Guardar contacto" (o uno solo, "Invitar a WhatsApp"), en verde, 17 pt y 44 pt de alto, con un separador vertical entre ellos.
- No muestra teléfono, email ni empresa dentro de la burbuja: eso aparece al abrir el perfil.
- Avatar genérico de 44 pt (degradado gris con silueta blanca), nombre en 17 pt semibold y chevron
- Sticker: sin burbuja. La hora va en una pastilla
rgba(0,0,0,.35)con texto blanco debajo, a la derecha. [observado en oscuro]
2.10 Chrome iOS
- Header (~44 pt bajo la status bar):
- Chevron
‹negro de ~22 pt, sin texto. - Avatar de 36 pt.
- Nombre en 17 pt semibold y subtítulo ("en línea") en 13 pt gris.
- A la derecha, iconos de línea: videocámara de 28 pt y teléfono de 24 pt, en negro con ~0,6 de opacidad o gris
#8e8e93. En oscuro, blancos. - Fondo
#f4f3f2, sin borde visible.
- Chevron
- Verificado: insignia azul de Meta Verified junto al nombre. Tono
#1d9bf0–#0866ff[estimado, sin captura iOS de negocio verificado]. - Aviso de cifrado (primer elemento del chat):
- Tarjeta centrada de ~90 % de ancho, fondo
#ffefd1, radio de 10 pt y padding de 6×12 pt. - Texto centrado de 13 pt con candado inicial y "Más información" en negrita.
- En chats de negocio el texto es el de negocio: "Este negocio usa un servicio seguro de Meta…". [observado en Android; en iOS se asume el mismo texto]
- Tarjeta centrada de ~90 % de ancho, fondo
- Separador de fecha "Hoy": pastilla centrada de 12–13 pt semibold, fondo blanco translúcido (
rgba(255,255,255,.9)) con sombra de 0,5 pt, y 4×10 pt de padding. [estimado a partir de capturas Android/Web; sin captura iOS] - Composer:
- Barra
#f4f3f2, con el padding inferior del safe area (34 pt) bajo el home indicator. - "+" negro de 24 pt.
- Píldora blanca de 36 pt de alto y radio de 18 pt, con borde de 0,5 pt
#d1d1d6, icono de sticker dentro a la derecha y sin placeholder visible. - Después, cámara y micro en negro, fuera de la píldora.
- El botón de enviar (círculo verde con flecha) solo aparece al escribir y sustituye a cámara y micro.
- Barra
- Home indicator: negro en claro y blanco en oscuro, de 134×5 pt, encima de la barra del composer.
Antes de reutilizar esto fuera del equipo, valida que las capturas de Meta y de Apple solo se usan como referencia interna (tienen derechos de sus autores) y revisa a ojo en un iPhone real los hex de modo oscuro marcados como [estimado].