Design System
The Liminal Aesthetic. Liminal UI exists in the space between states — a threshold design language built on soft gradients, frosted glass, transitory animations, and the quiet geometry of doors and windows.
Foundations
Six Liminal Principles
Threshold
Every surface is a passage. Borders and frames act as doorways — never decorative, always purposeful.
Translucency
Transparency reveals depth without exposing everything. Frosted glass creates layered space.
Gradient
Color transitions slowly, never sharply. Gradients suggest movement between states, light, and atmosphere.
Stillness
Animations are transitory and subtle. Motion marks change without demanding attention.
Space
Empty space is not absence — it is field. Generous spacing preserves the liminal sense of passage.
Legibility
Typography is clear and unhurried. Monospaced labels ground the system; display text opens it.
Color
Semantic Palette
All colors use oklch for perceptual uniformity. Tokens adapt automatically between light and dark modes.
Background
Page and surface base
Foreground
Primary text and icons
Primary
Brand accent, interactive focus
Primary Foreground
Text on primary surfaces
Muted
Subtle background areas
Muted Foreground
Subdued labels and hints
Card
Elevated surface background
Border
Lines, dividers, frames
Accent
Secondary highlight color
Ring
Focus indicator ring
Destructive
Error and danger states
Typography
Type System
Geist Sans — Display
Used for headlines, titles, and expressive text. Large tracking at big sizes, tight at small.
.font-displayvar(--font-geist-sans)Geist Mono — UI & Labels
Used for labels, metadata, code, and interface copy. Uppercase with wide tracking.
.font-ibmvar(--font-geist-mono)Type scale
clamp(4rem, 10vw, 7.5rem)semiboldtightclamp(3rem, 7vw, 4.5rem)semiboldtightclamp(2rem, 5vw, 3rem)semiboldtight1.875remsemiboldtight1.25remmediumwide1remnormalnormal0.75remboldwidestSpacing
Space & Layout
Space is not emptiness — it is field. Every gap is a threshold between elements.
Base unit: 4px (0.25rem)Spacing scale
Container system
max-w-[1440px] with border-x creates a contained editorial frame — like a window into the content.
max-w-[1440px]
Space is not emptiness — it is field. Every gap is a threshold between elements.
Glass & Transparency
Frosted Glass
Translucency reveals layers. Glass surfaces use backdrop-blur and alpha channels to create depth without opacity.
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.
Usage examples
Navigation header
bg-background/70 backdrop-blur-md
Code block
code-mix(bg, 72%) backdrop-blur(16px) + noise overlay
Modal / Overlay
bg-background/80 backdrop-blur-lg
Gradients
Liminal Gradients
Color does not stop — it transitions. Gradients suggest atmosphere, light, and the passage between states.
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% )
Color does not stop — it transitions. Gradients suggest atmosphere, light, and the passage between states.
Motion
Transitory Animations
Motion in Liminal UI marks change without demanding attention. Animations are subtle, purposeful, and transitory.
Liminal principle: animations reveal rather than entertain. Never loop unless the element is inherently alive.
Reveal Up
.animate-reveal-upFade in from below — for content appearing on scroll
Counter In
.animate-counter-inScale and fade — for numeric or metric displays
Float Geo
.animate-float-geoSlow vertical float with slight rotation — for decorative elements
Pulse Glow
.animate-pulse-glowBreathing glow pulse — for live indicators
Lamp Flicker
Subtle opacity variation — simulates warm light atmosphere
Terminal Blink
.animate-terminal-blinkCursor blink — for code and terminal interfaces
Scan Line
Vertical scan across surfaces — subtle CRT reference
Glitch
.animate-glitch-1Clip-path distortion — for error or transition states
Borders & Form
Blocks, Doors & Windows
Liminal UI uses square geometry by default. Borders are structural — they frame passages, not just content.
Border radius
CSS
border-radius: 0px;
Shared borders
-ml-px / -mt-px — shared border technique avoids double borders
Iconography
Icon System
Icons are from Lucide React — thin stroke, geometric, and minimal. They support the liminal aesthetic without decoration.
Icon sizes
Stroke width
Default: strokeWidth=2 (Lucide default)
Icons should never draw attention to themselves. They label, indicate, and guide — nothing more.
In context
Ctrl+K