Kueski Design System (KDS)

Fuente: ../raw/figma/ (export de Figma del equipo Quantiva). Tokens estructurados en ../rules/design-tokens.json.

Regla de oro: Kueski ya tiene su Design System completo (KDS), publicado en 8 librerías de equipo. No se reconstruye — se referencia. Logos, íconos e ilustraciones se usan siempre desde las instancias oficiales de KDS.

Las 8 librerías KDS

Foundations · Components V.1.0 · Icons · Logos · Illustrations · Photos · Emails · Figma tooling.

Colores (tokens reales)

TokenHex
background/brand#0069F1
ThemeLight/Primary/Main#0075FF
background/brand subtle#E7F3FF
text and icons/primary#141C22
text and icons/brand on subtle#0051CB
navy de banner (sin token)#00164C
siempre blanco#FFFFFF

Acento de marca: azul #0075FF/#0069F1 + el verde lima del logo (gradiente azul→verde).

Paleta oficial de comunicaciones (Brandbook 2023)

Para piezas de comunicación (email, push, in-app, banners) el Brandbook define esta paleta. Es complementaria a los tokens KDS de arriba; donde difieren, en comunicaciones usar estos.

  • Primario: K-Blue light #3391FF · K-Blue #0075FF · K-Blue dark #005ECC.
  • Semánticos: Información #0075FF · Error #FF5252 · Precaución #FFAB40 · Positivo #54C08B.
  • Texto e iconos: estándar #282C38 · secundario #4F5870 · blanco #FFFFFF.
  • Neutrales: fondo (Gris 100) #F5F6FB · paper #D7DFE3 · divisores #BEC5D8 · gris #8994AF.
  • Secundaria (expresión): Lavanda #9870FF · Cyan #18FFFF · Naranja #FF6E40 · Verde #00FF84 · Rosa #FF4080 · Ámbar #FFD740 (con sus tonos 100/300/500 en design-tokens.json → brandbookComms2023).

Reglas de color:

  • Evita el negro puro (#000000) para texto: usa Gris 900 #282C38.
  • Colores de texto permitidos: #0075FF, #FFFFFF, #282C38, #F5F6FB.
  • Color con propósito: empieza en blanco/negro e introduce el azul primario solo en elementos interactivos (enlaces, botones).

⚠️ Divergencia conocida: los tokens KDS del export Quantiva usan #0069F1 (background/brand) y #141C22 (texto); el Brandbook 2023 de comunicaciones usa #0075FF y #282C38. Ambos conviven: KDS = app en uso; Brandbook = piezas de comunicación.

Tipografía

Inter Variable. Pesos: regular 400 · semibold 600 · extrabold 800. Escala: headline-2 24/32 (-0.12) · body-1 16/24 · body-2 14/20.

Spacing

4 · 8 · 12 · 16 · 20 · 32 (px).

Territorio fotográfico (Brandbook 2023)

Qué fotografiamos: personas de 18–45 años, fenotipos de la mayoría de la población mexicana, diversidad de tonos de piel/cuerpos/orientación; actitudes naturales, en movimiento, sin estrés financiero; escenas cotidianas que comuniquen tranquilidad financiera y uso del producto (teléfono/laptop). Cómo fotografiamos: buena composición y calidad técnica; el color de marca (K-Blue) presente en objeto, fondo o vestuario; colores saturados, buen contraste y buena iluminación; se permite recortar fotos sobre los degradados de la paleta. Logos, íconos, ilustraciones y fotos: siempre desde KDS.

País

Kueski opera SOLO en México. (En el spec del banner aparecen CO/CL, pero eran pruebas — ignorar; no son mercados reales.) Producto de cara a usuario: “Préstamo Kueski” y “Kueski Pay” (ver productos-kueski · terminologia). Moneda MXN sin escribir “MXN”. Headline canónico del banner: “<n>% de interés en tu primer Préstamo”.

Relacionado: formatos-creativos · productos-kueski · terminologia