# Soft UI Evolution > Neumorphism grown up: the same gentle dual-shadow depth, but on white cards with real borders, solid colour buttons and visible focus. - Nickname: Accessible soft - Also called: Soft UI 2.0, Neumorphism 2.0, Accessible Neumorphism - Category: Soft & Dimensional - Moods: Calm, Trustworthy, Friendly - Industries: Healthcare, Fintech & Banking, SaaS, Fitness & Wellness, Government & Nonprofit - Style page: https://uilingo.dev/styles/soft-ui-evolution/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Soft UI Evolution" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Neumorphism grown up: the same gentle dual-shadow depth, but on white cards with real borders, solid colour buttons and visible focus. Design keywords: soft depth with borders, white cards on cool grey, subtle dual shadow, solid colour buttons, tinted icon squircles, visible focus ring, accessible soft UI, calm clinical blue. ## Visual language A calm, clinical, light interface with the pillowy depth of neumorphism but none of its contrast problems. Crisp white cards with a 1px cool-grey border float a few millimetres above a pale blue-grey canvas, lit by a soft white highlight top-left and a faint navy shadow bottom-right. Actions are solid, saturated blue with white text, status is always colour + dot + word, and every focusable thing shows a clear ring. It reads trustworthy and gentle — a well-designed patient portal or banking app. ## Signature details (must be visible) - Canvas #EDF1F6 with white (#FFFFFF) cards and a 1px #C8D2DF border on every card, list, chip and table header - Soft dual shadow on raised surfaces: -6px -6px 16px rgba(255,255,255,.9), 8px 10px 24px rgba(26,50,92,.13), plus inset 0 1px 0 white top highlight - Solid primary buttons (#0B63C4, white text) with a subtle top-to-bottom gradient, inset 1px white highlight and a soft blue glow 0 8px 18px -8px - Inputs keep a 1.5px #8C9AAE border (≥ 3:1) and a tiny inset shadow; focus = primary border + 4px ring at 22% primary - Focus-visible on buttons and checkboxes: 3px surface gap + 3px ring at 55% primary - Icon containers are 14px-radius tinted squircles (primary/teal/rose at 10%) with a 1px tint border - Badges = tinted pill + 1px tint border + 6px dot in the same colour before the text - Radii 10/14/22/30px; Outfit headings, Figtree body, looped Noto Sans Thai body for Thai ## Design tokens — use these exact values Colours (light mode): - background #EDF1F6 - surface #FFFFFF - surface-2 #F4F7FA - text #14202E - text-muted #475569 - primary #0B63C4 (text on it #FFFFFF) - secondary #0B7A6D (text on it #FFFFFF) - accent #D9466B - border #C8D2DF - success #15784A · warning #985A00 · danger #C22A3A - chart series #0B63C4, #0B9A8A, #7C8CF5, #F08A5D, #9FB0C4 Radius: sm 10px, md 14px, lg 22px, xl 30px, pill 999px Border width: 1px Shadows: sm `-2px -2px 6px var(--su-hi), 3px 4px 10px var(--su-lo)`, md `-6px -6px 16px var(--su-hi), 8px 10px 24px var(--su-lo)`, lg `-10px -10px 28px var(--su-hi), 16px 20px 44px var(--su-lo2)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 180ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Outfit 500/600/700 with Thai fallback Noto Sans Thai 500/600/700 - Body: Figtree 400/500/600/700 with Thai fallback Noto Sans Thai Looped 400/500/600 - Google Fonts URL: 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 - CSS stacks: heading `"Outfit", "Noto Sans Thai", system-ui, sans-serif`; body `"Figtree", "Noto Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4rem), heading weight 600, heading tracking -0.02em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: solid blue, 14px radius, glow shadow; hover lifts 1px and grows the glow; pressed sinks with an inset dark shadow; disabled = grey fill with dashed border - Secondary button: white, 1px border, primary text, soft dual shadow; hover tints the border blue - Cards: white, 1px border, 22px radius, soft dual shadow; hover lifts 2px and tints the border; highlighted plan is a solid blue gradient card with white text - Inputs/selects: white, 1.5px mid-grey border, inner shadow, blue focus ring; error state tints the field red and shows icon + message - Switch: bordered grey track; checked = solid blue track with a white thumb carrying a blue check mark - Chips and segmented controls: white bordered pills; selected = blue tint fill + blue border + blue text (never shadow alone) - Nav: white translucent bar with bottom border; current link is a tinted pill - Dashboard: top-nav shell, KPI cards with a 4px coloured top strip per series, table headers on a grey rounded band, status rows with ringed dots - Mobile tab bar: white bar with top border; active item gets a tinted pill indicator behind the icon and a bold blue label ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → trust → features → stats → steps → testimonials → faq → cta. Feature section as list. Split hero: left-aligned headline, solid primary + white secondary buttons, product shot inside a frosted white tray with a large soft shadow. Follow with trust badges as white pills, features as a two-column list of bordered cards with multi-colour tinted icons, stats in white cards with blue numbers, numbered steps in ringed circles, testimonials and an FAQ of bordered cards. Alternate sections with a translucent white band separated by 1px borders. Dashboards use a top navigation bar, generous gaps and clean, legible charts with solid gridlines. ## Content Use realistic product copy (fictional brand) suited to: Health, telemedicine and patient portals. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Cards the same colour as the background or borderless inputs — that is plain Neumorphism - Puffy pastel fills and thick inner highlights — that is Claymorphism - Grey-on-grey text or states shown only by inset/outset shadows - Heavy, dark or coloured drop shadows on every element - Square corners or flat 4px radii — that drifts towards Fluent / enterprise - More than one saturated hue competing for the primary action ## Stack notes One self-contained HTML file with a