柔和界面风

Soft UI

46/100Poor

Gentle and friendly interface style with soft shadows, rounded corners, and low-saturation colors. Ideal for consumer apps, social products, and lifestyle service apps.

柔和圆润友好消费类App社交生活服务moderncontemporarysleek

View Full Showcase →Templates

Best For

柔和 / 圆润 / 友好

Primary Move

Use rounded-2xl or rounded-3xl as primary border radius

Watch Out

Do not use sharp corners rounded-none

Showcase Entry

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

View Full Showcase →

Color Palette

Primary

#6366f1

Secondary

#f1f5f9

Accent 1

#ec4899

Accent 2

#10b981

Accent 3

#f59e0b

Accent 4

#d15d1a

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: Soft UI
style_slug: soft-ui
style_source: /styles/soft-ui

# 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
STYLE: Soft UI
TYPE: Friendly, approachable interface design

MUST USE:
- rounded-2xl or rounded-3xl for all components
- shadow-lg with color tint: shadow-[color]/20
- Soft backgrounds: bg-slate-50, bg-gray-50
- Hover lift effect: hover:-translate-y-0.5 hover:shadow-xl
- Low saturation primary colors
- Circular icon backgrounds: rounded-full bg-[color]/10

MUST AVOID:
- Sharp corners (rounded-none, rounded-sm)
- Pure black (#000000)
- High saturation pure colors
- Hard borders (border-black, border-2)
- Hard shadows (no blur)
- Tight spacing

COLOR RULES:
- Primary: Indigo/Purple tones (indigo-500)
- Background: Slate/Gray soft (slate-50, gray-50)
- Text: Gray-800 for headings, gray-500 for body
- Shadows: Always with color tint and opacity

SPACING:
- Card padding: p-6 md:p-8
- Section padding: py-16 md:py-24
- Gap: gap-6 md:gap-8

## Animation & Interaction Rules

- Cloud Float: Hover primarily uses lift with shadow spread, shadows stay colored and soft, avoid dirty gray hard shadows.
- Pillow Press: Active state uses slight scale and inner shadow, presenting a soft pillow-press feedback.
- Friendly Viscosity: Interaction rhythm recommends duration-300 and ease-in-out, avoiding abrupt speed changes.
- Halo Focus: Form focus uses large-radius low-opacity ring with soft glow shadow, not relying on hard borders.

Component Templates

Component Preview

按钮

Soft UI 风格的按钮

// Primary Button // Secondary Button // Soft Ghost

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

73%

Curated

Dark Mode

70%

Partial

UI States

85%

Partial

Motion

70%

Partial

A11y

70%

Partial

Performance

70%

Partial

Key State Coverage

light / dark

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

Dark soft UI needs subtle inner and outer shadows; avoid muddy low-contrast controls.
Check contrast in both light and dark modes.
Limit shadow-heavy components in tables or repeated cards.
Multiple layered shadows can increase paint cost on long scrolling lists.

Global Styles

Global CSS

css

/* Soft UI Global Styles */
@layer base {
  :root {
    --soft-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
  }

  body {
    @apply bg-slate-50 text-gray-800 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-semibold text-gray-800;
  }
}
@keyframes soft-ui-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.soft-ui-card {
  position: relative;
  overflow: hidden;
}

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

.soft-ui-card:hover::before {
  opacity: 1;
}

.soft-ui-gradient {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

.soft-ui-gradient-text {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.soft-ui-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(99, 102, 241, 0.08);
}

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

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

Compatible Layout Patterns

Recommended Layouts

The following layout patterns pair well with the 柔和界面风 style.

瀑布流布局

Masonry Flow

垂直时间线布局

Vertical Timeline

卡片堆叠布局

Card Stack

固定侧边栏布局

Fixed Sidebar

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

Soft UI design style emphasizes a friendly, approachable, and comfortable visual experience that makes users feel relaxed and delighted.

Accessibility

Accessibility Score

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

Overall Score

Grade: D - Poor

Contrast Ratios

Score: 29/100Average Ratio: 3.59:1

AA FailAAA Fail

Context	Colors	Ratio
Secondary text on secondary	/#4b5563 / #ffffff	7.56:1
Alt text on accent 1	/#4b5563 / #6366f1	1.69:1
Alt text on accent 2	/#4b5563 / #ec4899	2.14:1
Alt text on accent 3	/#4b5563 / #10b981	2.98:1

Readability

Score

85/100

Font Size

text-sm md:text-base

Font Weight

font-semibold

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.

柔和界面风

Soft UI

46/100Poor

Gentle and friendly interface style with soft shadows, rounded corners, and low-saturation colors. Ideal for consumer apps, social products, and lifestyle service apps.

柔和圆润友好消费类App社交生活服务moderncontemporarysleek

Best For

柔和 / 圆润 / 友好

Primary Move

Use rounded-2xl or rounded-3xl as primary border radius

Watch Out

Do not use sharp corners rounded-none

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: Soft UI
style_slug: soft-ui
style_source: /styles/soft-ui

# 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
STYLE: Soft UI
TYPE: Friendly, approachable interface design

MUST USE:
- rounded-2xl or rounded-3xl for all components
- shadow-lg with color tint: shadow-[color]/20
- Soft backgrounds: bg-slate-50, bg-gray-50
- Hover lift effect: hover:-translate-y-0.5 hover:shadow-xl
- Low saturation primary colors
- Circular icon backgrounds: rounded-full bg-[color]/10

MUST AVOID:
- Sharp corners (rounded-none, rounded-sm)
- Pure black (#000000)
- High saturation pure colors
- Hard borders (border-black, border-2)
- Hard shadows (no blur)
- Tight spacing

COLOR RULES:
- Primary: Indigo/Purple tones (indigo-500)
- Background: Slate/Gray soft (slate-50, gray-50)
- Text: Gray-800 for headings, gray-500 for body
- Shadows: Always with color tint and opacity

SPACING:
- Card padding: p-6 md:p-8
- Section padding: py-16 md:py-24
- Gap: gap-6 md:gap-8

## Animation & Interaction Rules

- Cloud Float: Hover primarily uses lift with shadow spread, shadows stay colored and soft, avoid dirty gray hard shadows.
- Pillow Press: Active state uses slight scale and inner shadow, presenting a soft pillow-press feedback.
- Friendly Viscosity: Interaction rhythm recommends duration-300 and ease-in-out, avoiding abrupt speed changes.
- Halo Focus: Form focus uses large-radius low-opacity ring with soft glow shadow, not relying on hard borders.

Global CSS

css

/* Soft UI Global Styles */
@layer base {
  :root {
    --soft-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
  }

  body {
    @apply bg-slate-50 text-gray-800 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-semibold text-gray-800;
  }
}
@keyframes soft-ui-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.soft-ui-card {
  position: relative;
  overflow: hidden;
}

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

.soft-ui-card:hover::before {
  opacity: 1;
}

.soft-ui-gradient {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

.soft-ui-gradient-text {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.soft-ui-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(99, 102, 241, 0.08);
}

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

.soft-ui-animate-in {
  animation: soft-ui-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: 29/100Average Ratio: 3.59:1

AA FailAAA Fail

Context	Colors	Ratio
Secondary text on secondary	/#4b5563 / #ffffff	7.56:1
Alt text on accent 1	/#4b5563 / #6366f1	1.69:1
Alt text on accent 2	/#4b5563 / #ec4899	2.14:1
Alt text on accent 3	/#4b5563 / #10b981	2.98:1

Readability

Score

85/100

Font Size

text-sm md:text-base

Font Weight

font-semibold

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.