Customize RevaCSS

Changes appear immediately. Your choices are shared across documentation and demo pages when storage is available.

Back to documentation

Colours

Theme

Palette

Surface tone

Surfaces

Material

Button material

Shape

Borders

Shadows

Fill

Layout

Density

Spacing

Page width

Navbar

Navbar layout

Navbar position

Navbar spacing

Navbar width

Typography and controls

Font

Typography

Control size

Field styling

Effects and accessibility

Motion

Decorative edges

Contrast

Your custom palette

Choose four foundation colours for each mode. Supporting colours are derived automatically when a foundation changes. Expand advanced colours to adjust every token.

Light mode

Foundation colours

Primary#1F6E8C

Secondary#4B5563

Background#FAFAFA

Text#111111

Advanced colours

Surfaces, gradients and semantic roles

Surface#FFFFFF

Alternate surface#EDEDED

Text on primary#FFFFFF

Border#D4D4D4

Primary gradient end#195E78

Link#1F6E8C

Muted text#4C4C4C

Control border#7C7C7C

Secondary gradient end#3D4652

Text on secondary#FFFFFF

Secondary link#4B5563

Success#256B4E

Success gradient end#1D573F

Text on success#FFFFFF

Danger#A63D4F

Danger gradient end#8C3041

Text on danger#FFFFFF

Danger link#A63D4F

Warning#E6BC63

Warning gradient end#D5A94E

Text on warning#111111

Dark mode

Foundation colours

Primary#2E8A99

Secondary#BFC8CD

Background#101010

Text#F5F5F5

Advanced colours

Surfaces, gradients and semantic roles

Surface#191919

Alternate surface#292929

Text on primary#111111

Border#414141

Primary gradient end#57ACB8

Link#65BBC7

Muted text#BEBEBE

Control border#929292

Secondary gradient end#CDD5D9

Text on secondary#111111

Secondary link#BFC8CD

Success#78B99B

Success gradient end#8EC9AD

Text on success#111111

Danger#D98B97

Danger gradient end#E39EAA

Text on danger#111111

Danger link#D98B97

Warning#E6BC63

Warning gradient end#F0CB7C

Text on warning#111111

Contrast feedback checks solid colours in both modes; gradients and translucent materials need a visual review. Your colours stay under your control. An explicit surface tone overrides palette surfaces.

View palette CSS

Load your exported CSS after RevaCSS and set data-palette="custom" on your page or a parent. Downloaded starting HTML includes the palette.

Your corner radiuses

Choose a radius for each group. Values use rem and scale with the root text size. Zero creates square corners.

Link all three radiuses

Surfaces Cards, panels, dialogs and drawers

rem

Fields Inputs, selects and textareas

rem

Actions Buttons and badges

rem

Your surface

Your field

Badge

View radius CSS

Use Shape → Custom on your page or a parent. Downloaded starting HTML includes your values. Local shape presets keep their own corners.

Your spacing

Set base surface padding and content spacing in rem. Control padding uses a multiplier: 1 follows the comfortable preset. Cards scale base surface padding by 1.5. Minimum control heights stay in place.

Link all three values

Surface padding Base padding for cards, panels, dialogs and drawers

rem

Control padding Multiplier for button and field padding

Content spacing Base gaps and spacing between content

rem

Your surface

Your field

Badge

View density CSS

Use Density → Custom on your page or a parent. Downloaded starting HTML includes your values. Local density presets keep their own spacing.

Your page width

Set the maximum width and side padding in rem. Values follow the root text size. Navbar width remains a separate choice.

Maximum page width Includes side padding; stays within the available parent width.

rem

Side padding Space inside each page edge; reduced automatically in narrow containers.

rem

View width CSS

The page behind this panel previews your width. Use Width → Custom on your page or a parent. Downloaded starting HTML includes your values. Local width presets reset the container settings.

View HTML configuration

<html lang="en"
  data-theme="auto"
  data-theme="light"
  data-theme="dark"
  data-palette="mono"
  data-palette="custom"
  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-shape="custom"
  data-button-material="solid"
  data-button-material="glass"
  data-button-material="veil"
  data-button-material="soft"
  data-button-material="liquid"
  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-density="custom"
  data-depth="flat"
  data-depth="subtle"
  data-depth="pronounced"
  data-fill="gradient"
  data-fill="solid"
  data-font="manrope"
  data-font="system"
  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-width="full"
  data-width="custom"
  data-navbar="standard"
  data-navbar="centered"
  data-navbar="floating"
  data-navbar="split"
  data-navbar-position="static"
  data-navbar-position="sticky"
  data-navbar-spacing="flush"
  data-navbar-spacing="spaced"
  data-navbar-width="contained"
  data-navbar-width="full"
  data-contrast="auto"
  data-contrast="more"
  data-tone="neutral"
  data-tone="cool"
  data-tone="warm"
  data-gap="none"
  data-gap="small"
  data-gap="medium"
  data-gap="large"
  data-controls="styled"
  data-controls="minimal">

These controls use existing RevaCSS data attributes. Device accessibility preferences take priority. Escape or a click outside closes the panel.

Download starting HTML

Explore the journal

FROM THE JOURNAL

Every story has a place.

Browse every Fieldnotes story, from the latest perspectives to earlier notes.

The story archive

4–6 of 6 stories

Practice

Small systems, lasting habits.

A system earns its place by being useful on an ordinary Tuesday.

September 19, 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

Notes

A place for unfinished thoughts.

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

September 8, 2026 · 2 min read

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

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" data-navbar-position="sticky" data-navbar-spacing="flush" data-navbar-width="full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Archive · Fieldnotes</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","custom"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill","custom"],"button-material":["default","solid","glass","veil","soft","liquid"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious","custom"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"font":["manrope","system"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide","full","custom"],"navbar":["standard","centered","floating","split"],"navbar-position":["static","sticky"],"navbar-spacing":["flush","spaced"],"navbar-width":["contained","full"],"contrast":["auto","more"],"tone":["default","neutral","cool","warm"],"gap":["none","small","medium","large"],"controls":["styled","minimal"]}}</script>
<script id="reva-palette-defaults" type="application/json">{"light":{"bg":"#FAFAFA","surface":"#FFFFFF","text":"#111111","surface-alt":"#EDEDED","primary":"#1F6E8C","on-primary":"#FFFFFF","line":"#D4D4D4","primary-end":"#195E78","link":"#1F6E8C","muted":"#4C4C4C","control-line":"#7C7C7C","secondary":"#4B5563","secondary-end":"#3D4652","on-secondary":"#FFFFFF","secondary-link":"#4B5563","success":"#256B4E","success-end":"#1D573F","on-success":"#FFFFFF","danger":"#A63D4F","danger-end":"#8C3041","on-danger":"#FFFFFF","danger-link":"#A63D4F","warning":"#E6BC63","warning-end":"#D5A94E","on-warning":"#111111"},"dark":{"bg":"#101010","surface":"#191919","text":"#F5F5F5","surface-alt":"#292929","primary":"#2E8A99","on-primary":"#111111","line":"#414141","primary-end":"#57ACB8","link":"#65BBC7","muted":"#BEBEBE","control-line":"#929292","secondary":"#BFC8CD","secondary-end":"#CDD5D9","on-secondary":"#111111","secondary-link":"#BFC8CD","success":"#78B99B","success-end":"#8EC9AD","on-success":"#111111","danger":"#D98B97","danger-end":"#E39EAA","on-danger":"#111111","danger-link":"#D98B97","warning":"#E6BC63","warning-end":"#F0CB7C","on-warning":"#111111"}}</script>
<script id="reva-palette-runtime" src="/custom-palette.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-radius-runtime" src="/custom-radius.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-density-runtime" src="/custom-density.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-width-runtime" src="/custom-width.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-settings-runtime" src="/settings.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<meta name="description" content="A fictional independent journal built with native HTML and RevaCSS.">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva-fonts.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.motion.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.transitions.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.selects.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.glass.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.veil.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.soft.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.button-materials.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/demos/blog.css">
</head>
<body id="page-top" class="blog-site">
<a class="skip-link" href="#blog-title">Skip to content</a>
<header class="navbar-header container">
<nav class="top-menu" aria-label="Fieldnotes journal" style="--re-menu-anchor: --fieldnotes-navigation">
<a class="menu-brand" href="http://revacss.eristavi.org/demos/blog/source.html">fieldnotes.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="http://revacss.eristavi.org/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/archive.html" aria-current="page">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="http://revacss.eristavi.org/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
<div class="menu-actions">
<a class="button outline blog-nav-cta" href="http://revacss.eristavi.org/demos/blog/source.html#latest">Explore the journal</a>
</div>
<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="http://revacss.eristavi.org/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/archive.html" aria-current="page">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="http://revacss.eristavi.org/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
</nav>
</header>
<main class="container" aria-label="Archive">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source.html">Journal</a>
</li>
<li>
<span aria-current="page">Archive</span>
</li>
</ol>
</nav>
<header class="blog-intro">
<p class="blog-kicker">FROM THE JOURNAL</p>
<h1 id="blog-title">Every story has a place.</h1>
<p>Browse every Fieldnotes story, from the latest perspectives to earlier notes.</p>
</header>
<nav aria-label="Story categories">
<div class="row">
<a href="http://revacss.eristavi.org/demos/blog/source/archive.html" aria-current="page">All stories</a>
<a href="http://revacss.eristavi.org/demos/blog/source/category/practice.html">Practice</a>
<a href="http://revacss.eristavi.org/demos/blog/source/category/design.html">Design</a>
<a href="http://revacss.eristavi.org/demos/blog/source/category/notes.html">Notes</a>
</div>
</nav>
<section aria-labelledby="collection-title">
<header class="row justify-between">
<h2 id="collection-title">The story archive</h2>
<p class="blog-meta">4–6 of 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="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="http://revacss.eristavi.org/demos/blog/source/category/practice.html">Practice</a>
</p>
<h3>
<a href="http://revacss.eristavi.org/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="http://revacss.eristavi.org/demos/blog/source/category/design.html">Design</a>
</p>
<h3>
<a href="http://revacss.eristavi.org/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="http://revacss.eristavi.org/demos/blog/source/category/notes.html">Notes</a>
</p>
<h3>
<a href="http://revacss.eristavi.org/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>
<nav class="pagination" aria-label="Story archive pages">
<ol>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/archive.html" rel="prev">Previous</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/blog/source/archive.html" aria-label="Page 1">1</a>
</li>
<li>
<span aria-current="page" aria-label="Page 2, current page">2</span>
</li>
<li>
<span aria-disabled="true">Next</span>
</li>
</ol>
</nav>
</section>
</main>
<footer class="container">
<div class="row justify-between">
<p>
<strong>fieldnotes.</strong> · A fictional journal.</p>
<a class="scroll-top" href="#page-top">
<span aria-hidden="true">↑</span> Back to top</a>
</div>
<p class="blog-meta">Built with <a href="http://revacss.eristavi.org/">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. Reading links follow the shared motion setting. Same-origin page links demonstrate the optional document-transition stylesheet; unsupported browsers navigate normally. The footer uses the native scroll-to-top component.