StyleKit — Design System
超现实主义风
Beyond the threshold of consciousness
Where dreams dissolve the boundaries of reason and the subconscious paints with impossible colors that no daylight can replicate. A design system born from Dali-inspired logic, melting forms, and the poetry of the unconscious mind.
5
Dream Colors
8
Design Laws
1000ms
Dream Easing
Visions pulled from the boundary between sleep and waking, rendered in muted dreamscape hues.
Hours bend and pour like liquid gold across stone archways that remember nothing. Clocks melt at the threshold of waking.
Towering figures on impossibly thin legs stride through a dusk that never arrives. Gravity is a suggestion here.
Flame and form merge at the half-light of awakening, neither solid nor air. The body forgets what it was told.
Interactive elements shaped by the rules of the unconscious — each one distorted, glowing, melting.
Primary — organic blob border-radius, Dream-like Distortion skew+rotate, Abyssal Glow
All transitions at duration-700 to duration-1000 ease-in-out minimum
Each hue is a memory half-remembered — muted, dreamlike, never harsh. The palette of the unconscious speaks in whispers.
Midnight
#1a1a3e
The midnight sky where all dreams are born
Cream
#f0ece4
The parchment on which visions are written
Desert Gold
#d4a574
Sand dunes melting into the evening light
Rose Dust
#c38d94
Petals pressed inside a dream journal
Deep Purple
#4a3f6b
The violet hour between sleep and waking
Midnight to Cream — the full spectrum of the dream
Words from the masters of the unconscious — inscribed at the threshold between reason and revelation.
“Every morning when I wake up, I experience an exquisite joy — the joy of being Salvador Dali — and I ask myself in rapture: What wonderful things is this Salvador Dali going to accomplish today?”
— Salvador Dali
In surrealism, the eye is never passive. It absorbs, transforms, and returns the world unrecognized.
Clocks melt because time in dreams has no fixed form. It pools, drips, and evaporates without warning.
Desert and sea and sky collapse into one. Perspective is a convention that the dream refuses to honor.
Every interaction pattern has a name. Learn the language of the subconscious.
hover:skew-x-2 hover:-rotate-1Nothing in the dream world stands perfectly upright. Elements tilt and drift on hover.
duration-1000 ease-in-outTime moves differently here. Minimum 700ms, prefer 1000ms. Never 200ms.
group-hover:scale-150 duration-[2000ms]Orb decorations expand slowly over 2 full seconds, bleeding color at the edges.
shadow-[0_0_50px_rgba(195,141,148,0.3)]Light rises from within the element — rose and gold diffuse, never a black drop.
group-hover:w-full duration-1000The golden line follows like a slow tide, extending from its origin across full width.
group-hover:tracking-widest duration-1000Characters breathe apart on hover, as if the word itself is waking up from sleep.
A dream journal for designers. Written in the half-light between intention and intuition.
Dream-like Distortion
hover:skew-x-2 hover:-rotate-1 — the dreamscape never holds still. Elements tilt and drift on interaction.
Timeless Easing
duration-700 minimum, prefer duration-1000. The dream breathes at its own pace — never hurried.
Abyssal Glow
hover:shadow-[0_0_50px_rgba(195,141,148,0.3)] — light rises from within, diffuse rose and gold only.
Color Melting
Orbs expand group-hover:scale-150 over duration-[2000ms] — color bleeds at the edges of consciousness.
Expanding Underline
group-hover:w-full transition-all duration-1000 — the gold line follows like a slow, inevitable tide.
Serif Italic Typography
font-serif italic for all expressive text. Rationality and sans-serif have no place in the dream.
Midnight Blue Backgrounds
#1a1a3e as the base canvas. Desert gold as the primary accent. Never pure black, never pure white.
Organic Border-Radius
rounded-[40%_60%_70%_30%/30%_30%_70%_70%] on featured elements — organic shapes resist geometry.
No Symmetric Grids
Equal, perfectly aligned grids betray the dream. Asymmetry is not an error — it is the design language.
No Sharp Scale-105
hover:scale-105 is the language of the rational world. Use skew and rotate instead — never flat scale alone.
No Black Shadows
drop-shadow with black kills the dream atmosphere. Only Abyssal Glow — rose and gold diffuse light.
No Fast Transitions
duration-200 is a jolt that breaks the spell. The dream world never moves faster than duration-700.
No Static Orbs
Decorative orbs without group-hover:scale-150 duration-[2000ms] are corpses — color must live and breathe.
No Bright Pure Colors
Neon and saturated hues do not exist in the subconscious. Muted, muted, muted — always.
The Persistence of Memory
Display — clamp 4–11rem, serif italic, cream on midnight
Colors of the Subconscious
H2 — 36px, serif italic, desert gold
The Gallery
Caption — 10px, tracked wide, rose dust
Visions pulled from the boundary between sleep and waking, rendered in muted dreamscape hues.
Body — 14–16px, serif italic, cream at 45% opacity
hover:skew-x-2 hover:-rotate-1 duration-1000 ease-in-out
Token — 11px, monospace, rose dust 70%