REVACSS / COMPLETE WEBSITES

A collection worth exploring.

Real category collections and a paginated archive using existing components. Explore the shared appearance settings and download the starting HTML.

Blog listing Full article Archive Author profile

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.

EXPLORE A CATEGORY

Design stories.

A collection of perspectives on design.

In Design

2 stories

Design

The quiet value of useful defaults.

Good starting choices help people move forward with fewer decisions.

September 28, 2026 · 3 min read

Design

Give colour a purpose.

A restrained palette can make important moments easier to recognise.

September 14, 2026 · 3 min read

Make this journal yours.

Stories and authors are fictional. A CMS or backend can supply the same article markup. Story, category, author and archive links open complete examples; reading navigation uses native anchors.

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>design · Fieldnotes</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 independent journal 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/blog.css">
</head>
<body class="blog-site">
<a class="skip-link" href="#blog-title">Skip to content</a>
<header class="container">
<nav class="top-menu" aria-label="Fieldnotes journal" style="--re-menu-anchor: --fieldnotes-navigation">
<a class="menu-brand" href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">fieldnotes.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">Archive</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --fieldnotes-desktop-categories-anchor">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-desktop-categories">Categories</button>
<ul class="menu-panel" id="fieldnotes-desktop-categories" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-desktop-categories" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
<button type="button" class="menu-toggle menu-collapse" popovertarget="fieldnotes-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="fieldnotes-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">Archive</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-categories">Categories</button>
<ul class="menu-panel" id="fieldnotes-mobile-categories" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-categories" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
<div class="menu-actions">
<a class="button outline" href="https://eristavi.github.io/RevaCSS/demos/blog/source.html#latest">Explore the journal</a>
</div>
</nav>
</header>
<main class="container" aria-label="Archive">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<span aria-current="page">Design</span>
</li>
</ol>
</nav>
<header class="blog-intro">
<p class="blog-kicker">EXPLORE A CATEGORY</p>
<h1 id="blog-title">Design stories.</h1>
<p>A collection of perspectives on design.</p>
</header>
<nav aria-label="Story categories">
<div class="row">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">All stories</a>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html" aria-current="page">Design</a>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/notes.html">Notes</a>
</div>
</nav>
<section aria-labelledby="collection-title">
<header class="row justify-between">
<h2 id="collection-title">In Design</h2>
<p class="blog-meta">2 stories</p>
</header>
<div class="grid">
<article class="card stack">
<svg class="blog-cover" viewBox="0 0 640 400" aria-hidden="true" focusable="false">
<rect width="640" height="400" fill="var(--re-surface-alt)">
</rect>
<circle cx="470" cy="200" r="145" fill="var(--re-primary)" opacity=".18">
</circle>
<path d="M100 305V95h230v210z M155 305V155h230v150z" fill="var(--re-primary)" opacity=".45">
</path>
<path d="M65 325H575 M65 340H575" stroke="var(--re-text)" stroke-width="2" opacity=".22">
</path>
<circle cx="220" cy="210" r="65" fill="var(--re-surface)">
</circle>
<path d="M80 80h65 M80 80v65 M560 320h-65 M560 320v-65" fill="none" stroke="var(--re-primary)" stroke-width="3">
</path>
</svg>
<p class="blog-kicker">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/useful-defaults.html">The quiet value of useful defaults.</a>
</h3>
<p>Good starting choices help people move forward with fewer decisions.</p>
<p class="blog-meta">
<time datetime="2026-09-28">September 28, 2026</time> · 3 min read</p>
</article>
<article class="card stack">
<svg class="blog-cover" viewBox="0 0 640 400" aria-hidden="true" focusable="false">
<rect width="640" height="400" fill="var(--re-surface-alt)">
</rect>
<circle cx="165" cy="200" r="145" fill="var(--re-primary)" opacity=".18">
</circle>
<path d="M280 310V90h180v220z M330 310V150h180v160z" fill="var(--re-primary)" opacity=".45">
</path>
<path d="M65 325H575 M65 340H575" stroke="var(--re-text)" stroke-width="2" opacity=".22">
</path>
<circle cx="395" cy="210" r="65" fill="var(--re-surface)">
</circle>
<path d="M80 80h65 M80 80v65 M560 320h-65 M560 320v-65" fill="none" stroke="var(--re-primary)" stroke-width="3">
</path>
</svg>
<p class="blog-kicker">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/colour-with-purpose.html">Give colour a purpose.</a>
</h3>
<p>A restrained palette can make important moments easier to recognise.</p>
<p class="blog-meta">
<time datetime="2026-09-14">September 14, 2026</time> · 3 min read</p>
</article>
</div>
</section>
</main>
<footer class="container">
<div class="row justify-between">
<p>
<strong>fieldnotes.</strong> · A fictional journal.</p>
<a href="#blog-title">Back to top</a>
</div>
<p class="blog-meta">Built with <a href="https://eristavi.github.io/RevaCSS/">RevaCSS</a> · Native HTML and CSS.</p>
</footer>
</body>
</html>

The optional settings helper includes your current selections in the download. Without JavaScript, copy the selected attributes onto the starting document’s opening HTML tag. Download the linked CSS files and change paths when hosting your own site. Article links in downloads lead to the hosted standalone HTML examples.

blog.css provides editorial composition. Cards, navigation, breadcrumbs, pagination, avatars, controls and appearance use existing RevaCSS components. No new framework classes or data attributes are introduced.