Formatos creativos (componentes KDS)
Fuente: ../raw/figma/components-built.md + component-candidates.md + banner-spec.json.
Estos son los formatos que concentran casi toda la producción. Cada uno es un componente
con layout fijo; lo único que cambia es el texto (auto-layout “hug” → el alto se ajusta solo).
Nunca tratar dos tamaños del mismo canal como componentes distintos: es el mismo, con texto de
distinto largo.
Los 6 canales (por reuso real)
| Canal | Medida | Qué cambia |
|---|---|---|
| Android Notification | 380×206 | Título + cuerpo (+ app name, hora) |
| Email subject & preheader | 808×93 | Asunto + preheader |
| In-app (modal) | 380×558 | Título, cuerpo, CTA, imagen |
| WhatsApp (chat mockup) | 412×auto | Texto del mensaje |
| Banner social | 800×400 | % + headline + foto |
| Hero banner | 600×200 | Headline + fondo |
Límites de caracteres por canal: ver reglas-por-canal y ../rules/channels.json
(push 37/110, email asunto 40 / preheader 85, etc.).
Anatomía del banner social (800×400)
Fondo: gradiente azul Kueski → verde + texturas decorativas (no tocar).
- Porcentaje: Inter Variable ExtraBold 42px, color
#00164C, en x=54 y=103. Tamaño fijo (1–2 dígitos). - “de interés”: Inter ExtraBold 45px, blanco. Si el % es de 2 dígitos, se corre +28px para no encimar.
- Línea de producto: “en tu primer Préstamo” (Inter, el producto en ExtraBold),
#00164C, x=54 y=170. - Foto: rectángulo con IMAGE fill (se reemplaza, no se edita el layout).
- Logo: instancia oficial KDS • Logos (no tocar).
Headline canónico: “<n>% de interés en tu primer Préstamo”.
Headlines alternativos de ejemplo: “Cero estrés, cero intereses” · “Cuando el río suena… es porque intereses no lleva”.
Principio de diseño
Base fija + contenido que crece. La estructura, paddings, tipografía, colores y logo NO cambian; solo el texto. Por eso todo va con auto-layout “Hug contents” en el eje que crece.
Relacionado: design-system · reglas-por-canal · emojis