Soft UI Evolution

Also called: Soft UI 2.0, Neumorphism 2.0, Accessible Neumorphism

Neumorphism grown up: the same gentle dual-shadow depth, but on white cards with real borders, solid colour buttons and visible focus.

“Accessible soft”Soft & DimensionalEra: 2021 → todayCalmTrustworthyFriendly

Open full screen ↗

soft-ui-evolution / landingEN

soft-ui-evolution / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg22pxRadius xl30pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

soft depth with borderswhite cards on cool greysubtle dual shadowsolid colour buttonstinted icon squirclesvisible focus ringaccessible soft UIcalm clinical blue

Soft UI Evolution keeps what people loved about neumorphism — pillowy depth, rounded corners, a calm light palette — and fixes what failed: contrast. Cards are white on a cool grey canvas, every surface has a 1px border, controls use solid saturated colour with white text, states are shown with colour and icons rather than shadows alone, and focus rings are always visible. It feels soft and premium yet passes WCAG AA, which makes it a favourite for health, finance and productivity products.

Best for

Health, telemedicine and patient portals
Banking and personal-finance apps
Productivity and booking tools
Products that must pass WCAG AA but want a soft feel

Avoid for

Loud youth or gaming brands
Editorial and long-read magazines
Brutalist or retro identities

✓ Do

Put white (#FFFFFF) cards with a 1px #C8D2DF border on a #EDF1F6 canvas
Keep the soft shadow subtle: white -6px -6px 16px plus a 10–12% navy shadow down-right
Use solid primary buttons with ≥ 4.5:1 text and a 3px focus ring
Show status with a coloured dot or icon plus text, not only with depth

✕ Don't

Don’t make cards the same colour as the page (that is plain neumorphism)
Don’t remove borders on inputs — keep 1.5px, ≥ 3:1 against the field
Don’t use heavy or coloured drop shadows
Don’t rely on inset shadow alone for selected states

Not to be confused with

Neumorphism →Neumorphism is one colour with shadows only; Soft UI Evolution adds white cards, borders, solid colour buttons and visible focus rings.Claymorphism →Claymorphism is puffy, pastel and toy-like with thick inner highlights; Soft UI Evolution is clean, clinical and mostly white.Fluent 2 →Fluent 2 uses flat 4px corners and almost no shadow; Soft UI Evolution has 14–20px radii and a gentle dual-direction shadow.

On mobile

Use white bordered cards on the grey canvas, 48px+ touch targets, a solid bottom tab bar with a tinted pill behind the active icon and a bold label. Keep the soft shadow only on cards and the primary button; lists can rely on borders alone for speed.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOutfit · 500/600/700

The quick brown fox

Heading · ThaiNoto Sans Thai · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinFigtree · 400/500/600/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai Looped · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Noto Sans Thai matches Outfit’s clean geometric headings, while looped Noto body text gives patients the most legible Thai at small sizes next to Figtree.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 22px · xl 30px · pill 999px`
Border	`1px`
Shadow	`-6px -6px 16px var(--su-hi), 8px 10px 24px var(--su-lo)`
Display	`clamp(2.5rem, 5vw, 4rem)`
Motion	`180ms cubic-bezier(.2,.8,.2,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Soft UI Evolution (soft-ui-evolution) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Noto+Sans+Thai:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap
 */
:root {
  --radius: 22px;
  --background: #EDF1F6;
  --foreground: #14202E;
  --card: #FFFFFF;
  --card-foreground: #14202E;
  --popover: #FFFFFF;
  --popover-foreground: #14202E;
  --primary: #0B63C4;
  --primary-foreground: #FFFFFF;
  --secondary: #0B7A6D;
  --secondary-foreground: #FFFFFF;
  --muted: #F4F7FA;
  --muted-foreground: #475569;
  --accent: #F4F7FA;
  --accent-foreground: #14202E;
  --destructive: #C22A3A;
  --border: #C8D2DF;
  --input: #C8D2DF;
  --ring: #0B63C4;
  --chart-1: #0B63C4;
  --chart-2: #0B9A8A;
  --chart-3: #7C8CF5;
  --chart-4: #F08A5D;
  --chart-5: #9FB0C4;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #14202E;
  --sidebar-primary: #0B63C4;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4F7FA;
  --sidebar-accent-foreground: #14202E;
  --sidebar-border: #C8D2DF;
  --sidebar-ring: #0B63C4;
}

.dark {
  --background: #111821;
  --foreground: #EAF0F7;
  --card: #1A2330;
  --card-foreground: #EAF0F7;
  --popover: #1A2330;
  --popover-foreground: #EAF0F7;
  --primary: #5AA6FF;
  --primary-foreground: #06203F;
  --secondary: #3FC7B4;
  --secondary-foreground: #04221E;
  --muted: #16202B;
  --muted-foreground: #A8B5C6;
  --accent: #16202B;
  --accent-foreground: #EAF0F7;
  --destructive: #FF7A86;
  --border: #334155;
  --input: #334155;
  --ring: #5AA6FF;
  --chart-1: #5AA6FF;
  --chart-2: #3FC7B4;
  --chart-3: #A5B1FF;
  --chart-4: #FFA27A;
  --chart-5: #6B7A8F;
  --sidebar: #1A2330;
  --sidebar-foreground: #EAF0F7;
  --sidebar-primary: #5AA6FF;
  --sidebar-primary-foreground: #06203F;
  --sidebar-accent: #16202B;
  --sidebar-accent-foreground: #EAF0F7;
  --sidebar-border: #334155;
  --sidebar-ring: #5AA6FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Soft UI Evolution (soft-ui-evolution) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Noto+Sans+Thai:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #EDF1F6;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F7FA;
  --color-text: #14202E;
  --color-text-muted: #475569;
  --color-primary: #0B63C4;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0B7A6D;
  --color-on-secondary: #FFFFFF;
  --color-accent: #D9466B;
  --color-border: #C8D2DF;
  --color-success: #15784A;
  --color-warning: #985A00;
  --color-danger: #C22A3A;
  --color-chart-1: #0B63C4;
  --color-chart-2: #0B9A8A;
  --color-chart-3: #7C8CF5;
  --color-chart-4: #F08A5D;
  --color-chart-5: #9FB0C4;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --font-heading: "Outfit", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Figtree", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai Looped", monospace;
}

.dark {
  --color-bg: #111821;
  --color-surface: #1A2330;
  --color-surface-2: #16202B;
  --color-text: #EAF0F7;
  --color-text-muted: #A8B5C6;
  --color-primary: #5AA6FF;
  --color-on-primary: #06203F;
  --color-secondary: #3FC7B4;
  --color-on-secondary: #04221E;
  --color-accent: #FF8AA6;
  --color-border: #334155;
  --color-success: #4CD38A;
  --color-warning: #F2B94B;
  --color-danger: #FF7A86;
  --color-chart-1: #5AA6FF;
  --color-chart-2: #3FC7B4;
  --color-chart-3: #A5B1FF;
  --color-chart-4: #FFA27A;
  --color-chart-5: #6B7A8F;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Soft UI Evolution (soft-ui-evolution). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Noto+Sans+Thai:wght@500;600;700&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9451,
            0.9647
          ],
          "hex": "#edf1f6"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9686,
            0.9804
          ],
          "hex": "#f4f7fa"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.1255,
            0.1804
          ],
          "hex": "#14202e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2784,
            0.3333,
            0.4118
          ],
          "hex": "#475569"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.3882,
            0.7686
          ],
          "hex": "#0b63c4"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4784,
            0.4275
          ],
          "hex": "#0b7a6d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.2745,
            0.4196
          ],
          "hex": "#d9466b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.8235,
            0.8745
          ],
          "hex": "#c8d2df"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.4706,
            0.2902
          ],
          "hex": "#15784a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5961,
            0.3529,
            0
          ],
          "hex": "#985a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.1647,
            0.2275
          ],
          "hex": "#c22a3a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.3882,
            0.7686
          ],
          "hex": "#0b63c4"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.6039,
            0.5412
          ],
          "hex": "#0b9a8a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.549,
            0.9608
          ],
          "hex": "#7c8cf5"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.5412,
            0.3647
          ],
          "hex": "#f08a5d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.6902,
            0.7686
          ],
          "hex": "#9fb0c4"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0941,
            0.1294
          ],
          "hex": "#111821"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1373,
            0.1882
          ],
          "hex": "#1a2330"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1255,
            0.1686
          ],
          "hex": "#16202b"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.9412,
            0.9686
          ],
          "hex": "#eaf0f7"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.7098,
            0.7765
          ],
          "hex": "#a8b5c6"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.651,
            1
          ],
          "hex": "#5aa6ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.1255,
            0.2471
          ],
          "hex": "#06203f"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7804,
            0.7059
          ],
          "hex": "#3fc7b4"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.1333,
            0.1176
          ],
          "hex": "#04221e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.651
          ],
          "hex": "#ff8aa6"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.2549,
            0.3333
          ],
          "hex": "#334155"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.8275,
            0.5412
          ],
          "hex": "#4cd38a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7255,
            0.2941
          ],
          "hex": "#f2b94b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.5255
          ],
          "hex": "#ff7a86"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.651,
            1
          ],
          "hex": "#5aa6ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7804,
            0.7059
          ],
          "hex": "#3fc7b4"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6471,
            0.6941,
            1
          ],
          "hex": "#a5b1ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6353,
            0.4784
          ],
          "hex": "#ffa27a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.4784,
            0.5608
          ],
          "hex": "#6b7a8f"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 30,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Outfit",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Noto Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!