Familias de núcleo, marketing e invitación
Del hero al RSVP, cada uno observado en el producto real
Observados entre marfil, papel, tinta, pizarra, bruma y dorado
Gratuito, Premium Mensual, Premium Anual
Casamiento.App es un SaaS argentino de casamientos. Una pareja se registra, completa el evento desde un panel y la página se publica sola: una imagen de portada con sus nombres y la fecha, una cuenta regresiva en vivo, tarjetas de ceremonia y fiesta con enlaces al mapa, la modalidad de regalos, la galería, una canción. No hay una plantilla que desarmar ni un constructor que aprender: los datos son la página.
Lo que la separa de una plantilla de sitio de boda es la segunda mitad: la lista de invitados. Los invitados se escriben o se importan desde un CSV, y cada uno recibe un enlace personal con un token, así el formulario de RSVP llega con su nombre ya cargado y es la plataforma, no la pareja, la que decide cuántos lugares tiene. La lista confirmada vuelve a salir como PDF o CSV, y en la puerta un código QR hace el check-in.
Se vende freemium (Plan Gratuito, Premium Mensual, Premium Anual), cobrado en ARS para Argentina y USD para el resto de LATAM, y el plan gratuito es gratuito de verdad: una landing de por vida con el tema "Moderno", con confirmaciones de RSVP ilimitadas. Cada texto está en español rioplatense con voseo, y todo corre sobre WordPress y Elementor. Esa última parte es el punto: es nuestra propia práctica de WordPress, sobre nuestro propio producto, con nuestro propio nombre en la cola de soporte.
Cada ítem de abajo es un bloque que se entrega, tomado de la propia lista de componentes y las tablas de planes del sistema de diseño; no un roadmap.
La página que los invitados realmente abren: un solo scroll que responde cada pregunta que de otro modo harían por mensaje.
Dos modos, porque una boda no es una lista de correo: un enlace personal por invitado, o un formulario abierto cuando la pareja todavía no tiene lista.
La lista es el producto. Se arma antes del evento, se exporta para el salón y se escanea esa noche.
Tres modos detrás de un solo interruptor, porque cómo las parejas piden regalos cambia por familia y por país.
casamiento.app salió antes de tener un sistema escrito. El que se documenta aquí se reconstruyó después (colores muestreados píxel a píxel de dos capturas de página completa, tamaños medidos sobre una captura a 2×, textos leídos de las páginas en vivo) y luego se ajustó hasta pasar WCAG 2.1 AA. Lo que sigue es el resultado: una sola familia serif haciendo casi todo el trabajo, dos fondos que se alternan a lo largo de la página, y una lista corta de reglas que evitan que una paleta cálida falle contraste en silencio.
#FCF8F3
El fondo cálido: chrome de marketing y papel de la invitación. #F8F3EF baja un tono para las bandas de CTA; #F1E9DF es lo más profundo que llega.
#F8F8F8
El fondo neutro de sección, con tarjetas #FFFFFF encima. Las secciones alternan marfil y papel para que las líneas finas, y no las cajas, hagan la división.
#12100F
Casi negro cálido para los títulos: 17–19:1 sobre ambos fondos. El cuerpo baja a #333333 a 11.8:1; los placeholders se quedan en #5F5F5F en lugar del valor por defecto del navegador.
#3C4860
El único acento cromático: botones primarios y enlaces. #2C3A4F es a la vez el color de título de la invitación y el hover del botón, así el hover se lee como el propio azul de la página oscureciéndose.
#9FC0D6
Tomado del arte de hojas en acuarela. #EDF3F7 tiñe el panel de la cuenta regresiva y nada más: existe para que la cuenta regresiva pueda distinguirse de la página sin inventar un tercer fondo.
#C8952A
Solo ornamento y contextos premium: la corona de laurel alrededor de la canción de la pareja, las marcas de verificación en las listas de precios. Mide 2.7:1, así que es un relleno, nunca una palabra.
#8F6B18
El dorado cuando tiene que leerse: 4.9:1. El badge "Más Popular" es este sobre #F6EBD2 con una línea fina #A87E1F: tres tokens para decir una cosa de forma legible.
Estos son los colores de Casamiento.App, impresos aquí como documentación. Nada en werun.dev sale de ellos.
Display de 68px a peso 400 y tracking cero, títulos de sección de 44px, cuerpo de 17px con interlineado de 1.7. Nada condensado, nada en itálica. El único uso en negrita del sistema es el nombre del salón de 28px en la invitación. La identificación es una lectura informada de las letras, no una especificación confirmada.
La sans que lleva las microetiquetas a 14px con tracking de .14em, subida desde 12px/.18em porque la altura de x pequeña de Cormorant hace que las microetiquetas en mayúsculas sean difíciles de leer al tamaño menor. Es un suplente: la tipografía real de las etiquetas era demasiado chica en la captura para identificarla.
Nombradas, no cargadas: esta página compone todas las familias de arriba con la tipografía propia de werun.dev.
#C8952A mide 2.7:1 sobre marfil. Rellena la corona de laurel y las marcas de verificación de precios y se detiene ahí. Los iconos y los bordes bajan a #A87E1F (3.7:1) y el texto dorado a #8F6B18 (4.9:1). La regla está escrita porque la corona es el gesto más cálido de la marca y la tentación de componer un precio en ella nunca se va.
De #E7E7E7 a #C9C9C9 son solo decorativos: filas de FAQ, listas del pie, reglas de pasos. Cualquier cosa interactiva (campos, botones outline, opciones de RSVP no seleccionadas) usa #8A8A8A, que supera el piso de 3:1 de WCAG 1.4.11 para contraste no textual. Dos grises que a la vista parecen iguales hacen trabajos distintos, así que son los nombres de los tokens los que llevan la diferencia y no la muestra.
Marfil y papel se alternan a lo largo de la página, y una sección se separa cambiando de fondo, no con una caja, un borde o una sombra. No hay un tercer fondo ni un gradiente usado como decoración en ningún lado; el único gradiente del sistema es la capa de protección bajo el texto sobre fotografía.
El texto blanco nunca va sobre una foto desnuda. Va sobre un gradiente negro de 0.50 → 0.62 que mantiene el blanco por encima de 6.9:1 sobre imágenes de tono medio, y los botones sobre foto llevan su propio velo rgba(18,16,15,.45) detrás de la etiqueta. El texto del hero es blanco a opacidad plena, nunca desvanecido con alfa: desvanecerlo es la forma más rápida de perder el ratio que la capa se añadió para comprar.
casamiento.app estaba en producción antes de tener un sistema escrito. Los tokens se muestrearon píxel a píxel de dos capturas de página completa, con las páginas en vivo leídas como texto para el copy literal: sin archivo de Figma, sin CSS, sin binarios de fuentes. Escribirlo es lo que convirtió un conjunto de páginas de Elementor en algo que una segunda persona puede extender sin adivinar.
27 componentes, y cada familia corresponde a un bloque observado en las capturas o en las páginas en vivo. Exactamente tres son adiciones: Icon, un envoltorio fino que normaliza tamaño y color sobre Font Awesome; y Eyebrow y SectionHeading, extraídos de un patrón de etiqueta más título que se repetía en cada sección en lugar de declararse otra vez cada vez.
Cada título, párrafo, nombre de salón, ítem del itinerario y campo bancario es contenido que carga la pareja; lo que está escrito en la plantilla es texto de ejemplo. Más de trece huecos de imagen llevan IDs estables para que una imagen pueda recortarse de nuevo sin perder su lugar, y el modo de regalos, el modo de RSVP, el límite de acompañantes y el patrón decorativo son todos props, no bifurcaciones de la plantilla.
El panel de la pareja aparece en el material fuente solo como una miniatura dentro de una tarjeta del blog, así que se documenta como superficie y se deja sin construir. Los ornamentos de hojas en acuarela cabalgan sobre la foto de portada y no se pudieron recortar limpios: en lugar de redibujarlos, Countdown toma rutas opcionales leafLeft y leafRight y no renderiza nada sin ellas.
