Design system completo de Kidiverso (kidiverso.mx) — parque infantil temático espacial en San Luis Potosí. Incluye tokens de color, tipografía, personajes con nombres, assets, tono de comunicación y especificaciones de componentes. USAR SIEMPRE que se genere o revise código frontend, landing pages, materiales gráficos, textos de marketing, publicaciones en redes, o cualquier entregable visual/digital de Kidiverso. Activar también cuando se mencione: Kidiverso, campamento, fiesta infantil, parque, personajes de Kidiverso, Astro Kid, Lyra, Nova, Onix, Orbit, Pax, nave Kidiverso, diseño del parque, landing Kidiverso, o cualquier tarea relacionada con la marca Kidiverso.
Leer este archivo antes de generar cualquier código, diseño o contenido para Kidiverso. Todos los valores están alineados con la identidad de marca oficial (v1.0 · Marzo 2026).
Kidiverso es un parque infantil temático espacial/galáctico ubicado en San Luis Potosí, México. Dirigido a niños de 1 a 12 años y sus familias. El universo de marca gira en torno a la exploración espacial, planetas, naves y criaturas alienígenas amigables.
Ubicación: Carretera a Guadalajara 1235, Lomas del Tecnológico, 78215 San Luis, S.L.P. Web: kidiverso.mx Contacto: [email protected] · Tel: 444 860 67 59 · WhatsApp: 440 186 4030 Horarios: Mar–Vie 1:00–8:00 PM · Sáb–Dom 2:00–8:00 PM · Lunes: exclusivo fiestas
| Atributo | Descripción |
|---|
| Personalidad | Divertido, aventurero, cálido, seguro |
| Tono | Entusiasta pero no infantilizado. Habla a los papás con cercanía y a los niños con emoción |
| Vocabulario temático | Misión, galaxia, explorador, tripulación, despegue, órbita, astronauta, universo, aventura |
| Evitar | Lenguaje aburrido/corporativo, diminutivos excesivos, tono condescendiente |
Ejemplos de copy on-brand:
Naming de áreas del parque:
| Rol | Fuente | Notas |
|---|---|---|
| Display / Títulos | Fredoka | Redondeada, divertida, muy on-brand |
| Body / UI | Nunito | Legible, cálida, complementa a Fredoka |
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
| Nombre | Hex | Uso |
|---|---|---|
| Purple | #341C77 | Color primario, fondos hero, headers, nav |
| Purple Mid | #5B3FA0 | Gradientes, acentos, hover states |
| Purple Light | #8B6EC7 | Bordes activos, badges, fondos suaves |
| Purple Pale | #F0EBFF | Fondos claros, cards en tema light |
| Cyan | #6EC1E4 | Acentos informativos, links, chips |
| Cyan Light | #C2E8F7 | Fondos informativos, badges light |
| Green | #61CE70 | Éxito, confirmación, WhatsApp CTAs |
| Green Light | #D4F5D8 | Fondos de éxito |
| Orange | #FFBC7D | Acentos cálidos, texto destacado en hero |
| Orange Dark | #F97316 | CTAs principales, botones de acción |
| Pink | #E91E8C | Acentos vibrantes, botones secundarios, badges |
| Pink Light | #F1BDED | Fondos suaves pink |
:root {
/* Marca */
--purple: #341C77;
--purple-mid: #5B3FA0;
--purple-light: #8B6EC7;
--purple-pale: #F0EBFF;
--cyan: #6EC1E4;
--cyan-light: #C2E8F7;
--green: #61CE70;
--green-light: #D4F5D8;
--orange: #FFBC7D;
--orange-dark: #F97316;
--pink: #E91E8C;
--pink-light: #F1BDED;
/* UI */
--white: #FFFFFF;
--gray-bg: #F7F5FF;
--gray-text: #5A5270;
--gray-light: #E8E4F4;
--dark: #1E1135;
/* Gradientes frecuentes */
--gradient-hero: linear-gradient(135deg, #341C77 0%, #5B2D8E 50%, #E91E8C 100%);
--gradient-cta: linear-gradient(135deg, #FBBF24 0%, #F97316 100%);
--gradient-space: linear-gradient(175deg, #1A0A3E 0%, #2D1854 30%, #5B2D8E 60%, #E91E8C 100%);
}
--gradient-hero o --gradient-space, texto blanco--white o --gray-bg, texto --dark--gradient-cta (amarillo→naranja), texto --purple (oscuro)#25D366, texto blanco--cyan sobre fondos oscuros, --purple sobre fondos claros--pink para bordes y texto de error| Elemento | Font | Size | Weight | Color (light) | Color (dark) |
|---|---|---|---|---|---|
| H1 | Fredoka | clamp(2.2rem, 6vw, 3.8rem) | 700 | --dark | white |
| H2 / Section Title | Fredoka | clamp(1.6rem, 4vw, 2.5rem) | 700 | --dark | white |
| H3 / Card Title | Fredoka | 1.1rem | 600 | --purple | --orange |
| Body | Nunito | 1rem (16px) | 400 | --gray-text | rgba(255,255,255,0.8) |
| Small / Labels | Nunito | 0.85rem | 700 | --gray-text | rgba(255,255,255,0.6) |
| Badge / Chip | Nunito | 0.82–0.9rem | 800 | white | white |
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
--sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
--radius-sm: 12px; /* Inputs, small cards */
--radius-md: 16px; /* Cards, panels */
--radius-lg: 20px; /* Cards grandes, containers */
--radius-xl: 28px; /* Form containers, hero elements */
--radius-full: 50px; /* Botones, badges, chips, pills */
Kidiverso usa radios generosos y redondeados — nada tiene esquinas duras.
--shadow-card: 0 4px 16px rgba(52, 28, 119, 0.06);
--shadow-btn: 0 6px 25px rgba(249, 115, 22, 0.35);
--shadow-hover: 0 10px 35px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 40px rgba(110, 193, 228, 0.3);
Tipografía: Fredoka, 700, 1rem–1.2rem Padding: 0.9rem 2.5rem Border-radius: 50–60px (pill shape) Transición: all 0.25s ease Hover: translateY(-3px) + shadow más intenso
| Variante | Fondo | Color | Sombra |
|---|---|---|---|
| Primary (CTA) | --gradient-cta | --purple | --shadow-btn |
| Primary White | white | --purple | --shadow-hover |
#25D366 | white | 0 6px 25px rgba(37,211,102,0.35) | |
| Pink / Secondary | --pink | white | 0 4px 14px rgba(233,30,140,0.3) |
| Ghost | rgba(255,255,255,0.15) | white | none, border 1px solid rgba(255,255,255,0.3) |