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.

Design / FIELDNOTES

Give colour a purpose.

A restrained palette can make important moments easier to recognise.

Alex Morgan

September 14, 2026 · 3 min read

An abstract study in space and balance.

Establish the foundation

Start with readable text and dependable surfaces. The foundation should support long paragraphs, small labels and ordinary controls before accents enter the picture.

Check the same content in light and dark modes. Colours need to work in their actual surroundings.

Choose where attention belongs

Give the main action a consistent accent. Repeating that relationship helps someone recognise the next step across different pages.

Supporting colours can communicate status, but the meaning also needs visible text. A colour alone cannot explain whether work is complete or needs attention.

Review the complete page

Look at the page as a whole. If everything calls for attention, the important action becomes harder to find.

Restraint creates room for emphasis. Use the accent where it helps someone understand or act, then let the remaining content do its work quietly.

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>Give colour a purpose. · 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 restrained palette can make important moments easier to recognise.">
<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/design.html">Design</a>
</li>
<li>
<span aria-current="page">Give colour a purpose.</span>
</li>
</ol>
</nav>
<article aria-labelledby="blog-title">
<header class="blog-intro">
<p class="blog-kicker">Design / FIELDNOTES</p>
<h1 id="blog-title">Give colour a purpose.</h1>
<p>A restrained palette can make important moments easier to recognise.</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-14">September 14, 2026</time> · 3 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="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>
<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">Establish the foundation</a>
</li>
<li>
<a href="#story-1">Choose where attention belongs</a>
</li>
<li>
<a href="#story-2">Review the complete page</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">Establish the foundation</h2>
<p>Start with readable text and dependable surfaces. The foundation should support long paragraphs, small labels and ordinary controls before accents enter the picture.</p>
<p>Check the same content in light and dark modes. Colours need to work in their actual surroundings.</p>
</section>
<section aria-labelledby="story-1">
<h2 id="story-1">Choose where attention belongs</h2>
<p>Give the main action a consistent accent. Repeating that relationship helps someone recognise the next step across different pages.</p>
<p>Supporting colours can communicate status, but the meaning also needs visible text. A colour alone cannot explain whether work is complete or needs attention.</p>
</section>
<section aria-labelledby="story-2">
<h2 id="story-2">Review the complete page</h2>
<p>Look at the page as a whole. If everything calls for attention, the important action becomes harder to find.</p>
<p>Restraint creates room for emphasis. Use the accent where it helps someone understand or act, then let the remaining content do its work quietly.</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/small-systems.html" rel="prev">
<small>Previous story · Newer</small>
<strong>Small systems, lasting habits.</strong>
</a>
<a class="card stack" href="https://eristavi.github.io/RevaCSS/demos/blog/source/a-place-for-notes.html" rel="next">
<small>Next story · Older</small>
<strong>A place for unfinished thoughts.</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.