OPTIONAL MATERIAL

Soft UI

Neumorphism for native HTML: surfaces gently rise from their background, fields sit inside it, and buttons press inward.

The same interface in light and dark

Make room for good work.

Opaque surfaces, paired shadows, and readable text drawn from the existing palette.

How is it made?

A light shadow toward the upper left and a darker shadow toward the lower right. Text controls reverse the shadows.

Make room for good work.

Opaque surfaces, paired shadows, and readable text drawn from the existing palette.

How is it made?

A light shadow toward the upper left and a darker shadow toward the lower right. Text controls reverse the shadows.

Open any demo, choose Customize → Material → Soft UI, and use Shadows to adjust the depth.

Load and activate

Load this optional stylesheet after the core, then set the existing material attribute on a parent or supported component.

HTMLSelect text to copy
<link rel="stylesheet" href="reva.css">
<link rel="stylesheet" href="reva.soft.css">

<section data-material="soft" data-theme="light" data-shape="rounded">
  <article class="card">
    <h2>Overview</h2>
    <p>Raised surfaces. Clear content.</p>
    <button type="button" class="secondary">View report</button>
  </article>
</section>

Scoped applications can load reva.scoped.css and reva.soft.scoped.css inside the existing .reva boundary.

Raised actions and inset controls

Primary and semantic actions retain their colours. Secondary buttons share the surface colour. Outline and ghost actions retain their own treatment. Focus outlines, invalid borders and disabled states come from the core.

Project details
HTMLSelect text to copy
<section class="stack" data-material="soft" data-theme="light" data-tone="cool">
  <fieldset>
    <legend>Project details</legend>
    <div class="form-group"><label for="soft-name">Project name</label><input id="soft-name" value="Spring collection"></div>
    <div class="form-group"><label for="soft-status">Status</label><select id="soft-status"><option>Planning</option><option>Creating</option></select></div>
    <div class="form-group"><label for="soft-notes">Notes</label><textarea id="soft-notes">A little room for the next idea.</textarea></div>
    <div class="row"><button type="button">Save project</button><button type="button" class="secondary">Preview</button><button type="button" class="outline">Cancel</button><button type="button" disabled>Unavailable</button></div>
  </fieldset>
</section>

Shared depth and material boundaries

Use existing settings: no new structural classes or configuration attributes.

Raised surface

The parent supplies Soft UI.

Flat depth

The shared depth setting removes paired shadows.

Solid exception

This section keeps the core finish.

Soft UI again

A local material starts a new scope.

HTMLSelect text to copy
<section class="stack" data-material="soft" data-theme="light" data-tone="cool">
  <article class="card"><h3>Raised surface</h3><p>The parent supplies Soft UI.</p></article>
  <article class="card" data-depth="flat"><h3>Flat depth</h3><p>The shared depth setting removes paired shadows.</p></article>
  <section class="stack" data-material="solid">
    <article class="card"><h3>Solid exception</h3><p>This section keeps the core finish.</p></article>
    <article class="card" data-material="soft"><h3>Soft UI again</h3><p>A local material starts a new scope.</p></article>
  </section>
</section>

Shared settings

  • Theme, palette and tone supply the colours. Shape, borders, density and size keep their existing meaning.
  • Depth controls raised and inset shadows: flat, subtle or pronounced. Minimal text controls remove inset shadows.
  • More Contrast removes decorative shadows. System increased contrast, forced colours and print simplify the finish.
  • Core focus outlines remain visible. Decoration adds no continuous animation or backdrop blur.
  • Supported surfaces include cards, fieldsets, disclosures, dialogs, popovers, top navigation and app shell panels. Actions and text fields receive the matching finish; badges and alerts keep their semantic core styling.

This is a CSS material, not an interaction engine. Application code supplies toggle state and content. Physical-device and browser regression suites have not been run for this new material.