Sistema de Diseño
La Estética Liminal. Liminal UI existe en el espacio entre estados — un lenguaje de diseño de umbral construido sobre degradados suaves, vidrio esmerilado, animaciones transitorias y la geometría quieta de puertas y ventanas.
Fundamentos
Seis Principios Liminales
Umbral
Cada superficie es un pasaje. Los bordes y marcos actúan como puertas — nunca decorativos, siempre con propósito.
Translucidez
La transparencia revela profundidad sin exponerlo todo. El cristal esmerilado crea espacio por capas.
Degradado
El color transiciona lentamente, nunca bruscamente. Los degradados sugieren movimiento entre estados, luz y atmósfera.
Quietud
Las animaciones son transitorias y sutiles. El movimiento marca el cambio sin exigir atención.
Espacio
El espacio vacío no es ausencia — es campo. El espaciado generoso preserva el sentido liminal de paso.
Legibilidad
La tipografía es clara y tranquila. Las etiquetas monoespaciadas anclan el sistema; el texto display lo abre.
Color
Paleta Semántica
Todos los colores usan oklch para uniformidad perceptual. Los tokens se adaptan automáticamente entre los modos claro y oscuro.
Fondo
Base de página y superficie
Primer plano
Texto e iconos principales
Primario
Acento de marca, foco interactivo
Texto primario
Texto sobre superficies primarias
Silenciado
Áreas de fondo sutil
Texto silenciado
Etiquetas y sugerencias atenuadas
Tarjeta
Fondo de superficie elevada
Borde
Líneas, divisores, marcos
Acento
Color de resaltado secundario
Anillo
Anillo indicador de foco
Destructivo
Estados de error y peligro
Tipografía
Sistema Tipográfico
Geist Sans — Display
Usado para titulares, títulos y texto expresivo. Tracking amplio en tamaños grandes, ajustado en pequeños.
.font-displayvar(--font-geist-sans)Geist Mono — UI y Etiquetas
Usado para etiquetas, metadatos, código y copy de interfaz. Mayúsculas con tracking amplio.
.font-ibmvar(--font-geist-mono)Escala tipográfica
clamp(4rem, 10vw, 7.5rem)semiboldtightclamp(3rem, 7vw, 4.5rem)semiboldtightclamp(2rem, 5vw, 3rem)semiboldtight1.875remsemiboldtight1.25remmediumwide1remnormalnormal0.75remboldwidestEspaciado
Espacio y Layout
El espacio no es vacío — es campo. Cada hueco es un umbral entre elementos.
Unidad base: 4px (0.25rem)Escala de espaciado
Sistema de contenedor
max-w-[1440px] con border-x crea un marco editorial contenido — como una ventana hacia el contenido.
max-w-[1440px]
El espacio no es vacío — es campo. Cada hueco es un umbral entre elementos.
Cristal y Transparencia
Vidrio Esmerilado
La translucidez revela capas. Las superficies de cristal usan backdrop-blur y canales alfa para crear profundidad sin opacidad.
16px70%CSS
backdrop-filter: blur(16px); background: color-mix( in oklab, var(--background) 70%, transparent ); /* + noise overlay */
Glass surface
Liminal UI
Frosted glass creates depth through translucency — layers of meaning without opacity.
Ejemplos de uso
Cabecera de navegación
bg-background/70 backdrop-blur-md
Bloque de código
code-mix(bg, 72%) backdrop-blur(16px) + noise overlay
Modal / Overlay
bg-background/80 backdrop-blur-lg
Degradados
Degradados Liminales
El color no se detiene — transiciona. Los degradados sugieren atmósfera, luz y el paso entre estados.
Background fade
bg-gradient-to-t from-background to-transparent
Primary sweep
linear-gradient( 90deg, var(--primary), transparent )
Radial glow
radial-gradient( circle, primary 0%, transparent 70% )
Portal depth
radial-gradient( ellipse 50% 40% at 50% 100%, background 0%, transparent )
Edge fade (horizontal)
mask: linear-gradient( to right, transparent, black 10%, black 90%, transparent )
Edge fade (vertical)
mask: linear-gradient( to bottom, transparent, black 10%, black 90%, transparent )
Lamp cone
radial-gradient( ellipse 80% 50% at 50% 0%, amber 0%, transparent 72% )
Atmospheric mist
linear-gradient( 135deg, primary 8%, transparent, accent 8% )
El color no se detiene — transiciona. Los degradados sugieren atmósfera, luz y el paso entre estados.
Movimiento
Animaciones Transitorias
El movimiento en Liminal UI marca el cambio sin exigir atención. Las animaciones son sutiles, intencionadas y transitorias.
Principio liminal: las animaciones revelan en lugar de entretener. Nunca loopees a menos que el elemento sea inherentemente vivo.
Reveal Up
.animate-reveal-upAparece desde abajo — para contenido que aparece en scroll
Counter In
.animate-counter-inEscala y fundido — para métricas y pantallas numéricas
Float Geo
.animate-float-geoFlotación vertical lenta con ligera rotación — para elementos decorativos
Pulse Glow
.animate-pulse-glowPulso de resplandor respirante — para indicadores en vivo
Lamp Flicker
Variación sutil de opacidad — simula atmósfera de luz cálida
Terminal Blink
.animate-terminal-blinkParpadeo de cursor — para interfaces de código y terminal
Scan Line
Barrido vertical sobre superficies — referencia CRT sutil
Glitch
.animate-glitch-1Distorsión de clip-path — para estados de error o transición
Bordes y Forma
Bloques, Puertas y Ventanas
Liminal UI usa geometría cuadrada por defecto. Los bordes son estructurales — enmarcan pasajes, no solo contenido.
Radio de borde
CSS
border-radius: 0px;
Bordes compartidos
-ml-px / -mt-px — shared border technique avoids double borders
Iconografía
Sistema de Iconos
Los iconos son de Lucide React — trazo fino, geométrico y mínimo. Apoyan la estética liminal sin decoración.
Tamaños de icono
Grosor de trazo
Default: strokeWidth=2 (Lucide default)
Los iconos nunca deben llamar la atención sobre sí mismos. Etiquetan, indican y guían — nada más.
En contexto
Ctrl+K