Sistema dark de tipo command/protocol: pizarra #1E293B como base, azul #3B82F6 como accion, Geist 120px en mayuscula como gesto, y material glass con gradient border shell. El neutro #000000 se tinta en frio hacia slate para evitar el negro plano.
FUENTE: Aegis-Command-Protocol-DESIGN.md
Typography
Geist · una familia
Heading system
Geist
Specimen · 300 · 48px · ls −0.025em
Body system
Geist
16px / 24px · ls 0.025em
This is how body text feels at 18px when applied to a real paragraph block.
Labels · Geist 400 · 12px · ls 1.2px · uppercase. Una sola familia en display, body y utilidad.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
La profundidad se comunica con glass, contraste de borde y recetas de sombra o blur reutilizables. Las superficies leen como glass primero; bordes, sombras y blur solo refuerzan esa eleccion de material.
Tecnica · Gradient border shell
Shell exterior con 1px de padding y radio 2px, gradiente linear de rgba(51,65,85,0.5) a rgba(30,41,59,0.2) a rgba(15,23,42,0.5). La superficie real va inset a radio menor para que el gradiente quede como hairline premium en vez de un trazo plano.
Sistema de radio ajustado anclado en 1px y escalado en cards, botones y superficies de apoyo. Controles y badges se mantienen dentro de la misma familia en vez de inventar excepciones mas afiladas o solo pastilla.
1px2px9999px
Primary radius2px
Icon setSolar
Do's and Don'ts
Guardrails
Do
Usa la paleta primaria como acento principal para enfasis y estados de accion.
Manten el espaciado alineado al ritmo de 8px.
Reutiliza el tratamiento glass de forma consistente en cards y controles.
Conserva los radios dentro de la familia 1px, 2px, 9999px.
Don't
No introduzcas colores de acento fuera de los roles del core salvo un nuevo estado semantico.
No mezcles recetas de sombra o blur ajenas que rompan el sistema de profundidad.
No excedas la intensidad de motion expresiva sin una razon deliberada.
Motion
Expressive
El movimiento se siente expresivo pero centrado en interfaz, texto y transiciones de layout. El timing se agrupa en 800ms y 500ms. Easing favorece ease y cubic-bezier(0.16, 1, 0.3, 1). Hover cambia color y texto; la coreografia de scroll usa parallax para revelados de seccion.
Motion levelExpressive
Durations800ms · 500ms · 700ms
Easingcubic-bezier(.16,1,.3,1)
Hover / scrollcolor, text · parallax
WebGL · ThreeJS
three.js r128
Campo de fondo full-bleed retro-futurista y tecnico: dot-matrix particle field con pulso de respiracion lenta y drift reactivo al puntero. Capa ThreeJS con icosaedros MeshPhysicalMaterial en orbita lenta. Arriba se reconstruye como aproximacion CSS animada; preserva fallback DOM.