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 componentes Figma ya construidos (por reuso real)
| Canal | Medida | Qué cambia |
|---|---|---|
| Android Notification | 380×206 | Título + cuerpo (+ app name, hora). Para “Notificación + imagen”: imagen ≤1038×1038, <10 MB, JPG/PNG/GIF |
| 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 |
Estos son los componentes ya armados en Figma. El set completo de canales del brief (in-app modal/pantalla completa/slide up, bloque variable c/s CTA, notificación + imagen, banner secundario, SMS, WhatsApp) y sus límites de copy están en reglas-por-canal y
../rules/channels.json.
Tipos de In-app (Brandbook 2023 + Guía 2026)
Mismo contenido (título/cuerpo/CTA), distinta aparición:
- Modal (“InApp modular”): centrado, con overlay que oscurece el fondo. Gran llamado a la acción.
- Pantalla completa: ocupa toda la pantalla; para máxima atención.
- Slide up: deslizable arriba/abajo; avisos poco intrusivos (términos, cookies, info breve).
Límites de caracteres por canal: ver reglas-por-canal y ../rules/channels.json
(push 37/110, email asunto 40 / preheader 85, in-app título 40 / cuerpo 3 líneas / CTA 3 palabras, 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