The surrealist palette refuses the rational. These colors emerge from the space between waking and sleep —
the deep void of midnight, the uncanny warmth of flesh tones placed against impossible cerulean skies.
As Magritte painted daylight skies above darkened streets, we pair luminous golds with abyssal purples,
creating chromatic juxtapositions that unsettle and mesmerize.
Section II
Typography
Three voices of the surrealist text — the dramatic, the unsettling, and the quietly strange
Display — Abril Fatface
The Persistence of Memory
Abril Fatface · 400 weight · Dramatic, dreamy display serif inspired by poster lettering of the 19th century.
Use for titles and hero text where maximum visual impact is needed.
Heading — Spectral
This is not a pipe.
The mind loves the unknown. It loves images whose meaning is unknown,
since the meaning of the mind itself is unknown.
Spectral · 300–700 weight, italic · A slightly unsettling elegance. The letterforms carry a subtle tension,
perfect for subheadings and pull quotes that should feel dreamlike yet authoritative.
Body — Lora
The surrealists sought to channel the unconscious mind through automatic writing — text produced without
conscious control. André Breton described it as "pure psychic automatism." The body text must be readable
enough to carry the reader through strange landscapes, warm enough to feel like a whispered secret,
yet possessing just enough character to never feel entirely ordinary.
Lora · 400–700 weight, italic · A well-balanced contemporary serif with roots in calligraphy.
Readable at small sizes while maintaining warmth and personality.
Type Scale
Display4.5remPhantom Objects
H12.8remMelting Clocks
H22remExquisite Corpse
H31.4remAutomatic Writing
Body1remThe dream dissolves at the edges of perception.
Small0.85remObjects are never what they seem in the half-light.
Caption0.75remManifesto fragment · 1924
Section III
Spacing
Even in dreams, rhythm structures the impossible — an 8px base unit, melting at the edges
--space-xs4px
--space-sm8px
--space-md16px
--space-lg32px
--space-xl64px
--space-2xl96px
--space-3xl128px
Section IV
Buttons
Portals to the unconscious — each click a leap into the unknown
Primary Actions
Secondary & Variants
States
Section V
Forms
Instruments for recording the language of the subconscious
Name your nocturnal vision
Do not censor. Do not pause. Let the unconscious speak.
Section VI
Cards
Windows into parallel realities — each card a portal, slightly ajar
The Treachery of Images
Magritte's lesson: representation is not reality. The map is never the territory. Every interface is a painting of a pipe.
Trompe l'oeil
The Persistence of Memory
Dalí's melting watches remind us that time is soft, pliable, and fundamentally untrustworthy. Design for the moment that stretches.
Paranoiac-critical
The Eye of the Unconscious
Man Ray's solarized eye: the surrealist sees inward. The pupil dilates to take in what reason refuses to acknowledge.
Automatism
Section VII
Alerts & Badges
Messages from the subconscious — urgent whispers and strange announcements
Dream Logic: The staircase leads both up and down simultaneously. Navigation elements should feel familiar yet subtly impossible.
Caution — Reality Distortion: "I do not understand painting. I do not understand anything. And I especially do not understand why people think they must understand art." — Miró
Critical Manifestation: The boundary between interface and hallucination has collapsed. Verify that your objects cast the correct shadows.
The Uncanny: Something is not quite right. The element appears normal, yet its shadow falls in the wrong direction. This is by design.
Four pillars of the surrealist method, translated into the language of interface
I
Dream Logic
In dreams, a door may open onto an ocean. Cause and effect yield to poetic association.
Design with internal consistency that follows its own impossible rules — spatial relationships
that feel correct even when they defy physics, transitions that flow like water through keyholes.
"The mind which plunges into Surrealism relives with glowing excitement the best part of its childhood."
— André Breton, Surrealist Manifesto, 1924
II
Automatism
Max Ernst developed frottage; Miró painted from hunger-induced hallucinations.
The best surrealist work emerges from process, not plan. Allow the design system to generate
unexpected combinations. Use CSS transforms, blend modes, and animation to create happy accidents
that the conscious designer could never anticipate.
"Painting is stronger than I am. It makes me do what it wants."
— Pablo Picasso
III
The Uncanny
Freud's unheimlich — the strange within the familiar. A button that subtly breathes.
A card that drifts as though gravity has loosened. Shadows that fall at wrong angles.
The uncanny is not broken design; it is design that makes the viewer aware they are perceiving.
Every element should feel almost normal, but never entirely.
"Everything we see hides another thing. We always want to see what is hidden by what we see."
— René Magritte
IV
Juxtaposition
Lautréamont's "chance meeting of a sewing machine and an umbrella on a dissecting table" became
the surrealist credo. Place elements in unexpected proximity. Combine the monumental display serif
with whispered italic captions. Set melting gold against abyssal midnight. The tension between
incongruous elements generates meaning that neither could produce alone.
"Beautiful as the chance meeting of a sewing machine and an umbrella on a dissecting table."
— Comte de Lautréamont