═══════════════════════════════════════════════════════════════════════════════ NODO UI DESIGN SYSTEM - GUÍA DE ESTILO INTEGRAL Versión: 1.1 | Fecha: Febrero 2026 Alcance: Sistema de Autenticación, Layout Híbrido, Componentes UI y Branding Stack Técnico: React + Tailwind CSS + Material UI ═══════════════════════════════════════════════════════════════════════════════ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ 1. PALETA DE COLORES ║ ╚═══════════════════════════════════════════════════════════════════════════╝ ┌─ COLORES DE MARCA (Brand Colors) ─────────────────────────────────────────┐ CYAN NODO (Acción Principal / Main Brand) ├─ Primary: #3bb1bd (rgb(59, 177, 189)) ├─ Hover: #2fa0ac (rgb(47, 160, 172)) - 10% más oscuro para interactividad └─ Background: #3bb1bd - Usado en botones primarios y acentos fuertes INDIGO / AZUL (Acentos y Navegación) ├─ Link Text: #474ddc - Enlaces de texto simples ├─ Link Hover: Darkness/Underline decoration └─ Focus Ring: rgba(59, 177, 189, 0.5) - Anillo de enfoque para accesibilidad AZUL CORPORATIVO (Jerarquía Tipográfica) ├─ Heading Dark: #233b58 (rgb(35, 59, 88)) - Títulos, botones secundarios ├─ Body Text: #363565 (rgb(54, 53, 101)) - Texto principal de inputs y parrafos └─ Muted Text: #a4a4a4 - Placeholders, etiquetas secundarias └───────────────────────────────────────────────────────────────────────────┘ ┌─ COLORES DE INTERFAZ Y ESTADOS (UI Systems) ──────────────────────────────┐ SUPERFICIES (Backgrounds) ├─ Global Page: #ffffff (Blanco Puro) para limpieza visual máxima ├─ Cards: #ffffff (En Mobile/Tablet) para elevar contenido └─ Inputs: #ffffff - Fondo base de campos de formulario SISTEMA DE BORDES ├─ Border Idle: #e6e6e6 (Gris muy sutil) - Estado por defecto ├─ Border Hover: #3bb1bd (Cyan Marca) - Feedback inmediato ├─ Border Focus: #3bb1bd (Cyan Marca) - Estado activo de edición └─ Width: 1px estándar, outline focus ring en selección SISTEMA DE SOMBRAS (Elevation) ├─ Soft Glow: 0px 5px 10px 0px #e0e4ee - Usado en Inputs para profundidad suave ├─ Button Drop: 0px 4px 6px -1px rgba(0,0,0,0.1) - Elevación ligera interactiva └─ Card Float: shadow-xl (Tailwind) - Para separar la tarjeta en móvil └───────────────────────────────────────────────────────────────────────────┘ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ 2. TIPOGRAFÍA Y TEXTO ║ ╚═══════════════════════════════════════════════════════════════════════════╝ ┌─ FAMILIAS TIPOGRÁFICAS ───────────────────────────────────────────────────┐ PRIMARIA: 'Nunito', sans-serif ├─ Carácter: Redondo, amigable, altamente legible ├─ Uso: 90% de la interfaz (Textos, Inputs, Botones, Links) ├─ Pesos: - 400 (Regular): Cuerpo de texto - 600 (Semi-Bold): Texto de botones, énfasis - 700 (Bold): Destacados importantes └─ Fallback: sans-serif SECUNDARIA: 'Roboto', sans-serif ├─ Carácter: Geométrico, estándar ├─ Uso: Decorativo específico (ej. Emoji en saludo) └─ Contexto: Usado en el componente de título "Hola 👋" └───────────────────────────────────────────────────────────────────────────┘ ┌─ ESCALA TIPOGRÁFICA (Type Hierarchy) ─────────────────────────────────────┐ HEADER / DISPLAY ├─ Size: 40px (Desktop / XL) ├─ Size Mobile: 32px ├─ Weight: SemiBold / Bold mixture └─ Line-height: Tight (1.2) - 48px BODY LARGE (Botones Primarios) ├─ Size: 16px ├─ Weight: 600 (Semi-Bold) ├─ Casing: Mixed Case (No uppercase forzado) └─ Tracking: Normal INPUT TEXT / EDICIÓN ├─ Size: 16px (Previene zoom en iOS) ├─ Weight: 400 (Regular) └─ Color: #363565 LABELS & HELPERS ├─ Size: 16px (Labels y Placeholders) ├─ Color: #a4a4a4 └─ Spacing: mb-1 (Margen inferior ligero) MICROCOPY / LINKS ├─ Size: 14px ├─ Weight: Bold para enlaces └─ Decoration: Underline en hover └───────────────────────────────────────────────────────────────────────────┘ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ 3. ARQUITECTURA RESPONSIVE (HÍBRIDA) ║ ╚═══════════════════════════════════════════════════════════════════════════╝ Este proyecto implementa una arquitectura "Híbrida Estricta". No es un responsive fluido tradicional en todos los puntos, sino un cambio de paradigma (Mode Switch) basado en el ancho del dispositivo. ┌─ BREAKPOINT MAESTRO: XL (1280px) ─────────────────────────────────────────┐ Toda la lógica de diseño gira en torno a `xl` (1280px). < 1280px = MODO APLICACIÓN FLUIDA (Mobile/Tablet) >= 1280px = MODO DISEÑO ESCÉNICO (Desktop High-Fidelity) └───────────────────────────────────────────────────────────────────────────┘ ┌─ MODO FLUIDO (Mobile & Tablet) ───────────────────────────────────────────┐ Objetivo: Usabilidad táctil y lectura vertical. Estrategia: "Card UI" (Interfaz de Tarjeta) Layout Container: ├─ Display: Flexbox (Column Direction) ├─ Align: Center / Center (Vertical viewport centering) ├─ Padding: px-6 py-8 (Espacio respirable) └─ Scroll: Vertical permitido si el contenido excede el viewport Componente LoginCard (.mobile-card-style): ├─ Width: 100% (Responsive) ├─ Max-Width: 350px - 400px (Legibilidad óptima) ├─ Fondo: Blanco Opaco (#ffffff) ├─ Bordes: Rounded-3xl (30px) └─ Sombra: Shadow-XL (Elevación fuerte sobre fondo abstracto) Elementos Ocultos: └─ Personajes 3D, Vectores decorativos complejos (hidden) └───────────────────────────────────────────────────────────────────────────┘ ┌─ MODO ESCÉNICO (Desktop >= 1280px) ───────────────────────────────────────┐ Objetivo: Fidelidad visual exacta al diseño artístico (Figma). Estrategia: "Absolute Positioning Canvas" Layout Container (.responsive-frame): ├─ Display: Block Relative ├─ Max-Width: 1512px (Lienzo maestro) ├─ Margin: Auto (Centrado en monitores ultra-wide) └─ Height: Min-Screen / 100vh Componente LoginCard (.login-card): ├─ Width: 570px (Exacto) ├─ Height: 760px (Exacto) ├─ Position: Absolute (Left: 471px, Top: 111px) -> Coordenadas Figma ├─ Fondo: Transparente (Se integra con el .svg de fondo global) └─ Shadow: None (Plano sobre la composición) Inputs Positioning (.desktop-input-group): ├─ Width: 350px (Fijo) ├─ Left: 110px (Margen izquierdo calculado) └─ Top: Porcentajes exactos (22.63%, 37.63%, etc.) └───────────────────────────────────────────────────────────────────────────┘ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ 4. LIBRERÍA DE COMPONENTES UI ║ ╚═══════════════════════════════════════════════════════════════════════════╝ ┌─ INPUTS (Material UI Custom Wrapper) ─────────────────────────────────────┐ Componente Base: TextField (MUI) con override vía `sx prop`. Geometría: ├─ Height: 56px (Altura táctil estándar) ├─ Radius: 5px (Border-radius sutil) └─ Padding: 13.5px 14px (Interior input text) Estética: ├─ Background: #ffffff ├─ Border: 1px solid #e6e6e6 (Idle) -> #3bb1bd (Focus) ├─ Shadow: 0px 5px 10px 0px #e0e4ee (Soft Blue Glow) └─ Typography: Nunito, 16px, #363565 Iconografía: └─ Adornments: EndAdornment para iconos (ej. Ojo contraseña) └───────────────────────────────────────────────────────────────────────────┘ ┌─ BOTONES DE ACCIÓN (Action Buttons) ──────────────────────────────────────┐ TYPE 1: PRIMARY (Call to Action) ├─ Contexto: "Iniciar Sesión" ├─ Shape: Capsule / Pill (Radius 100px) ├─ Size: Height 56px, Width 100% ├─ Color: Bg #3bb1bd -> Text White ├─ Font: Nunito, 16px, SemiBold (600) └─ Interaction: Hover Darken (#2fa0ac), Shadow Lift TYPE 2: SECONDARY / SOCIAL (Google) ├─ Contexto: "Iniciar con Google" ├─ Shape: Capsule / Pill (Radius 100px) ├─ Size: Height 56px, Width 100% ├─ Color: Bg White -> Border 1px #3bb1bd -> Text #233b58 ├─ Icon: SVG Original a la izquierda └─ Interaction: Hover Background #f8fafc (Gris muy claro) └───────────────────────────────────────────────────────────────────────────┘ ┌─ ASSETS GRÁFICOS E IMÁGENES ──────────────────────────────────────────────┐ ESTRATEGIA DE FONDOS ├─ Login BG: `login-bg.svg` (Cubre 100% viewport, z-index 0) ├─ Card BG: `login-card.svg` (Solo visible desktop, capa intermedia) └─ Character: `leti-saludando.png` (PNG transparente de alta calidad) LOGOTIPO (Vector Composition) ├─ Implementación: `Logo.jsx` ├─ Estructura: Multi-capa (z-stacked images) └─ Dimensiones: 178px x 32px (Aspect Ratio fijo) └───────────────────────────────────────────────────────────────────────────┘ ╔═══════════════════════════════════════════════════════════════════════════╗ ║ 5. IMPLEMENTACIÓN TÉCNICA (DEV GUIDE) ║ ╚═══════════════════════════════════════════════════════════════════════════╝ ┌─ TAILWIND & CSS LAYERS ───────────────────────────────────────────────────┐ Ubicación: `frontend/src/index.css` -> @layer components Clases Maestras: 1. `.responsive-frame`: Contenedor raíz 2. `.login-card`: Wrapper principal del formulario 3. `.desktop-input-group`: Helper de posicionamiento absoluto Regla de Oro: "No usar estilos en línea para layout. Usar clases de utilidad Tailwind prefijadas con `xl:` para reglas de escritorio." └───────────────────────────────────────────────────────────────────────────┘ ┌─ REACT COMPONENT STRUCTURE ───────────────────────────────────────────────┐ Login.jsx └─ Orquestador. Decide qué assets grandes mostrar (Personaje, Fondo). LoginCard.jsx └─ State container. Maneja inputs, loading state y lógica de envío. └─ Contiene el switch visual de "Header absoluto" vs "Header relativo". Logo.jsx └─ Componente de presentación pura (Stateless). └───────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════════