MATERIAL / DEVELOPMENT PREVIEW

Veil

Diffused perimeter colour. Two quiet contours. A clear place for your content. Veil suggests thin, layered sheets without glass blur or continuously moving decoration.

A material for the whole interface

Light and dark follow the selected palette. Change the parent once; supported surfaces and actions inherit its finish.

A little more together

Make room for good work.

Soft colour collects near the perimeter. A mostly opaque backing keeps the centre calm.

Explore this demo

What creates the layers?

CSS backgrounds and two contained inset contours. No extra wrapper, image texture or decorative pseudo-element is needed.

A little more together

Make room for good work.

Soft colour collects near the perimeter. A mostly opaque backing keeps the centre calm.

Explore this demo

What creates the layers?

CSS backgrounds and two contained inset contours. No extra wrapper, image texture or decorative pseudo-element is needed.

Open the complete Ocean / Veil marketing website

Load and activate

Load the optional extension after the core. Veil is not bundled into the core stylesheet.

<!doctype html>
<html lang="en" data-theme="light" data-palette="ocean"
      data-material="veil" data-shape="rounded">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Veil interface</title>
  <link rel="stylesheet" href="/assets/reva/reva.css">
  <link rel="stylesheet" href="/assets/reva/reva.veil.css">
</head>
<body>
  <main class="container">
    <article class="card">
      <h1>A clearer space</h1>
      <p>One parent sets the material for supported descendants.</p>
      <button type="button">Continue</button>
    </article>
  </main>
</body>
</html>

Scoped applications

<link rel="stylesheet" href="/assets/reva/reva.scoped.css">
<link rel="stylesheet" href="/assets/reva/reva.veil.scoped.css">
<section class="reva" data-material="veil" data-theme="dark"
         data-palette="ocean" data-shape="rounded">
  <article class="card"><h2>A contained interface</h2></article>
</section>

Actions, controls and semantic colours

The parent configures the material. Warning and success remain local meanings; native controls retain their interaction and validation.

Room for the next idea.

A calm centre, with softly layered edges.

Read the guide

A shared material

This native popover inherits Veil too.

Project details

Project name

Stage

Ready for review

Review your project details before continuing.

<section class="stack" data-theme="dark" data-palette="ocean"
         data-material="veil" data-shape="rounded">
  <article class="card">
    <h3>Room for the next idea.</h3>
    <p>A calm centre, with softly layered edges.</p>
    <div class="row">
      <button type="button" popovertarget="veil-response">Open preview</button>
      <a class="button outline" href="/RevaCSS/guide/styling/">Read the guide</a>
      <button type="button" disabled>Unavailable</button>
    </div>
    <div id="veil-response" popover>
      <h4>A shared material</h4>
      <p>This native popover inherits Veil too.</p>
      <button type="button" popovertarget="veil-response"
              popovertargetaction="hide">Close preview</button>
    </div>
  </article>
  <fieldset>
    <legend>Project details</legend>
    <div class="form-group">
      <label for="veil-project">Project name</label>
      <input id="veil-project" value="Spring collection">
    </div>
    <div class="form-group">
      <label for="veil-stage">Stage</label>
      <select id="veil-stage"><option>Planning</option><option>Creating</option></select>
    </div>
  </fieldset>
  <p><span class="badge" data-variant="success">Ready for review</span></p>
  <div class="alert" data-variant="warning">Review your project details before continuing.</div>
</section>

Solid, Glass and Veil boundaries

A different explicit material stops the inherited treatment. Local re-entry works without resetting the palette.

Inherited Veil

The parent supplies the material.

Solid exception

Veil re-entry

A local material can resume inside the solid section.

Glass exception

Load reva.glass.css as well to activate blur here.

<section class="stack" data-theme="light" data-palette="ocean" data-material="veil">
  <article class="card"><h3>Inherited Veil</h3><p>The parent supplies the material.</p></article>
  <section class="stack" data-material="solid">
    <article class="card"><h3>Solid exception</h3><button type="button">Solid action</button></article>
    <article class="card" data-material="veil"><h3>Veil re-entry</h3><p>A local material can resume inside the solid section.</p></article>
  </section>
  <section data-material="glass">
    <article class="card"><h3>Glass exception</h3><p>Load reva.glass.css as well to activate blur here.</p></article>
  </section>
</section>

Shared settings and preferences

Theme and palette: all eight palettes, light, dark and System. Veil derives its colour from existing surface/action tokens.
Shape, density, size, borders and depth: retain their shared values. The two inset contours scale with border width; border none removes them. Outer shadows follow depth.
Fill: solid disables perimeter colour gradients; contained contours remain part of the material.
Motion: hover/focus gently shifts card and action highlights. Reduced motion stops transitions. There is no continuous material animation.
Edges: plain, gradient, shine and animated remain separate. Veil uses backgrounds and shadows, leaving the edge pseudo-element available.
Contrast/transparency: More Contrast removes tint contours and uses opaque backing. System reduced-transparency/increased-contrast preferences remove decorative sheen and shadows. Forced colours and print use plain readable paint.

Coverage: cards, fieldsets, disclosures, popovers/dialog surfaces, navigation, action controls, text fields, badges, alerts, list rows, tab labels and pagination items. Native checkboxes, radios, switches, progress and meter keep their existing treatment.

Veil requires the modern CSS features already used by RevaCSS, including scope and colour mixing. Unsupported treatment leaves core styling available. The stylesheet adds no modal behavior or ARIA tab interaction.

New development material. The image concept guided this implementation; it is not a pixel-for-pixel reproduction. Browser and physical-device validation are deferred until requested. Existing Glass fixture passes do not validate Veil.