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 / DEMOS

See what you can build.

Complete websites and original experiments built with RevaCSS components. Explore their pages, change the shared appearance settings and download HTML for 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

Make a demo your starting point

Open a demo and use Customize to choose its colours, material, spacing and navbar.
Download the HTML from the customizer. Without JavaScript, copy the chosen attributes into the supplied source.
Download its linked CSS assets and update paths for your own hosting.
Replace the fictional content and connect forms or commerce features to your application.

The CSS core and native component interactions work without browser JavaScript. The optional documentation helper saves appearance choices and prepares customized downloads.

Get started with RevaCSS