What is the Surrealism design style?

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. Its core principle: 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.

What colors does Surrealism use?

Surrealism uses #1a1a3e as its primary color and #f0ece4 as its secondary color, with accent colors #d4a574, #c38d94, #4a3f6b, #90ba6d. Every hex value can be copied from the palette on this page.

How do I apply Surrealism correctly?

Key practices: Use midnight blue and desert gold palette. Create dreamlike soft gradients. Use unexpected element combinations.

How do I prompt AI to generate Surrealism UI?

Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: surrealism, surrealist design, dreamlike ui, Dali inspired.

Style Catalog/Surrealism

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.

surrealismsurrealist designdreamlike uiDali inspiredmelting shapesdream logicdistorted formsabstract art websitesubconsciousartistic portfolio

View Full Showcase →Templates

Best For

surrealism / surrealist design / dreamlike ui

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.

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use overly bright pure colors
- use strictly symmetrical grid layouts
- use modern minimalist undecorated design
- use harsh neon colors
- use `hover:scale-105` (surrealism uses `skew` and `rotate` to distort reality, not scaling)
- use black drop shadows (Abyssal Glow uses rose/gold diffuse glow -- black shadows break the dream feel)
- use `duration-200` or shorter transitions (Timeless Easing requires `duration-700` or above -- dream time is elastic)
- use `transition-none` on card decorative orbs (Color Melting requires slow `duration-[2000ms]` expansion)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use overly bright pure colors
- [ ] do not use strictly symmetrical grid layouts
- [ ] do not use modern minimalist undecorated design
- [ ] do not use harsh neon colors
- [ ] do not use `hover:scale-105` (surrealism uses `skew` and `rotate` to distort reality, not scaling)

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.

FAQ

Surrealism — Frequently Asked Questions

What is the Surrealism design style?: 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. Its core principle: 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.
What colors does Surrealism use?: Surrealism uses #1a1a3e as its primary color and #f0ece4 as its secondary color, with accent colors #d4a574, #c38d94, #4a3f6b, #90ba6d. Every hex value can be copied from the palette on this page.
How do I apply Surrealism correctly?: Key practices: Use midnight blue and desert gold palette. Create dreamlike soft gradients. Use unexpected element combinations.
What are common mistakes with Surrealism?: Avoid: Do not use overly bright pure colors. Do not use strictly symmetrical grid layouts. Do not use modern minimalist undecorated design.
How do I prompt AI to generate Surrealism UI?: Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: surrealism, surrealist design, dreamlike ui, Dali inspired.

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.

Style Catalog/Surrealism

Surrealism

超现实主义风

57/100Poor

surrealismsurrealist designdreamlike uiDali inspiredmelting shapesdream logicdistorted formsabstract art websitesubconsciousartistic portfolio

View Full Showcase →Templates

Best For

surrealism / surrealist design / dreamlike ui

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.

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use overly bright pure colors
- use strictly symmetrical grid layouts
- use modern minimalist undecorated design
- use harsh neon colors
- use `hover:scale-105` (surrealism uses `skew` and `rotate` to distort reality, not scaling)
- use black drop shadows (Abyssal Glow uses rose/gold diffuse glow -- black shadows break the dream feel)
- use `duration-200` or shorter transitions (Timeless Easing requires `duration-700` or above -- dream time is elastic)
- use `transition-none` on card decorative orbs (Color Melting requires slow `duration-[2000ms]` expansion)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use overly bright pure colors
- [ ] do not use strictly symmetrical grid layouts
- [ ] do not use modern minimalist undecorated design
- [ ] do not use harsh neon colors
- [ ] do not use `hover:scale-105` (surrealism uses `skew` and `rotate` to distort reality, not scaling)

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.

FAQ

Surrealism — Frequently Asked Questions

What is the Surrealism design style?: 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. Its core principle: 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.
What colors does Surrealism use?: Surrealism uses #1a1a3e as its primary color and #f0ece4 as its secondary color, with accent colors #d4a574, #c38d94, #4a3f6b, #90ba6d. Every hex value can be copied from the palette on this page.
How do I apply Surrealism correctly?: Key practices: Use midnight blue and desert gold palette. Create dreamlike soft gradients. Use unexpected element combinations.
What are common mistakes with Surrealism?: Avoid: Do not use overly bright pure colors. Do not use strictly symmetrical grid layouts. Do not use modern minimalist undecorated design.
How do I prompt AI to generate Surrealism UI?: Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: surrealism, surrealist design, dreamlike ui, Dali inspired.

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.