Acceso protegido

Documentación privada de Rimac. Ingresa el código para continuar.

Rimac Mailings · Design System
Simulador
Design System · Mailings Rimac

Sistema de Mailings

Documentación de autoatención para construir los correos de Rimac: qué componentes existen, cómo se combinan y con qué reglas de contenido. El equipo arma sus correos desde acá, sin decidir caso por caso.

Cada componente se documenta con el modelo del equipo Visual · Uso · Contenido: qué es y cómo se ve, cuándo usarlo, y qué copy admite. La estructura solo se elige entre variantes válidas; el contenido solo se llena dentro de límites.

Componentes

El sistema arranca con el Header. El resto llega en las próximas iteraciones.

HeaderDisponible
Banda superior · 6 combinaciones.
HeroPronto
Título, bajada, CTA e imagen.

Cómo usar esta doc

  1. Elige el componente en la barra lateral (hoy: Header).
  2. Entra a cada variante para ver su detalle y su Do / Don't.
  3. Respeta las reglas de contenido al escribir el copy (límites por zona).
  4. Para armar y previsualizar en vivo, usa el simulador email-simulator.html. Esta página es la referencia, no el editor.
Componente · estable (cerrado 10-jul-2026)

Header

La banda superior de todo correo de Rimac. El sistema define 6 combinaciones válidas: cada correo usa una, no se inventan headers nuevos.

El header resuelve identidad (logo Rimac), jerarquía de marca (segmento VIP), alianzas (co-branding) y refuerzo de producto (tagline). Sus reglas de combinación garantizan consistencia en los ~360 correos del sistema.

Páginas del componente

Header

Visual

Variantes

Las 6 combinaciones válidas. Cada una tiene su propia página con preview en vivo y su Do / Don't.

Header

Visual

Responsive

El header mantiene su estructura en los dos anchos del sistema: 362px (mobile, ancho dominante en Gmail app) y 600px (desktop). El logo no reescala; cambia el aire lateral.

362px · mobile

600px · desktop

Header

Visual

Dark mode

Muchos usuarios leen el correo con el cliente en modo oscuro. El logo rojo pierde contraste sobre fondo negro, por eso el sistema invierte el wordmark a blanco en dark mode — así se mantiene legible sin depender del color de marca sobre un fondo hostil. (Cambia el tema arriba a la derecha para verlo aquí mismo.)

Por qué importa (y su límite): Outlook desktop no respeta el CSS de dark mode. Por eso el baseline del componente es light con contraste ≥ 4.5:1; el dark mode es una mejora progresiva, no la base. Nunca se confía la legibilidad solo al modo oscuro.
Componente · haciendo

Hero

Título, bajada, CTA e imagen de fondo. Se documentará con el mismo modelo Visual · Uso · Contenido cuando cierre su set de variantes.