REVACSS / COMPLETE WEBSITES

A story worth spending time with.

An editorial article with reading navigation, author details and related stories. 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.

Notes / FIELDNOTES

A place for unfinished thoughts.

Keep an idea close without asking it to become a project immediately.

Alex Morgan

September 8, 2026 · 2 min read

An abstract study in space and balance.

Capture the useful fragment

An idea does not need a complete plan to deserve a place. Record the part that caught your attention and enough context to remember why it mattered.

A few honest sentences can be more helpful than a polished outline written too early.

Return with a fresh question

Read the note after a little time has passed. Ask what remains interesting, what changed and whether there is a small next step.

Some ideas become projects. Others simply help you understand the work already in front of you. Both can be valuable.

Let some ideas rest

A notebook can hold possibilities without turning them all into obligations. Keep a clear distinction between an observation and a commitment.

Make room for an idea to develop at its own pace. Attention is useful; urgency is not always necessary.

Give the important things a clear place, and enough room to be understood.

All stories

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.

5 min read

Design

The quiet value of useful defaults.

Good starting choices help people move forward with fewer decisions.

3 min read

Practice

Write for the person on the other side.

Clear language is a small act of consideration with a lasting effect.

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>A place for unfinished thoughts. · 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="Keep an idea close without asking it to become a project immediately.">
<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="Article">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<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/category/notes.html">Notes</a>
</li>
<li>
<span aria-current="page">A place for unfinished thoughts.</span>
</li>
</ol>
</nav>
<article aria-labelledby="blog-title">
<header class="blog-intro">
<p class="blog-kicker">Notes / FIELDNOTES</p>
<h1 id="blog-title">A place for unfinished thoughts.</h1>
<p>Keep an idea close without asking it to become a project immediately.</p>
<div class="row">
<span class="avatar" aria-hidden="true">AM</span>
<div>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Alex Morgan</a>
<p class="blog-meta">
<time datetime="2026-09-08">September 8, 2026</time> · 2 min read</p>
</div>
</div>
</header>
<figure>
<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>
<figcaption>An abstract study in space and balance.</figcaption>
</figure>
<div class="blog-reading">
<aside aria-labelledby="article-contents">
<nav>
<h2 id="article-contents">In this story</h2>
<ol>
<li>
<a href="#story-0">Capture the useful fragment</a>
</li>
<li>
<a href="#story-1">Return with a fresh question</a>
</li>
<li>
<a href="#story-2">Let some ideas rest</a>
</li>
</ol>
</nav>
<p class="blog-meta">An independent perspective on everyday work.</p>
</aside>
<div>
<section aria-labelledby="story-0">
<h2 id="story-0">Capture the useful fragment</h2>
<p>An idea does not need a complete plan to deserve a place. Record the part that caught your attention and enough context to remember why it mattered.</p>
<p>A few honest sentences can be more helpful than a polished outline written too early.</p>
</section>
<section aria-labelledby="story-1">
<h2 id="story-1">Return with a fresh question</h2>
<p>Read the note after a little time has passed. Ask what remains interesting, what changed and whether there is a small next step.</p>
<p>Some ideas become projects. Others simply help you understand the work already in front of you. Both can be valuable.</p>
</section>
<section aria-labelledby="story-2">
<h2 id="story-2">Let some ideas rest</h2>
<p>A notebook can hold possibilities without turning them all into obligations. Keep a clear distinction between an observation and a commitment.</p>
<p>Make room for an idea to develop at its own pace. Attention is useful; urgency is not always necessary.</p>
</section>
<blockquote>
<p>Give the important things a clear place, and enough room to be understood.</p>
</blockquote>
<footer class="card" id="article-author">
<div class="row">
<span class="avatar" aria-hidden="true">AM</span>
<div>
<h2>Written 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>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">All stories by Alex Morgan</a>
</div>
</div>
</footer>
</div>
</div>
</article>
<nav aria-label="Adjacent articles">
<div class="grid">
<a class="card stack" href="https://eristavi.github.io/RevaCSS/demos/blog/source/colour-with-purpose.html" rel="prev">
<small>Previous story · Newer</small>
<strong>Give colour a purpose.</strong>
</a>
</div>
</nav>
<section aria-labelledby="related-heading">
<header class="row justify-between">
<h2 id="related-heading">Keep exploring.</h2>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html#latest">All stories</a>
</header>
<div class="grid">
<article class="card stack">
<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/room-for-better-work.html">Make room for better work.</a>
</h3>
<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">5 min read</p>
</article>
<article class="card stack">
<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">3 min read</p>
</article>
<article class="card stack">
<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">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.