超现实主义风

Surrealism

57/100Poor

Inspired by surrealist masters like Dali -- dreamlike scene compositions, illogical spatial relationships, melting and morphing forms, and unexpected color combinations create a mysterious and captivating visual experience.

超现实梦境Dali融化不合逻辑潜意识奇幻expressiveboldvibrant

View Full Showcase →Templates

Best For

超现实 / 梦境 / Dali

Primary Move

Use midnight blue and desert gold palette

Watch Out

Do not use overly bright pure colors

Showcase Entry

Live preview of the showcase page. Click to explore the full experience.

View Full Showcase →

Color Palette

Primary

#1a1a3e

Secondary

#f0ece4

Accent 1

#d4a574

Accent 2

#c38d94

Accent 3

#4a3f6b

Accent 4

#90ba6d

AI Implementation

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Surrealism
style_slug: surrealism
style_source: /styles/surrealism

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
You are a Surrealism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Pure white backgrounds
- Strictly symmetrical grid layouts
- Bright neon colors
- Overly regular geometric shapes

## Must Follow

- Midnight blue #1a1a3e as dark base tone
- Desert gold #d4a574 and rose pink #c38d94 as accent colors
- Cream white #f0ece4 as light background
- Use font-serif italic for a dreamy feel
- Soft gradients and blurred glow effects

## Color Palette

Primary:
- Midnight Blue: #1a1a3e
- Desert Gold: #d4a574
- Rose Pink: #c38d94
- Cream White: #f0ece4

## Special Elements

- Blurred glow background decorations
- Asymmetric layouts and organic shapes
- Soft transition animations (duration-500)
- Unexpected color gradient combinations

## Animation & Interaction Rules

- Dream-like Distortion: Hover applies geometric reality-bending `hover:skew-x-2 hover:-rotate-1` -- as if the element is being pulled through a dream portal. Never use `hover:scale-105` alone; distortion (skew/rotate) is how surrealism deforms reality.
- Timeless Easing: All transitions use `duration-700 ease-in-out` minimum, preferring `duration-1000 ease-in-out` -- surrealist time is elastic. Never use `duration-200` or faster; urgency is a rational concept.
- Abyssal Glow: Hover shadow uses large diffuse rose/gold `hover:shadow-[0_0_50px_rgba(195,141,148,0.3)]` -- light wells up from within the dream. Never use black drop shadows; they belong to the rational world.
- Color Melting: Blurred orb decorations slowly expand `group-hover:scale-150 transition-transform duration-[2000ms] ease-in-out` -- colors bleed across the canvas over 2 full seconds. The expanding underline `group-hover:w-full transition-all duration-1000` and heading `group-hover:tracking-widest transition-all duration-1000` melt together.

Component Templates

Component Preview

按钮

超现实主义风格按钮，Dream-like Distortion `skew+rotate` + Timeless Easing `duration-1000` + Abyssal Glow 漫射光晕 + 有机圆角

Frontend Readiness

Dark Mode, States, Motion, and Accessibility

This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.

Overall

51%

Fallback

Dark Mode

Missing

UI States

79%

Partial

Motion

70%

Partial

A11y

70%

Partial

Performance

35%

Fallback

Key State Coverage

light

HoverFocus VisibleDisabledLoadingEmptyErrorSuccess

Button

Default / Hover / Focus Visible / Active / Disabled

Input

Default / Hover / Focus Visible / Disabled / Error

Card

Default / Hover / Focus Visible / Loading / Skeleton

Form

Default / Focus Visible / Disabled / Loading / Error

Implementation Notes

No curated dark-mode contract exists yet.
Check contrast in both light and dark modes.
Check heavy shadows, blur, large media, and scroll-linked effects manually.
No style-specific performance cost profile has been curated yet.

Global Styles

Global CSS

css

/* Surrealism 全局样式 */

:root {
  --sr-midnight: #1a1a3e;
  --sr-gold: #d4a574;
  --sr-rose: #c38d94;
  --sr-cream: #f0ece4;
}

/* 梦境模糊光晕 */
.sr-dream-glow {
  box-shadow:
    0 0 40px rgba(212, 165, 116, 0.2),
    0 0 80px rgba(195, 141, 148, 0.1);
}

/* 超现实渐变 */
.sr-gradient {
  background: linear-gradient(
    135deg,
    var(--sr-midnight) 0%,
    #2a2a5e 40%,
    var(--sr-rose) 70%,
    var(--sr-gold) 100%
  );
}

/* 融化效果 */
.sr-melt {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* 飘浮阴影 */
.sr-float-shadow {
  box-shadow:
    0 20px 60px rgba(26, 26, 62, 0.3),
    0 0 40px rgba(195, 141, 148, 0.15);
}
@keyframes surrealism-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes surrealism-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.surrealism-card {
  position: relative;
  overflow: hidden;
}

.surrealism-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 26, 62, 0.05), transparent);
  pointer-events: none;
}

.surrealism-card:hover::before {
  opacity: 1;
}

.surrealism-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 62, 0.08);
}

.surrealism-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.surrealism-animate-in {
  animation: surrealism-fade-in 0.5s ease-out both;
}

IDE Integration

IDE Configuration Export

Download configuration files for AI coding assistants to generate code in this style.

Style Pack

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Design Philosophy

Surrealism is an early 20th-century art movement dedicated to unleashing the creative power of the subconscious, breaking the boundaries between the rational and irrational.

Accessibility

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: D - Poor

Contrast Ratios

Score: 48/100Average Ratio: 5.49:1

AA FailAAA Fail

Context	Colors	Ratio
Text on background	/#1a1a3e / #f0ece4	14.13:1
Secondary text on background	/#d4a574 / #f0ece4	1.89:1
Muted text on background	/#1a1a3e / #f0ece4	14.13:1
Text on secondary background	/#1a1a3e / #1a1a3e	1:1
Secondary text on secondary	/#d4a574 / #1a1a3e	7.48:1
Text on accent 1	/#1a1a3e / #d4a574	7.48:1
Alt text on accent 1	/#d4a574 / #d4a574	1:1
Text on accent 2	/#1a1a3e / #c38d94	5.99:1
Alt text on accent 2	/#d4a574 / #c38d94	1.25:1
Text on accent 3	/#1a1a3e / #4a3f6b	1.76:1
Alt text on accent 3	/#d4a574 / #4a3f6b	4.26:1

Readability

Score

77/100

Font Size

text-sm md:text-base

Font Weight

font-serif italic

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.

超现实主义风

Surrealism

57/100Poor

超现实梦境Dali融化不合逻辑潜意识奇幻expressiveboldvibrant

Best For

超现实 / 梦境 / Dali

Primary Move

Use midnight blue and desert gold palette

Watch Out

Do not use overly bright pure colors

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Surrealism
style_slug: surrealism
style_source: /styles/surrealism

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
You are a Surrealism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Pure white backgrounds
- Strictly symmetrical grid layouts
- Bright neon colors
- Overly regular geometric shapes

## Must Follow

- Midnight blue #1a1a3e as dark base tone
- Desert gold #d4a574 and rose pink #c38d94 as accent colors
- Cream white #f0ece4 as light background
- Use font-serif italic for a dreamy feel
- Soft gradients and blurred glow effects

## Color Palette

Primary:
- Midnight Blue: #1a1a3e
- Desert Gold: #d4a574
- Rose Pink: #c38d94
- Cream White: #f0ece4

## Special Elements

- Blurred glow background decorations
- Asymmetric layouts and organic shapes
- Soft transition animations (duration-500)
- Unexpected color gradient combinations

## Animation & Interaction Rules

- Dream-like Distortion: Hover applies geometric reality-bending `hover:skew-x-2 hover:-rotate-1` -- as if the element is being pulled through a dream portal. Never use `hover:scale-105` alone; distortion (skew/rotate) is how surrealism deforms reality.
- Timeless Easing: All transitions use `duration-700 ease-in-out` minimum, preferring `duration-1000 ease-in-out` -- surrealist time is elastic. Never use `duration-200` or faster; urgency is a rational concept.
- Abyssal Glow: Hover shadow uses large diffuse rose/gold `hover:shadow-[0_0_50px_rgba(195,141,148,0.3)]` -- light wells up from within the dream. Never use black drop shadows; they belong to the rational world.
- Color Melting: Blurred orb decorations slowly expand `group-hover:scale-150 transition-transform duration-[2000ms] ease-in-out` -- colors bleed across the canvas over 2 full seconds. The expanding underline `group-hover:w-full transition-all duration-1000` and heading `group-hover:tracking-widest transition-all duration-1000` melt together.

Global CSS

css

/* Surrealism 全局样式 */

:root {
  --sr-midnight: #1a1a3e;
  --sr-gold: #d4a574;
  --sr-rose: #c38d94;
  --sr-cream: #f0ece4;
}

/* 梦境模糊光晕 */
.sr-dream-glow {
  box-shadow:
    0 0 40px rgba(212, 165, 116, 0.2),
    0 0 80px rgba(195, 141, 148, 0.1);
}

/* 超现实渐变 */
.sr-gradient {
  background: linear-gradient(
    135deg,
    var(--sr-midnight) 0%,
    #2a2a5e 40%,
    var(--sr-rose) 70%,
    var(--sr-gold) 100%
  );
}

/* 融化效果 */
.sr-melt {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* 飘浮阴影 */
.sr-float-shadow {
  box-shadow:
    0 20px 60px rgba(26, 26, 62, 0.3),
    0 0 40px rgba(195, 141, 148, 0.15);
}
@keyframes surrealism-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes surrealism-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.surrealism-card {
  position: relative;
  overflow: hidden;
}

.surrealism-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 26, 62, 0.05), transparent);
  pointer-events: none;
}

.surrealism-card:hover::before {
  opacity: 1;
}

.surrealism-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 62, 0.08);
}

.surrealism-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.surrealism-animate-in {
  animation: surrealism-fade-in 0.5s ease-out both;
}

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: D - Poor

Contrast Ratios

Score: 48/100Average Ratio: 5.49:1

AA FailAAA Fail

Context	Colors	Ratio
Text on background	/#1a1a3e / #f0ece4	14.13:1
Secondary text on background	/#d4a574 / #f0ece4	1.89:1
Muted text on background	/#1a1a3e / #f0ece4	14.13:1
Text on secondary background	/#1a1a3e / #1a1a3e	1:1
Secondary text on secondary	/#d4a574 / #1a1a3e	7.48:1
Text on accent 1	/#1a1a3e / #d4a574	7.48:1
Alt text on accent 1	/#d4a574 / #d4a574	1:1
Text on accent 2	/#1a1a3e / #c38d94	5.99:1
Alt text on accent 2	/#d4a574 / #c38d94	1.25:1
Text on accent 3	/#1a1a3e / #4a3f6b	1.76:1
Alt text on accent 3	/#d4a574 / #4a3f6b	4.26:1

Readability

Score

77/100

Font Size

text-sm md:text-base

Font Weight

font-serif italic

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.