Surrealism

This entry has no operable specimen yet; the illustration is an editorial demonstration of how a surrealist visual style might appear in a brand hero image. Before use in a product, verify that the surreal imagery is fully separated from the page's real interface state, controls, and feedback, so users don't mistake dreamlike visual elements for functional prompts or system messages.

{
  "tokens": {
    "surface": "#f2e8d6",
    "ink": "#2b2a3d",
    "accent": "#b5673a",
    "radiusPx": 12,
    "shadow": "0 16px 36px rgba(43, 42, 61, 0.22)"
  },
  "tokenScope": "This is a sample recipe only, illustrating a warm brown and slate-blue palette commonly used in surrealist illustration; real applications should recolor based on the specific artwork and the page it appears on."
}

{
  "id": "surrealism",
  "type": "visual",
  "name": {
    "zh": "超现实视觉风格",
    "en": "Surrealism"
  },
  "aliases": [
    "Surrealist Style",
    "超现实主义视觉风格",
    "Surreal Illustration"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand"
  ],
  "tags": [
    "surreal",
    "dream logic",
    "impossible juxtaposition",
    "precise rendering",
    "absurdity"
  ],
  "definition": "A visual style that renders real objects with precise, realistic detail, then places them in impossible juxtapositions or gives them impossible states (floating, melting, unnaturally huge or tiny) to create dream-like, illogical scenes. It traces back to the Surrealist art movement, launched when Andre Breton published the Surrealist Manifesto in 1924, which originally called for recording the unconscious and dreams through \"pure psychic automatism.\"",
  "boundary": "This entry covers an image/illustration style applied to brand and editorial visual material (hero images, covers, marketing imagery) -- it is not a UI layout or interaction pattern. It does not change the interface's information architecture or how it operates, only the content of decorative imagery. \"Absurd\" and \"dreamlike\" are variants of the same tone and are treated here as variants of this entry rather than separate concepts. This style depends on precise, realistic rendering of the objects themselves to create its contrast -- crudely juxtaposed picture fragments (collage) do not count as surrealism in this sense: collage creates tension through mismatched edges and materials, while surrealism relies on a single, coherent, realistic rendering to make an impossible scene feel \"credible.\" The historical Surrealist art movement itself is out of scope here; only its visual technique is applied to contemporary brand and editorial contexts. AI image generation tools have clearly lowered the effort and cost of producing this kind of precise, realistic rendering in recent years, but this entry does not make any unsupported claim about adoption rate or how widespread it has become.",
  "signature": [
    "Real objects are rendered with precise, near-photographic realism",
    "Those realistically rendered objects are placed in scenes that break everyday scale, gravity, or causality: floating, melting, unnaturally huge or tiny",
    "The overall composition stays quiet, with generous negative space, creating a dream-like stillness and strangeness rather than visual clutter"
  ],
  "when": [
    "A brand or editorial piece wants imagery that creates a memorable, emotionally striking effect through illogical scenes, rather than explaining a specific function",
    "The hero image, cover, or marketing visual can stand apart from the interface's real state, without users mistaking its content for system feedback",
    "The team has (or can reach, via AI generation tools) enough precise, realistic illustration skill to make the impossible scene feel \"exact\" rather than \"sloppy\""
  ],
  "when_not": [
    "Anywhere that communicates the interface's actual state, a control's function, an operation's result, or an error message -- a dreamlike image cannot substitute for clear, literal usability feedback",
    "Task-oriented, information-dense interfaces where users need to quickly grasp hierarchy and what they can act on",
    "The team can only produce a rough collage or low-fidelity rendering instead of precise, realistic imagery, which makes the result look careless rather than a deliberately crafted dream"
  ],
  "tradeoff": "Precisely rendered, contrasting scenes can create strong visual memorability and emotional impact, but if placed near interface elements that need clear state information, users may mistake the decorative image for functional feedback. AI image generation has also clearly lowered the barrier to producing this kind of precise, realistic imagery, which can dilute the style's own distinctiveness and brand recognizability.",
  "comparison": {
    "focus": "Dream logic and contrast produced through precise, realistic rendering",
    "mechanism": "Precise rendering of real objects combined with impossible juxtaposition, scale, or state changes",
    "cost": "Must be kept clearly separate from real interface state to avoid misleading users; the effect suffers if the rendering isn't precise enough"
  },
  "sources": [
    {
      "id": "surrealism-tate",
      "title": "Tate · Surrealism",
      "url": "https://www.tate.org.uk/art/art-terms/s/surrealism",
      "claim": "This entry defines Surrealism as an art movement that balances rational, lived experience with the power of the unconscious and dreams, aiming to \"revolutionise human experience,\" as defined manifesto-style by Andre Breton through \"pure psychic automatism.\" It notes that some artists focused on depicting dream worlds or hidden psychological tensions, finding magic and strange beauty in \"the unexpected and the uncanny.\" This entry's description of dream logic and estrangement draws on that account.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.tate.org.uk/art/art-terms/s/surrealism",
        "status": "available",
        "checkedAt": "2026-09-16T05:25:04.032Z",
        "jobId": "spn2-2b440538f5e74d77405aaefc5c08399a5437f901",
        "url": "https://web.archive.org/web/20260916052511/https://www.tate.org.uk/art/art-terms/s/surrealism",
        "timestamp": "20260916052511"
      }
    },
    {
      "id": "surrealism-artstory",
      "title": "The Art Story · Surrealism Movement Overview",
      "url": "https://www.theartstory.org/movement/surrealism/",
      "claim": "This source records that Andre Breton founded the movement by publishing the Surrealist Manifesto in 1924, defining its core method as \"psychic automatism in its pure state,\" used to express the true functioning of thought. It notes that painters such as Dali, Tanguy, and Magritte used precise, realistic techniques with \"crisp detail and the illusion of three-dimensionality\" to render seemingly absurd dream subjects, and that Ernst summarized the technique as \"the coupling of two realities, irreconcilable in appearance, upon a plane which apparently does not suit them.\" This entry's description of the 1924 origin, precise rendering, and impossible juxtaposition draws on that account.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.theartstory.org/movement/surrealism/",
        "status": "available",
        "checkedAt": "2026-09-16T05:25:09.035Z",
        "jobId": "spn2-76b0b1dadb26642792714a56a19d10252514682a",
        "url": "https://web.archive.org/web/20260916052516/https://www.theartstory.org/movement/surrealism/",
        "timestamp": "20260916052516"
      }
    }
  ],
  "relations": [
    {
      "target": "minimalism",
      "kind": "alternative",
      "condition": "Choosing the primary visual tone for the same brand",
      "reason": "Minimalism expresses its character by removing elements and using restrained whitespace, while surrealism creates visual impact through precise rendering and contrast. The two moods are opposed and usually should not both serve as the same product's primary visual language.",
      "basis": "editorial"
    },
    {
      "target": "skeuomorphism",
      "kind": "related",
      "condition": "Both rely on precise, realistic rendering of real-world objects",
      "reason": "Skeuomorphism uses realistic materials and forms to explain interface function, while surrealism uses the same kind of realistic rendering to construct impossible scenes. The rendering approach is similar, but the goal is opposite: one aims for comprehensibility, the other for estrangement.",
      "basis": "editorial"
    },
    {
      "target": "glassmorphism",
      "kind": "related",
      "condition": "Both can be applied as a surface/imagery style layered on top of brand visuals, rather than a layout or interaction pattern",
      "reason": "Neither changes information architecture -- both only change the visual surface. Both need the same caution: don't let the style effect obscure or confuse the interface's real state and controls.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "A surreal illustration appears on a page that also contains real interface controls or status messages",
      "instruction": "Surreal effects such as floating, melting, or impossible scale must not cover, obscure, or confuse the position or meaning of real interactive elements such as buttons, forms, or status messages; those functional UI elements must remain realistic, normally proportioned, and clear in meaning.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Surreal imagery is used to shape a brand's hero visual or editorial mood",
      "instruction": "Keep dreamlike or absurd effects confined to decorative illustration areas; don't treat them as a source of real system status or feedback. Use literal, explicit interface language whenever state needs to be communicated.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#f2e8d6",
      "ink": "#2b2a3d",
      "accent": "#b5673a",
      "radiusPx": 12,
      "shadow": "0 16px 36px rgba(43, 42, 61, 0.22)"
    },
    "tokenScope": "This is a sample recipe only, illustrating a warm brown and slate-blue palette commonly used in surrealist illustration; real applications should recolor based on the specific artwork and the page it appears on."
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no operable specimen yet; the illustration is an editorial demonstration of how a surrealist visual style might appear in a brand hero image. Before use in a product, verify that the surreal imagery is fully separated from the page's real interface state, controls, and feedback, so users don't mistake dreamlike visual elements for functional prompts or system messages.",
  "image": {
    "src": "/images/surrealism.webp",
    "alt": "A fictional FIELDNOTES brand hero image showing an oversized leaf floating in an empty sky, casting a long shadow over a small doorway, rendered in a precise, flat, realistic style with impossible scale, in a soft warm brown and sage palette."
  },
  "searchTerms": [
    "超现实",
    "梦境逻辑",
    "反差并置",
    "精细写实",
    "荒诞感"
  ]
}