REAL® - Sistema de Diseño

Paleta de Colores

La paleta de REAL® está diseñada para crear contraste y legibilidad en un entorno oscuro, con el naranja como color de acento principal.

Colores Principales

Cyan (Accent)

#06B6D4

Cyan

#00D4FF

Black

#0A0A0A

Dark

#141414

White

#FFFFFF

Escala de Grises

Gray 100

#F5F5F5

Gray 300

#D4D4D4

Gray 400

#A3A3A3

Gray 500

#737373

Gray 600

#525252

Gray 700

#404040

Gray 800

#262626

Gray 900

#171717

        
:root {
  --real-black: #0A0A0A;
  --real-dark: #141414;
  --real-white: #FFFFFF;
  --real-orange: #06B6D4;
  --real-cyan: #00D4FF;
  --real-gray-100: #F5F5F5;
  --real-gray-200: #E5E5E5;
  --real-gray-300: #D4D4D4;
  --real-gray-400: #A3A3A3;
  --real-gray-500: #737373;
  --real-gray-600: #525252;
  --real-gray-700: #404040;
  --real-gray-800: #262626;
  --real-gray-900: #171717;
}
        
      

Tipografía

REAL® utiliza tres familias tipográficas para crear jerarquía y contraste visual.

Playfair Display (Display / Títulos)

Serif elegante para títulos principales y elementos destacados.

Heading Display

Heading Large

Heading Medium

        
.font-display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; /* Base, también disponible: 500, 600, 700 */
}

Inter (Body / Texto)

Sans-serif moderna y legible para texto de cuerpo y elementos de interfaz.

Bold Heading

Semibold Subheading

Medium Body Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular Body Text - Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        
.font-body {
  font-family: 'Inter', sans-serif;
  /* Pesos disponibles: 300, 400, 500, 600, 700 */
}

JetBrains Mono (Mono / Labels)

Monospace técnica para etiquetas, códigos y elementos de UI con estilo cyber.

SECTION LABEL

Monospace Text

Uppercase Label

        
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  /* Pesos disponibles: 400, 500 */
  /* Uso común: uppercase, letter-spacing: 0.1em - 0.2em */
}
        
      

Escala Tipográfica

Elemento	Font Family	Tamaño	Peso	Letter-spacing	Uso
Hero Title	Playfair Display	5xl - 8xl (responsive)	400	tight	Título principal hero
Section Heading	Playfair Display	4xl - 6xl	400	normal	Títulos de sección
Body Large	Inter	lg - xl	400	normal	Párrafos destacados
Body	Inter	base (1rem)	400	normal	Texto de cuerpo
Section Label	JetBrains Mono	xs (12px)	400	0.2em	Etiquetas de sección
Nav Link	JetBrains Mono	xs (12px)	500	0.08em	Navegación

Componentes

Botones

        
/* Botón Primario */
.btn-primary {
  padding: 16px 32px;
  background: var(--real-orange);
  color: var(--real-white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  border: none;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: var(--real-white);
  color: var(--real-black);
}

/* Botón Outline */
.btn-outline {
  padding: 16px 32px;
  border: 1px solid var(--real-gray-600);
  color: var(--real-gray-300);
  background: transparent;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  border-color: var(--real-orange);
  color: var(--real-orange);
}

/* Cyber Button (estilo back2) */
.cyber-btn {
  padding: 1rem 2rem;
  border: 1px solid var(--real-orange);
  color: var(--real-orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.cyber-btn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: var(--real-orange);
  transition: height 0.3s ease;
  z-index: -1;
}
.cyber-btn:hover {
  color: var(--real-black);
}
.cyber-btn:hover::before {
  height: 100%;
}
        
      

Cards

              Categoría

Título de Card

Descripción del contenido de la card con texto secundario.

Formularios

Campo de texto

Espaciado

Sistema de espaciado basado en múltiplos de 4px y 8px para consistencia visual.

8px (0.5rem) - Espaciado mínimo

16px (1rem) - Espaciado pequeño

24px (1.5rem) - Espaciado medio

32px (2rem) - Espaciado estándar

48px (3rem) - Espaciado grande

64px (4rem) - Espaciado extra grande

96px (6rem) - Espaciado hero

128px (8rem) - Espaciado sección

Padding de Secciones

Sección	Padding Vertical	Padding Horizontal
Hero	min-height: 100vh (centrado)	32px (px-8)
Sección estándar	128px (py-32)	32px (px-8)
Sección compacta	96px (py-24)	32px (px-8)

Sistema de Grid

Grid cyber con líneas sutiles naranjas para crear profundidad visual.

Grid de fondo: 50px × 50px (desktop), 30px × 30px (móvil)

Opacidad: rgba(232, 93, 4, 0.03)

        
.cyber-grid {
  background-image: 
    linear-gradient(rgba(232, 93, 4, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 93, 4, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
@media (max-width: 768px) {
  .cyber-grid {
    background-size: 30px 30px;
  }
}
        
      

Layout Grid

Breakpoint	Ancho	Uso
Mobile	< 768px	1 columna, padding 32px
Tablet	768px - 1024px	2-3 columnas
Desktop	> 1024px	3-4 columnas, max-width containers

Animaciones y Transiciones

Transiciones Estándar

Propiedad	Duración	Easing	Uso
Hover states	0.3s	ease	Botones, enlaces, cards
Color changes	0.25s	ease	Bordes, textos
Transform	0.15s	ease	Cursor hover, scale
Opacity	0.2s	ease	Cursor, modales

GSAP Animations

Animaciones de entrada usando GSAP ScrollTrigger:

        
gsap.fromTo('#element', 
  { opacity: 0, y: 30 }, 
  { 
    opacity: 1, 
    y: 0, 
    duration: 0.8, 
    delay: 0.3, 
    ease: 'power3.out' 
  }
);
        
      

Estados de Interacción

Hover States

Estados de Formulario

Estado	Borde	Color
Default	1px solid var(--real-gray-800)	var(--real-white)
Focus	1px solid var(--real-orange)	var(--real-white)
Error	1px solid var(--real-orange)	var(--real-orange)

Cursor Personalizado

Punto naranja que sigue al mouse, solo en dispositivos con puntero fino (desktop).

        
.custom-cursor-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--real-orange);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-cursor-dot.visible {
  opacity: 1;
}

.custom-cursor-dot.hover {
  transform: scale(1.4);
  background: rgba(232, 93, 4, 0.8);
}

/* Ocultar cursor del sistema */
body.custom-cursor-active * {
  cursor: none !important;
}
        
      

Escala de Z-Index

Elemento	Z-Index	Uso
Background	0	Fondo base
Content	10	Contenido principal
Navbar	50	Navegación sticky
Modal	100	Modales pantalla completa
Modal Close	101	Botón cerrar modal
Custom Cursor	999999	Cursor personalizado

Breakpoints Responsive

Breakpoint	Ancho	Media Query
Mobile	< 640px	@media (max-width: 640px)
Tablet	640px - 768px	@media (min-width: 640px)
Desktop	> 768px	@media (min-width: 768px)
Large Desktop	> 1024px	@media (min-width: 1024px)

Guía de Uso de Colores

Jerarquía Visual

Naranja (#E85D04): CTAs principales, acentos, hover states, títulos destacados
Blanco (#FFFFFF): Texto principal, títulos importantes
Gris 300 (#D4D4D4): Texto secundario, descripciones
Gris 400 (#A3A3A3): Texto terciario, placeholders
Gris 600 (#525252): Bordes sutiles, elementos deshabilitados
Gris 800 (#262626): Bordes de cards, separadores

Contraste y Accesibilidad

El contraste mínimo entre texto y fondo debe cumplir WCAG AA:

Texto blanco sobre fondo negro: ✓ Cumple (21:1)
Texto naranja sobre fondo negro: ✓ Cumple (4.5:1)
Texto gris 400 sobre fondo negro: ✓ Cumple (4.5:1)

REAL® Sistema de Diseño