REVACSS / COMPLETE WEBSITES

A shop with room to breathe.

Explore a product catalogue, category collections, individual products and a sample bag. Reuse the same saved appearance settings and download complete starting HTML.

Customize this demo

Every setting updates the website immediately. Your choices are remembered across demo pages when browser storage is available. You can also close with Escape or a click outside.

Theme

Palette

Material

Shape

Advanced options · motion, spacing and more

MotionAction transitions, accordion expansion and chevron rotation (expressive adds a fade), press movement, decorative edges, custom spinners, switch transitions and skeleton shimmer. Reduced motion wins; native progress is browser-owned.

Decorative edgesDecorative borders on buttons, .button links and cards. Shine sweeps on interaction; animated turns continuously. Native action inputs keep regular borders.

DensityControl and surface padding, list and description spacing, card sections and layout spacing.

ShadowsAction and surface shadows. Text-control inset shadows are configured with data-controls.

FillButton, badge and alert gradients; optional glass sheen. Does not change material.

TypographyPage or subtree typography.

Control sizeControls, menu actions, badges, alerts, accordion summaries, breadcrumbs, pagination, form labels, choice labels, spinners and avatars.

BordersStyled control and surface borders, table rules and navigation boundaries. Invalid-state and forced-colour boundaries take priority.

Page widthMaximum width of .container.

Navbar layout

ContrastForeground and boundary contrast; optional glass becomes opaque. System preferences retain their component-specific priority.

Motion changes transitions and popover entrances; edges can animate continuously or shine on interaction. Device accessibility preferences take priority.

<html lang="en"
  data-theme="auto"
  data-theme="light"
  data-theme="dark"
  data-palette="default"
  data-palette="mono"
  data-palette="sand"
  data-palette="ocean"
  data-palette="cobalt"
  data-palette="citrus"
  data-palette="violet"
  data-palette="forest"
  data-material="solid"
  data-material="glass"
  data-material="veil"
  data-material="soft"
  data-shape="square"
  data-shape="subtle"
  data-shape="rounded"
  data-shape="pill"
  data-motion="none"
  data-motion="subtle"
  data-motion="expressive"
  data-edge="plain"
  data-edge="gradient"
  data-edge="shine"
  data-edge="animated"
  data-density="compact"
  data-density="comfortable"
  data-density="spacious"
  data-depth="flat"
  data-depth="subtle"
  data-depth="pronounced"
  data-fill="gradient"
  data-fill="solid"
  data-type="compact"
  data-type="standard"
  data-type="large"
  data-size="small"
  data-size="medium"
  data-size="large"
  data-border="subtle"
  data-border="defined"
  data-border="none"
  data-width="narrow"
  data-width="standard"
  data-width="wide"
  data-navbar="standard"
  data-navbar="centered"
  data-navbar="floating"
  data-navbar="split"
  data-contrast="auto"
  data-contrast="more">

Download starting HTML

Downloads include your current settings with the optional helper enabled. Without JavaScript, the preview still works; copy the selected attributes into the starting HTML. Reset clears saved demo choices and restores this page’s defaults.

LESS, BUT LOVELIER.

Accessories.

Considered pieces for the spaces you make your own.

Explore the collection

Simple forms. A little warmth. Room to breathe.

Accessories

Everyday cup

€18.00

Accessories

Studio notebook

€24.00

Accessories

Small batch

Pebble vase

€42.00

Accessories

Oak serving tray

€56.00

THE STILL APPROACH

Keep what matters.

We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.

Honest materials

Natural textures and carefully chosen finishes.

A considered collection

Fewer objects, with more room for each one.

Made for everyday

Useful pieces that belong in your daily rituals.

Delivery and returns

This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.

Make this shop yours.

Products, prices, stock and the two-item bag are fictional sample data. Category and product links open complete pages. A commerce backend supplies inventory, cart updates and checkout; this starter does not accept orders or payments.

View complete starting HTML

<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Still · RevaCSS shop demo</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","sand","ocean","cobalt","citrus","violet","forest"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide"],"navbar":["standard","centered","floating","split"],"contrast":["auto","more"]}}</script>
<script id="reva-settings-runtime" src="/RevaCSS/settings.js?v=f9ab880ccb15b9eb488ca65ef2ad687a4870aa28">
</script>
<meta name="description" content="A fictional shop with considered objects, built with native HTML and RevaCSS.">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva-fonts.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.motion.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.selects.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.glass.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.veil.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.soft.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/demos/shop.css">
</head>
<body class="shop-site">
<a class="skip-link" href="#shop-title">Skip to content</a>
<header class="container">
<nav class="top-menu" aria-label="Still shop navigation" style="--re-menu-anchor: --still-navigation">
<a class="menu-brand" href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">still.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --still-desktop-collection-anchor">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection">Collections</button>
<ul class="menu-panel" id="still-desktop-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
<button type="button" class="menu-toggle menu-collapse" popovertarget="still-mobile-menu" aria-label="Menu">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<ul class="menu-items menu-mobile" id="still-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection">Collections</button>
<ul class="menu-panel" id="still-mobile-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
</nav>
</header>
<main class="container" aria-label="Still shop">
<header class="shop-intro shop-feature">
<div>
<p class="shop-kicker">LESS, BUT LOVELIER.</p>
<h1 id="shop-title">Accessories.</h1>
<p>Considered pieces for the spaces you make your own.</p>
<a class="button" href="#shop-products">Explore the collection <span aria-hidden="true">↘</span>
</a>
</div>
<figure>
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="269" rx="100" ry="13" fill="#000" opacity=".07"/>
<path d="M175 77h50l-3 44c9 30 64 42 61 91-3 42-54 54-83 54s-80-12-83-54c-3-49 52-61 61-91Z" fill="#bd9c87"/>
<ellipse cx="200" cy="78" rx="25" ry="8" fill="#8e705c"/>
<path d="M162 164q-42 51 9 77" fill="none" stroke="#d4b7a0" stroke-width="10" stroke-linecap="round"/>
</svg>
<figcaption>Simple forms. A little warmth. Room to breathe.</figcaption>
</figure>
</header>
<div class="toolbar shop-collection">
<nav class="toolbar" aria-label="Shop categories">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">All objects</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html" aria-current="page">Accessories</a>
</nav>
<span>4 objects</span>
</div>
<section class="shop-products" id="shop-products" aria-label="Products">
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-everyday-cup.html" aria-label="View Everyday cup">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="195" cy="266" rx="91" ry="13" fill="#000" opacity=".07"/>
<path d="M251 119c91-26 85 111-4 92" fill="none" stroke="#b18b70" stroke-width="19"/>
<path d="M118 109h143l-9 125q-62 44-125 0Z" fill="#ceb29a"/>
<ellipse cx="190" cy="109" rx="72" ry="17" fill="#a88268"/>
<ellipse cx="190" cy="111" rx="58" ry="10" fill="#745b49"/>
<path d="m136 135 5 83" stroke="#e6d0b8" stroke-width="8" stroke-linecap="round"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Accessories</p>
</div>
<h2>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-everyday-cup.html">Everyday cup</a>
</h2>
<p>€18.00</p>
</article>
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-studio-notebook.html" aria-label="View Studio notebook">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="205" cy="270" rx="112" ry="12" fill="#000" opacity=".07"/>
<path d="m117 63 158 15 16 177-168-17Z" fill="#7b8b7c"/>
<path d="m123 238 168 17-3 9-168-17Z" fill="#e8e0cb"/>
<path d="m129 74 12 149" stroke="#647467" stroke-width="4"/>
<path d="m160 113 75 7m-72 9 57 6" stroke="#d2d5c6" stroke-width="2"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Accessories</p>
</div>
<h2>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-studio-notebook.html">Studio notebook</a>
</h2>
<p>€24.00</p>
</article>
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-pebble-vase.html" aria-label="View Pebble vase">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="269" rx="100" ry="13" fill="#000" opacity=".07"/>
<path d="M175 77h50l-3 44c9 30 64 42 61 91-3 42-54 54-83 54s-80-12-83-54c-3-49 52-61 61-91Z" fill="#bd9c87"/>
<ellipse cx="200" cy="78" rx="25" ry="8" fill="#8e705c"/>
<path d="M162 164q-42 51 9 77" fill="none" stroke="#d4b7a0" stroke-width="10" stroke-linecap="round"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Accessories</p>
<span class="badge">Small batch</span>
</div>
<h2>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-pebble-vase.html">Pebble vase</a>
</h2>
<p>€42.00</p>
</article>
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-oak-tray.html" aria-label="View Oak serving tray">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="260" rx="136" ry="16" fill="#000" opacity=".07"/>
<path d="m63 142 216-40 58 98-216 47Z" fill="#a57e53"/>
<path d="m74 143 199-32 48 82-197 42Z" fill="#c69d6a"/>
<path d="m91 148 172-27 37 65-172 39Z" fill="#d8b682"/>
<path d="m130 151 114-18m-101 38 111-19m-100 39 111-20" stroke="#b58c5d" stroke-width="2" opacity=".5"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Accessories</p>
</div>
<h2>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-oak-tray.html">Oak serving tray</a>
</h2>
<p>€56.00</p>
</article>
</section>
<section class="shop-story" id="shop-story" aria-labelledby="shop-story-title">
<p class="shop-kicker">THE STILL APPROACH</p>
<h2 id="shop-story-title">Keep what matters.</h2>
<p>We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.</p>
<div class="grid">
<article>
<h3>Honest materials</h3>
<p>Natural textures and carefully chosen finishes.</p>
</article>
<article>
<h3>A considered collection</h3>
<p>Fewer objects, with more room for each one.</p>
</article>
<article>
<h3>Made for everyday</h3>
<p>Useful pieces that belong in your daily rituals.</p>
</article>
</div>
</section>
<section aria-label="Shop information">
<details>
<summary>Delivery and returns</summary>
<p>This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.</p>
</details>
</section>
</main>
<footer class="container row justify-between">
<strong>still.</strong>
<small>Objects for everyday · Fictional shop demonstration</small>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">Back to the collection</a>
</footer>
</body>
</html>

Downloads include the current appearance settings with the optional helper enabled. Download the linked CSS files and change their paths for your own hosting. Standalone product and category links lead to the hosted HTML examples.

shop.css supplies page composition. Cards, badges, navigation, breadcrumbs, buttons and disclosures use existing RevaCSS components. The product gallery reuses native-radio tabs with overview, detail and dimensions views. Illustrations are inline SVG; no new core component or data attribute is needed.