StyleKitSoft UIView Docs
Soft UI Design System

Gentle. Elegant.
Delightful.

A warm, approachable design system rooted in neumorphic depth, generous rounded corners, and colored shadows that feel alive to the touch.

24K

Happy Users

98%

Satisfaction

4.9

App Rating

Components

Interactive building blocks built on Soft UI principles.

Variants

Sizes

States

Color System

Soft, harmonious tones with matching neumorphic shadows.

Primary

#6366f1

Indigo 500

Secondary

#f1f5f9

Slate 100

Accent Pink

#ec4899

Pink 500

Accent Green

#10b981

Emerald 500

Accent Amber

#f59e0b

Amber 400

Surface

#ffffff

White

Usage Guidelines

Primary (#6366f1)

CTAs, interactive elements, active states, focus rings. Always pair with colored shadow.

Secondary (#f1f5f9)

Input backgrounds, ghost buttons, tag backgrounds. Base of the neumorphic surface.

Accents

Pink #ec4899, Green #10b981, Amber #f59e0b. Semantic highlights and category markers.

Design Rules

The do and don't of building with Soft UI.

Do

  • Use rounded-2xl or rounded-3xl as primary border radius
  • Use shadow-lg or shadow-xl with color tint (shadow-[accent]/20)
  • Background: soft bg-slate-50 or bg-gray-50
  • Use low-saturation primary color tones
  • Buttons: hover:shadow-xl + hover:-translate-y-0.5 lift effect
  • Cards: gap-6 or gap-8 for generous spacing
  • Icons: circular background rounded-full bg-[color]/10

Don't

  • Sharp corners — rounded-none is forbidden
  • Pure black #000000 anywhere in the UI
  • High-saturation solid colors without softening
  • Hard borders — border-black or border-2 in dark tones
  • Hard shadows with no blur radius
  • Tight, cramped element spacing

Typography

Soft UI pairs rounded, friendly typefaces with soft gray text hierarchy.

Display

Soft & Round

Heading 1

Friendly Interface

Heading 2

Approachable Design

Heading 3

Gentle Aesthetic

Body Large

Soft UI brings warmth and clarity to every interaction.

Body

Low saturation colors and generous rounded corners create visual comfort.

Caption

Secondary text uses slate-500 for low contrast harmony.

Font Family

Inter / System UI

Rounded, friendly proportions

Base Size

16px / 1rem

Comfortable reading size

Line Height

1.6 — relaxed

Generous breathing room

Controls

Soft toggles, checkboxes, tabs and dropdowns with pillow-press states.

Toggles

Checkboxes

Pill Tabs

A gentle introduction to our soft, approachable design system — built for warmth and clarity.

Dropdown

Alerts

Soft status messages with neumorphic treatment.

Info

Here is some helpful information to guide your next action.

Success

Your changes have been saved successfully.

Warning

Please review your settings before continuing.

Error

Something went wrong. Please try again.

Progress

Rounded progress bars with soft-tinted fills and inset track.

Design78%
Development62%
Testing45%
Deployment28%

Testimonials

Real teams building warmer products with Soft UI.

“

The softness of this system immediately put our users at ease. Engagement went up 34% after the redesign.

SC

Sarah Chen

Head of Design

“

I never thought colored shadows could make such a difference. The depth feels real, not decorative.

AK

Alex Kim

Product Engineer

“

Our consumer app onboarding felt cold. After switching to Soft UI principles, retention improved dramatically.

JL

Jordan Lee

Growth Lead

Design Philosophy

Make every pixel feel
warm and welcoming.

Soft UI design is rooted in the belief that interfaces should feel friendly, not clinical. Through neumorphic depth, pastel palettes, and pillow-press interactions, we create digital experiences that users genuinely enjoy touching.

View Full DocsExplore Styles

StyleKit

Soft UI Showcase

All StylesSoft UI DocsHome

StyleKit — Soft UI design system showcase