Spacing grid
Los controles usan múltiplos de 4; las estructuras y separaciones mayores usan múltiplos de 8.
Sistema visual definitivo para crear experiencias competitivas coherentes, accesibles y expresivas bajo una estandarización matemática unificada.
Cada decisión visual parte de una escala predecible. Menos excepciones producen una interfaz más rápida de construir y más fácil de reconocer.
Los controles usan múltiplos de 4; las estructuras y separaciones mayores usan múltiplos de 8.
La escala tipográfica combina proporción 1.2 en fuente única Outfit con tamaños fluidos mediante clamp().
12 px para controles, 16 px para tarjetas, 24 px para héroes y píldoras únicamente semánticas.
Los componentes consumen intención —acción, éxito, advertencia— y nunca un hexadecimal aislado.
Selecciona un paso de la escala para inspeccionar su valor en píxeles, rem, token CSS asignado y regla de aplicación en los componentes.
--space-4{
"typography": { "fontFamily": "Outfit, ui-sans-serif, system-ui, sans-serif", "scaleRatio": 1.200 },
"spacingGrid": { "base": "4px / 8px", "1": "4px", "2": "8px", "4": "16px", "10": "40px", "16": "64px" },
"radiusLadder": { "control": "12px", "card": "16px", "hero": "24px", "pill": "9999px" },
"semanticColor": {
"brand": { "primary": "#DC2011", "secondary": "#8F0B13", "deep": "#380F17" },
"surface": { "canvas": "#111414", "card": "#252B2B", "elevated": "#303536" },
"status": { "success": "#5F8F72", "warning": "#D9A441", "danger": "#DC2011", "info": "#8493A5" }
}
}Esta sección monta las implementaciones reutilizables del sistema dentro de un entorno de demostración aislado. Conserva sus estilos e interacción local, pero desactiva autenticación y persistencia.
La interfaz no se mueve para decorar: revela causalidad, continuidad espacial y respuesta inmediata.
80 msPress, toggle, selección160 msHover, focus, tooltip240 msMenús y paneles360 msModal y cambio de contexto600 msEntrada hero y navegaciónEl estado visual inicia en menos de 100 ms tras la intención.
Los elementos conservan origen, dirección y jerarquía durante el cambio.
Máximo una animación de énfasis simultánea por viewport.
.interactive {
transition: transform var(--motion-fast) cubic-bezier(.16, 1, .3, 1), box-shadow var(--motion-standard) cubic-bezier(.22, 1, .36, 1);
}
.interactive:hover { transform: translateY(-2px) translateZ(12px); }
.interactive:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) { .interactive { transition-duration: 1ms; transform: none; } }WebGL y 3D aparecen donde mejoran orientación, identidad o comprensión; el contenido y la acción nunca dependen de ellos.
La elevación en Z distingue fondo, contenido y acción manteniendo una lectura inmediata.
Objeto low-poly o insignia como ancla visual, cargado después del contenido crítico.
Geometría ligera que representa progreso real; nunca una espera indefinida.
Solo cuando el eje Z expresa una dimensión que una gráfica 2D no comunica.
Profundidad breve entre directorio y ficha para preservar continuidad.
const Scene = dynamic(() => import('./scene'), { ssr: false });
<Canvas dpr={[1, 1.5]} frameloop={reduced ? 'demand' : 'always'}>
<ambientLight intensity={1.2} />
<mesh>
<icosahedronGeometry args={[1, 2]} />
<meshStandardMaterial color="var(--brand-500)" metalness={0.7} />
</mesh>
</Canvas>Una arquitectura por capas mantiene los tokens estables, los componentes predecibles y las experiencias especializadas bajo control.
Valores primitivos y semánticos versionados.
Button, Field, Surface, Dialog y Status.
Header, filtros, tablas y flujos CRUD.
GameSlug, dashboard y perfiles públicos.
Extender por slots y variantes declarativas. Evitar duplicar componentes para diferencias puramente visuales.
Server Components para contenido; cliente solo para interacción. Three.js y Framer Motion mediante importación dinámica.
Semántica, teclado y lectura forman parte de la API del componente, no de una revisión posterior.
La interfaz se considera terminada cuando supera criterios visuales, funcionales, accesibles y de rendimiento reproducibles.