Soft UI

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.

---

# Soft UI Design System

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

## Design Philosophy

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

Core principles:
- Warm and friendly: Convey approachability through soft shadows and rounded corners
- Low contrast: Avoid strong contrasts, use gentle color transitions
- Tactile design: Make interface elements look touchable
- Emotional connection: Convey warmth and care through design

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-0
Color: border-transparent
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-md shadow-gray-200/50
md: shadow-lg shadow-gray-200/50
lg: shadow-xl shadow-gray-200/50
hover: shadow-xl shadow-indigo-500/20
focus: ring-2 ring-indigo-500/50
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:-translate-y-0.5
Hover opacity: hover:shadow-xl
Transition: transition-all duration-200
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold
Body: font-normal
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-5xl lg:text-6xl
H1: text-3xl md:text-4xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-16 md:py-24
Container: px-4 md:px-6 lg:px-8
Card: p-6 md:p-8
Gap sm: gap-4
Gap md: gap-6 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-slate-50
Background secondary: bg-white
Background accent: bg-indigo-500, bg-pink-500, bg-emerald-500
Text primary: text-gray-800
Text secondary: text-gray-600
Text muted: text-gray-400
Button primary: bg-indigo-600 text-white shadow-lg shadow-indigo-600/30
Button secondary: bg-white text-gray-700 shadow-lg shadow-gray-200/50
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `rounded-sm`
- `border-2`
- `border-4`
- `border-black`
- `shadow-[`
- `bg-black`

### Banned patterns
- matches `^rounded-none`
- matches `^rounded-sm$`
- matches `^border-[24]`
- matches `^border-black`

### Why they are banned
- `rounded-none`: Soft UI requires large rounded corners (rounded-2xl+)
- `border-2`: Soft UI avoids visible borders, uses shadows instead
- `border-black`: Soft UI uses soft colors, never hard black borders

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-6 py-3
rounded-2xl
font-medium
shadow-lg
hover:-translate-y-0.5
hover:shadow-xl
transition-all duration-200
```

### Every card must include
```
bg-white
rounded-3xl
shadow-xl shadow-gray-200/50
hover:shadow-2xl
hover:-translate-y-1
transition-all duration-300
```

### Every input must include
```
px-5 py-3.5
bg-gray-50
border-0
rounded-2xl
focus:ring-2 focus:ring-indigo-500/50
focus:bg-white
transition-all duration-200
```

---

## [COMPARE] Soft UI wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-6 py-3 rounded-2xl font-medium shadow-lg hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 bg-indigo-600 text-white shadow-lg shadow-indigo-600/30">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white rounded-3xl shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 p-6 md:p-8">
 <h3 class="font-semibold text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="px-5 py-3.5 bg-gray-50 border-0 rounded-2xl focus:ring-2 focus:ring-indigo-500/50 focus:bg-white transition-all duration-200" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Soft UI page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-slate-50 text-gray-800 border-0 border-transparent px-4 md:px-6 lg:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
 <a href="/" class="font-semibold text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 md:gap-8 font-normal text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-indigo-500 text-gray-800 py-16 md:py-24 px-4 md:px-6 lg:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-4xl md:text-5xl lg:text-6xl">
 {HEADLINE}
 </h1>
 <p class="font-normal text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="px-6 py-3 rounded-2xl font-medium shadow-lg hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 bg-indigo-600 text-white shadow-lg shadow-indigo-600/30">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-slate-50 text-gray-800 py-16 md:py-24 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
 <!-- Card template - repeat for each card -->
 <div class="bg-white rounded-3xl shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 p-6 md:p-8">
 <h3 class="font-semibold text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-normal text-sm md:text-base text-gray-400">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="px-5 py-3.5 bg-gray-50 border-0 rounded-2xl focus:ring-2 focus:ring-indigo-500/50 focus:bg-white transition-all duration-200" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-gray-600 py-16 md:py-24 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
 <div>
 <span class="font-semibold text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-normal text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-normal text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Soft UI post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-6 py-3 rounded-2xl font-medium shadow-lg hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200`
- [ ] Card includes: `bg-white rounded-3xl shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300`
- [ ] Input includes: `px-5 py-3.5 bg-gray-50 border-0 rounded-2xl focus:ring-2 focus:ring-indigo-500/50 focus:bg-white transition-all duration-200`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-sm`
- [ ] Not using `border-2`
- [ ] Not using `border-4`
- [ ] Not using `border-black`
- [ ] Not using `shadow-[`
- [ ] Not using `bg-black`

### Style rule check
- [ ] 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
- [ ] Use low-saturation primary colors
- [ ] Buttons use hover:shadow-xl hover:-translate-y-0.5 floating effect

### Style drift check
- [ ] Does not violate: Do not use sharp corners rounded-none
- [ ] Does not violate: Do not use pure black #000000
- [ ] Does not violate: Do not use high-saturation pure colors
- [ ] Does not violate: Do not use hard borders border-black
- [ ] Does not violate: Do not use hard shadows (shadows without blur)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Soft UI

---

## [EXAMPLES] Example prompts

### 1. App

 App 

```
Create a consumer app landing using Soft UI style:
- Hero with app mockup and soft floating cards
- Feature section with rounded cards and colored shadows
- Testimonial cards with avatar and soft shadows
- CTA with gradient button (soft gradient)
- All rounded-2xl or rounded-3xl
- Hover effects with lift and shadow expansion
```

## 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)