# Neumorphism > Everything is moulded from one soft grey-blue sheet: raised with a light and a dark shadow, pressed in with inset shadows. - Nickname: Soft extrude - Also called: Soft UI, New Skeuomorphism, Neomorphism - Category: Soft & Dimensional - Moods: Calm, Dreamy, Friendly - Industries: Fitness & Wellness, Healthcare, Fintech & Banking, SaaS - Style page: https://uilingo.dev/styles/neumorphism/ Neumorphism treats the screen as a single soft plastic surface. Cards, buttons and inputs are the same colour as the background and only exist through two blurred shadows — white towards the top-left light source, grey-blue towards the bottom-right. Raised means "tap me", inset means "pressed / selected / type here". Colour is limited to one calm accent, borders disappear, corners are generously rounded and the mood is quiet, tactile and calm. ## Best for - Meditation, sleep and wellness apps - Smart-home and device controls (dials, toggles) - Music players and calculators - Small dashboards with few, large controls ## Avoid for - Accessibility-critical products (low edge contrast) - Dense data tables and enterprise tools - Text-heavy reading pages - Brands that need strong colour ## Do - Use one background colour (#E0E5EC) for page, cards and controls - Pair a white top-left shadow with a #A3B1C6 bottom-right shadow of equal blur - Show pressed / selected / input states with the same shadows inset - Keep one accent colour for the primary action and active icons ## Don't - Don’t add borders or contrasting card fills — that is Soft UI Evolution - Don’t mix light directions or use black shadows - Don’t rely on the shadow alone for critical states; add accent text or an icon - Don’t nest more than two depth levels ## 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 "Neumorphism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Everything is moulded from one soft grey-blue sheet: raised with a light and a dark shadow, pressed in with inset shadows. Design keywords: same-colour surfaces, dual light and dark shadow, extruded buttons, pressed inset state, soft grey-blue base, no borders, top-left light source, one calm accent. ## Visual language The whole interface is moulded from one matte, soft grey-blue sheet (#E0E5EC). Nothing has a border or a different fill: cards, buttons and fields exist only because a white shadow falls to the top-left and a grey-blue shadow to the bottom-right, as if lit by a soft lamp at the upper left. Interactive things are raised; pressed, selected and typing areas are the same shapes pushed into the surface with inset shadows. One calm indigo accent marks the primary action and active icons; everything else is quiet slate on grey, with rounded friendly type and lots of air. ## Signature details (must be visible) - Page, cards, buttons and inputs all use the same background colour #E0E5EC — no contrasting card fill, no borders (border: 0) - Raised elements: box-shadow -7px -7px 16px #FFFFFF, 7px 7px 16px #A3B1C6 (small controls -3px -3px 7px / 3px 3px 7px) - Pressed / selected / input state: the same pair inset — inset 3px 3px 6px #A3B1C6, inset -3px -3px 6px #FFFFFF - Single light source at the top-left everywhere; never mix shadow directions and never use black shadows - Generous radii: 16px controls, 26px cards, pill buttons and fields, perfect circles for icon wells and avatars - One accent (#4453C4) applied as a soft convex gradient (145deg, lighter top-left to darker bottom-right) on the primary button, progress fills and active text - Headings carry a faint emboss: text-shadow -1px -1px 1px #FFFFFF, 2px 2px 3px rgba(163,177,198,.7) ## Design tokens — use these exact values Colours (light mode): - background #E0E5EC - surface #E0E5EC - surface-2 #D3DAE4 - text #2D3748 - text-muted #4E5869 - primary #4453C4 (text on it #FFFFFF) - secondary #2B7470 (text on it #FFFFFF) - accent #D9786A - border #C4CCD8 - success #2A7A4F · warning #9A6114 · danger #B83B33 - chart series #4453C4, #8794E6, #2B7470, #D9786A, #9AA5B8 Radius: sm 12px, md 16px, lg 26px, xl 34px, pill 999px Border width: 0px Shadows: sm `-3px -3px 7px var(--nm-hi), 3px 3px 7px var(--nm-lo)`, md `-7px -7px 16px var(--nm-hi), 7px 7px 16px var(--nm-lo)`, lg `-14px -14px 30px var(--nm-hi), 14px 14px 30px var(--nm-lo)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.15 density Motion: 220ms cubic-bezier(.3,.7,.3,1) ## Typography (Latin + Thai) - Headings: Nunito 600/700/800 with Thai fallback Niramit 500/600/700 - Body: Nunito Sans 400/600/700 with Thai fallback Niramit 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&family=Niramit:wght@400;500;600;700&display=swap - CSS stacks: heading `"Nunito", "Niramit", system-ui, sans-serif`; body `"Nunito Sans", "Niramit", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.4rem), heading weight 700, heading tracking -0.015em (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: Niramit is a gentle, loopless Thai with soft terminals that echo Nunito’s rounded ends without becoming cartoonish. ## Components - Buttons: raised bg-coloured pills with accent-coloured text; primary is a convex indigo pill with white text; hover grows the shadow, active swaps to the inset pair (the button sinks) - Cards: bg-coloured, 26px radius, medium dual shadow; the featured/selected card (e.g. highlighted price plan) is inset instead of raised and uses accent text - Inputs, selects, textareas and search: pill-shaped inset wells; focus deepens the inset and adds a 2px indigo ring at 45% opacity - Icon containers: 52px circular inset wells with an accent icon; avatars are convex discs with accent initials - Toggles: inset track, convex round thumb; checked thumb turns into the indigo convex gradient. Checkboxes/radios are inset wells that become convex accent buttons when checked - Tabs, segmented controls and chips: an inset track; the selected item pops up as a small raised pill with accent text - Nav: a floating raised pill bar; the current link is an inset pill - Charts: lines in the accent with a soft drop-shadow, donut lifted with dual drop-shadow filters, bars as raised pills, progress as an inset groove with a convex fill - Mobile tab bar: floating raised capsule; each icon sits in a 46px circle and the active one is pressed in (inset) and tinted accent ## 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: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → features → steps → stats → testimonials → pricing → faq → cta. Feature section as grid. Use a centred hero with an embossed headline, a raised primary and secondary button pair, and a product shot built from raised cards. Sections share the same background — separate them with space, not colour bands. Feature cards in a simple grid, steps as large circular raised dials, stats inside inset wells, FAQ items as raised rows that sink when open. The dashboard uses a slim icon rail of circular raised buttons (active one pressed in), a soft-shadowed top bar with an inset search pill, and few, large widgets with breathing room. ## Content Use realistic product copy (fictional brand) suited to: Meditation, sleep and wellness apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use one background colour (#E0E5EC) for page, cards and controls - Pair a white top-left shadow with a #A3B1C6 bottom-right shadow of equal blur - Show pressed / selected / input states with the same shadows inset - Keep one accent colour for the primary action and active icons ## Don't - Don’t add borders or contrasting card fills — that is Soft UI Evolution - Don’t mix light directions or use black shadows - Don’t rely on the shadow alone for critical states; add accent text or an icon - Don’t nest more than two depth levels - Borders, outlines or white cards on a grey page — that turns it into Soft UI Evolution - Multiple pastel fills or coloured drop shadows — that reads as Claymorphism - Textures, gloss, stitching or photo-real materials — that is Skeuomorphism - Black or hard shadows, or light coming from different directions on the same screen - Low-contrast grey text on grey for body copy; keep text at least #4E5869 on #E0E5EC - Deep nesting (raised card inside inset well inside raised card) — two levels maximum ## Stack notes One self-contained HTML file with a