Make room for better work.
A quieter workspace begins with a few deliberate choices. Start with what matters, then give it room to breathe.
REVACSS / COMPLETE WEBSITES
The person behind the perspectives.
A dedicated author profile with a biography and published stories. 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.
MEET THE AUTHOR
Alex Morgan
Alex writes about thoughtful design, useful technology and making room for better work. Fieldnotes is a fictional independent journal.
Interested in simple tools, clear language and the everyday practice of thoughtful design.
Stories by Alex Morgan
The 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>Alex Morgan · 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" aria-current="page">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" aria-current="page">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="Author">
<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">Alex Morgan</span>
</li>
</ol>
</nav>
<header class="blog-intro">
<p class="blog-kicker">MEET THE AUTHOR</p>
<h1 id="blog-title">Alex Morgan</h1>
<div class="row">
<span class="avatar" style="--re-avatar-size:4rem" aria-hidden="true">AM</span>
<p>Alex writes about thoughtful design, useful technology and making room for better work. Fieldnotes is a fictional independent journal.</p>
</div>
<p>Interested in simple tools, clear language and the everyday practice of thoughtful 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">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">Stories by Alex Morgan</h2>
<p class="blog-meta">6 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="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/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">
<time datetime="2026-10-02">October 2, 2026</time> · 5 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/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>
</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.