Customize RevaCSS

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

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.

REVACSS / DEVELOPMENT

Start with HTML.
Set your defaults once.

An HTML/CSS-first framework for native elements and reusable components. Choose your theme with data attributes, then build with a zero-JavaScript core and no CSS build step.

Get started Explore demos View on GitHub

Native HTML interactions
Shared design tokens
Light, dark and system themes
MIT licensed

COMPLETE WEBSITES

See what you can build.

Browse all demos

Explore a real page layout, customize its appearance and take the HTML into your own project.

Marketing website

A complete landing page with product sections, pricing, FAQ and a contact-form preview.

Customize the appearance · Download the HTML

Workspace dashboard

Metrics, project progress, SVG charts and activity in a responsive app shell.

Customize the appearance · Download the HTML

Shop

A catalogue, category pages, product details and a sample shopping bag.

Customize the appearance · Download the HTML

Blog and journal

Stories, full articles, reading navigation, category archives and an author profile.

Customize the appearance · Download the HTML

Living Blueprint

An original scroll composition: interface pieces assemble through inherited class-based movement, zoom and rotation.

Customize the appearance · Download the HTML

Effects Lab

Aura, Spring lift and Layered depth: JavaScript-free experimental candidates for a future release, with native SVG tap previews on the cards.

Customize the appearance · Download the HTML

A small API. Shared defaults.

Start with native elements

Style meaningful HTML and add component classes where a pattern needs one.

Create your first page

Configure the parent

Set colours, material, shape and spacing once. Add local overrides for exceptions.

Styling and inheritance

Choose your finish

Explore colour palettes, surface materials and independent button materials.

Page defaults, simple markup

The card and button inherit this page’s defaults. Open Customize to see both update, then use local attributes only when you need an exception.

Your project

Useful defaults for ordinary HTML.

<section>
  <article class="card">
    <h3>Your project</h3>
    <p>Useful defaults for ordinary HTML.</p>
    <a class="button" href="/guide/">Read the guide</a>
  </article>
</section>

Find a component

Foundations

Forms and actions

Navigation and disclosure

Feedback and status

Content and identity

Explore the foundations

SVG icons Light foundation Dark foundation Glass preview Plain HTML comparison API reference

A NOTE FROM THE FOUNDER

Why I started RevaCSS

I started RevaCSS because I wanted consistent interfaces without repeating the same design decisions across every component. My aim is to keep HTML readable, use the browser’s native capabilities, and let components inherit shared appearance settings. RevaCSS brings those ideas together in an HTML/CSS-first framework with no JavaScript runtime in its core.

Revaz Eristavi Founder of RevaCSS

Read the founder’s note Compare framework approaches

Build with your AI assistant

Readable HTML, consistent data attributes and dedicated AI documentation give coding assistants clear patterns to follow. Describe what you want, start from a complete demo and refine its shared appearance settings. Explore the guide for AI-assisted development, including vibe coding.

Using RevaCSS with AI AI documentation index

These pages describe RevaCSS 2.0.0 in development. Use the documentation build for a preview or build the stylesheets from source.