FEATURED STORY / Practice
Make room for better work.
A quieter workspace begins with a few deliberate choices. Start with what matters, then give it room to breathe.
Read the storyREVACSS / COMPLETE WEBSITES
A home for thoughtful stories.
An independent journal with a featured story, article collection and author profile. Explore the shared appearance settings and download the 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.
<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-contrast="auto"
data-contrast="more">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.
AN INDEPENDENT JOURNAL
Thoughtful ideas.
A little room to grow.
Notes on design, everyday work and the small choices that make things better.
Fresh perspectives.
Browse the archiveThe quiet value of useful defaults.
Good starting choices help people move forward with fewer decisions.
Write for the person on the other side.
Clear language is a small act of consideration with a lasting effect.
Small systems, lasting habits.
A system earns its place by being useful on an ordinary Tuesday.
Give colour a purpose.
A restrained palette can make important moments easier to recognise.
A place for unfinished thoughts.
Keep an idea close without asking it to become a project immediately.
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>Fieldnotes · RevaCSS blog 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 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" aria-current="page">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" aria-current="page">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="Journal">
<header class="blog-intro">
<p class="blog-kicker">AN INDEPENDENT JOURNAL</p>
<h1 id="blog-title">Thoughtful ideas.<br>A little room to grow.</h1>
<p>Notes on design, everyday work and the small choices that make things better.</p>
</header>
<article class="card blog-feature" aria-labelledby="featured-title">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/room-for-better-work.html" tabindex="-1" aria-hidden="true">
<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>
</a>
<div class="stack">
<p class="blog-kicker">FEATURED STORY / Practice</p>
<h2 id="featured-title">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/room-for-better-work.html">Make room for better work.</a>
</h2>
<p>A quieter workspace begins with a few deliberate choices. Start with what matters, then give it room to breathe.</p>
<p class="blog-meta">
<time datetime="2026-10-02">October 2, 2026</time> · 5 min read</p>
<a class="button" href="https://eristavi.github.io/RevaCSS/demos/blog/source/room-for-better-work.html">Read the story</a>
</div>
</article>
<section id="latest" aria-labelledby="latest-title">
<header class="row justify-between">
<h2 id="latest-title">Fresh perspectives.</h2>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">Browse the archive</a>
</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/practice.html">Practice</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/write-for-the-reader.html">Write for the person on the other side.</a>
</h3>
<p>Clear language is a small act of consideration with a lasting effect.</p>
<p class="blog-meta">
<time datetime="2026-09-24">September 24, 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="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/practice.html">Practice</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/small-systems.html">Small systems, lasting habits.</a>
</h3>
<p>A system earns its place by being useful on an ordinary Tuesday.</p>
<p class="blog-meta">
<time datetime="2026-09-19">September 19, 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>
<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/notes.html">Notes</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/a-place-for-notes.html">A place for unfinished thoughts.</a>
</h3>
<p>Keep an idea close without asking it to become a project immediately.</p>
<p class="blog-meta">
<time datetime="2026-09-08">September 8, 2026</time> · 2 min read</p>
</article>
</div>
</section>
<aside class="card" id="about" aria-labelledby="about-title">
<div class="row">
<span class="avatar" aria-hidden="true">AM</span>
<div>
<h2 id="about-title">A journal by Alex Morgan.</h2>
<p>Alex writes about thoughtful design, useful technology and making room for better work. Fieldnotes is a fictional independent journal.</p>
<p>New perspectives, one considered story at a time.</p>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Meet the author and explore all stories</a>
</div>
</div>
</aside>
</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.