Impossible combinations
Familiar objects meet in places they could never be together, like a door standing alone in a desert.
Interfaces that follow dream logic. Doors open onto sky, objects float without reason, and ordinary things change scale, so the page invites curiosity before explanation.
Step through Copy the promptSurrealist web design takes the language of dreams from 1920s art and uses it to make brands memorable. Real things combine in impossible ways.
Familiar objects meet in places they could never be together, like a door standing alone in a desert.
Objects hover, grow huge or shrink. Gravity is optional.
Scenes are rendered simply and precisely. The strangeness comes from content, not from chaotic style.
Low horizons, big skies and arched frames create a stage for the unexpected.
Surrealism started as a literary and art movement in Paris. Designers keep returning to it whenever tools make impossible images easier.
André Breton publishes the Manifesto of Surrealism, describing art that frees the unconscious mind from reason.
René Magritte paints The Treachery of Images, questioning the link between pictures and words.
Salvador Dalí paints The Persistence of Memory. Melting watches become the most quoted surrealist image.
New York's Museum of Modern Art shows Fantastic Art, Dada, Surrealism, bringing the movement to a wide audience.
3D tools and image generators make surreal scenes cheap. Brands use them for campaign pages and product launches.
Surreal motion is slow and uncanny. Things drift, melt and swim where they should not, at a calm, dreamlike pace.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Fashion and beverage brands use surreal scenes to stand out in crowded feeds.
Surreal art signals imagination and depth for creative releases.
Exhibitions use arched frames and dream imagery to set a mood before content.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Clear sky blues and desert sand, lit by one warm vermilion accent. Tap a swatch to copy its hex value.
:root{
--dream-sky: #BFD8E6;
--sand: #D8C29A;
--bone: #F4EEE2;
--vermilion: #D9573B;
--gold-hour: #E9B44C;
--night-ink: #1F2A3A;
}An elegant italic serif gives headings a literary, dreamy voice. Body text stays in a plain sans for balance.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Cormorant Garamond",Georgia,serif;
--font-b: "Karla",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(56px, 9vw, 133px);
--fs-1: 56.3px; --fs-2: 42.3px;
--fs-3: 31.8px; --fs-4: 23.9px;
--fs-body: 18px; --fs-sm: 13.5px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 500;
letter-spacing: -.01em;
text-transform: none;
line-height: 1;
}
/* fonts: Cormorant Garamond and Karla */Keep the structure calm and classical. The surprise should come from imagery, not from a broken grid.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 32px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Arch radius (999px on top, small on the bottom) is the signature. Shadows fall long and soft, as in late afternoon light.
:root {
--radius: 999px 999px 18px 18px;
--radius-sm: 14px;
--bw: 1px;
--shadow: 0 30px 40px -24px rgba(31,42,58,.55);
--shadow-sm: 0 12px 18px -12px rgba(31,42,58,.5);
--gap: 32px;
--pad: 28px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Surrealism kit · Anti-Boring */
:root{
--bg:#BFD8E6;
--surface:#F4EEE2;
--surface2:#A9C7D8;
--fg:#1F2A3A;
--muted:#465466;
--accent:#D9573B;
--accent-fg:#FFF8EC;
--accent2:#E9B44C;
--accent2-fg:#1F2A3A;
--border:#1F2A3A;
--bw:1px;
--radius:999px 999px 18px 18px;
--radius-sm:14px;
--shadow:0 30px 40px -24px rgba(31,42,58,.55);
--shadow-sm:0 12px 18px -12px rgba(31,42,58,.5);
--font-d:"Cormorant Garamond",Georgia,serif;
--font-b:"Karla",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:500;
--h-track:-.01em;
--h-case:none;
--h-style:italic;
--h-lh:1;
--gap:32px;
--pad:28px;
--focus:rgba(217,87,59,.35);
--ok:#2E6B4A;
--warn:#8A5A00;
--danger:#A8331E;
--info:#2F5C8A;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(#8DB6CE 0 55%,#E9B44C 55% 58%,#C9A36B 58%);
--code-bg:#1F2A3A;
--code-fg:#F4EEE2;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.5px;
--fs-body:18px;
--fs-4:23.9px;
--fs-3:31.8px;
--fs-2:42.3px;
--fs-1:56.3px;
--fs-d:clamp(56px, 9vw, 133px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;border-color:transparent}
.btn-ghost{border-color:var(--fg)}
.card{padding-top:44px}
.card-media{border-radius:999px 999px 10px 10px;aspect-ratio:4/3}
.badge{font-family:var(--font-d);font-style:italic;font-size:.95rem;border-color:transparent}
.input,.select,.textarea{border-radius:999px;padding-left:1.2em}
.textarea{border-radius:24px}
.alert{border-radius:24px;border-left-width:1px}
.alert b{font-family:var(--font-d);font-style:italic;font-size:1.15rem}
.switch::before{background:var(--accent2)}
.table-wrap{border-radius:24px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1B2433;
--surface:#243047;
--surface2:#1F293C;
--fg:#EEE6D6;
--muted:#B8B1A5;
--border:#EEE6D6;
--code-bg:#0F1520;
}
html.alt .hero{background:linear-gradient(#0F1A2E 0 62%,#3A3222 62%)}html.alt .docnav{background:rgba(27,36,51,.9)!important}html.alt .stage{background:linear-gradient(#0F1A2E 0 65%,#3A3222 65%)}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a sleep and meditation app in an authentic Surrealism style.
Palette: Dream sky #BFD8E6, Sand #D8C29A, Bone #F4EEE2, Vermilion #D9573B, Gold hour #E9B44C, Night ink #1F2A3A.
Typography: Cormorant Garamond italic 500 for headings, Karla for body.
Layout: A tall hero with a low horizon line, big sky, and a lone arched doorway glowing on the right. Text sits top left in a calm column.
Signature details: Arch-shaped cards and image frames, one floating eye or object, long soft shadows as in late afternoon, clouds drifting slowly.
Components: Pill buttons, pill-shaped inputs, arch-topped cards, italic serif badges, generous 28px padding.
Motion: Slow drifting and melting transitions of 6 seconds or longer. Nothing snaps.
Avoid: busy collages, neon colors, direct copies of famous surrealist paintings, chaotic grids, dark horror imagery.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Random oddities feel like noise. Each surreal element should connect to the message.
Classic surrealism is sparse. Too many objects destroy the calm.
Dreamy does not mean confusing. Menus and buttons stay obvious.
Quoting Dalí or Magritte directly raises copyright issues and feels cheap. Invent your own images.