Sistema de diseño
Guía de estilo Kimdo
Referencia viva de la identidad visual de Kimdo: paleta oficial, jerarquía tipográfica, componentes base y reglas de uso para mantener coherencia en todo el sitio web.
Paleta cromática
Colores oficiales de marca con su token de uso. Cada muestra corresponde exactamente a la variable definida en el sistema.
Rojo Kimdo
#E5231B
bg-primary / text-primary
Color principal de marca. Úsalo en CTAs, acentos y detalles. Nunca en bloques grandes de texto.
Negro
#000000
text-foreground / bg-foreground
Titulares y texto principal. Base de la jerarquía tipográfica.
Gris corporativo
#97999B
bg-brand-gray
Elementos secundarios, iconografía suave y separadores destacados.
Texto suave
#4A4A4C
text-ink-soft
Párrafos y descripciones. Mejor legibilidad que el negro puro en textos largos.
Superficie
#F7F7F8
bg-surface
Fondo de secciones alternas y tarjetas suaves.
Superficie alterna
#EEEEF0
bg-surface-alt
Estados hover, placeholders y bloques anidados.
Borde
#E2E2E4
border-border
Único borde permitido en tarjetas y divisores.
Verde WhatsApp
#25D366
bg-whatsapp
Uso exclusivo del botón flotante y enlaces de WhatsApp.
Tipografía
Nunito Sans es la tipografía principal en todos sus pesos (Black Oblique = peso 900 en itálica). Lora italic se reserva para citas editoriales.
text-display · 4xl–7xl
Titular principal
text-display · 3xl–4xl
Título de sección
font-bold · xl
Subtítulo de tarjeta
eyebrow
Etiqueta superior
text-base · ink-soft
Texto de párrafo para descripciones y contenido general del sitio.
text-sm · ink-soft
Texto auxiliar, notas y pies de tarjeta.
Lora italic · editorial
“Citas y frases editoriales.”
Botones y enlaces
Todos los botones son pill (rounded-full) con animación sutil de elevación al hover.
Tarjetas y superficies
Patrones base reutilizables: tarjeta con borde, tarjeta sobre superficie y bloque destacado en negro.
Tarjeta
Borde + fondo card
Uso general en grids de producto, listados y complementos.
Superficie
Fondo surface
Para secciones alternas y bloques informativos suaves.
Destacado
Bloque oscuro
Para CTAs de cierre y datos que necesitan máximo contraste.
Reglas de uso
Cuatro principios que mantienen la coherencia visual en cualquier página nueva.
Usa siempre tokens semánticos
Nunca escribas colores fijos como text-white o bg-[#fff]. Usa bg-primary, text-foreground, bg-surface, border-border.
Una sola tipografía
Nunito Sans (alternativa libre tipo Avenir LT) para todo el sitio. Lora italic solo para citas o piezas editoriales. Nunca otra fuente.
Radios y espaciado
Tarjetas rounded-2xl, botones rounded-full. Secciones con py-16 a py-24 y contenedor max-w-7xl px-5 lg:px-8.
Rojo con moderación
El rojo Kimdo acentúa: un CTA por sección, eyebrows y detalles. El resto respira en blanco y gris.
Enlaces con línea animada
Todo texto que navegue a otra parte del sitio usa la clase link-underline: barra roja de 2px con animación snap más lenta al pasar el cursor.