Best For
soft ui / soft design / rounded corners
Soft UI
柔和界面风
D
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.
soft uisoft designrounded cornersfriendly interfacesoft shadowspastel colorsconsumer app designapproachable uimobile app landing pagegentle gradientsrounded buttons
Primary Move
Use rounded-2xl or rounded-3xl as primary border radius
Watch Out
Do not use sharp corners rounded-none
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.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- use sharp corners rounded-none
- use pure black #000000
- use high-saturation pure colors
- use hard borders border-black
- use hard shadows (shadows without blur)
- use tight element spacing
## 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 sharp corners rounded-none
- [ ] do not use pure black #000000
- [ ] do not use high-saturation pure colors
- [ ] do not use hard borders border-black
- [ ] do not use hard shadows (shadows without blur)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%
PartialUI States
85%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
70%
PartialKey State Coverage
light / darkHoverFocus 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.
FAQ
Soft UI — Frequently Asked Questions
- What is the Soft UI design style?
- Gentle and friendly interface style with soft shadows, rounded corners, and low-saturation colors. Ideal for consumer apps, social products, and lifestyle service apps. Its core principle: Soft UI design style emphasizes a friendly, approachable, and comfortable visual experience that makes users feel relaxed and delighted.
- What colors does Soft UI use?
- Soft UI uses #6366f1 as its primary color and #f1f5f9 as its secondary color, with accent colors #ec4899, #10b981, #f59e0b, #d15d1a. Every hex value can be copied from the palette on this page.
- How do I apply Soft UI correctly?
- Key practices: Use rounded-2xl or rounded-3xl as primary border radius. Use shadow-lg or shadow-xl with transparency shadow-[accent]/20. Backgrounds use light tones bg-slate-50, bg-gray-50.
- What are common mistakes with Soft UI?
- Avoid: Do not use sharp corners rounded-none. Do not use pure black #000000. Do not use high-saturation pure colors.
- How do I prompt AI to generate Soft UI 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: soft ui, soft design, rounded corners, friendly interface.
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 Soft UI style.
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.
46
Overall Score
Grade: D - Poor
Contrast Ratios
Score: 29/100Average Ratio: 3.59:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| 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.