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.

THEMES

Choose colours, then material

Default is the standard palette; Mono is optional. data-theme selects the colour mode; data-palette selects one of 2 coordinated colour families. Optional data-material changes supported surfaces independently.

Compare all 2 palettes, with light and dark HTML examples.

Colour modes

Light

An explicitly light palette.

data-theme="light"

Dark

An explicitly dark palette.

data-theme="dark"

System

Follow the visitor’s preferred colour scheme.

data-theme="auto"

Material is independent

Both cards use a dark palette. Only the glass section changes its supported surfaces.

Solid material

The default surface is opaque.

Glass material

Load the optional glass stylesheet to activate this treatment.

<div class="grid" data-theme="dark">
  <article class="card">
    <h3>Solid material</h3>
    <p>The default surface is opaque.</p>
  </article>
  <section data-material="glass">
    <article class="card">
      <h3>Glass material</h3>
      <p>Load the optional glass stylesheet to activate this treatment.</p>
    </article>
  </section>
</div>

Veil material (deprecated)

Retained for existing sites; prefer Solid, Glass or Soft UI for new work. A clear centre with diffused perimeter colour and two contained contours, without backdrop blur. Load reva.veil.css and set data-material="veil" on your shared parent.

Veil examples and API · Complete Veil website

Soft UI material

Raised opaque surfaces, inset text controls and pressed actions. Load reva.soft.css and set data-material="soft" on a shared parent.

Explore Soft UI

The same styling logic in every mode

Light and dark select different colour tokens, not different component APIs. Rounded shape, comfortable density, medium control size, subtle depth and gradient fill are the common omitted defaults. Change them once on html or on a scoped boundary.

See all supported defaults and values. Semantic meanings remain local: a warning alert can differ from a success badge inside the same theme.

Full-page previews

Existing previews remain available for exploration
Example	Light	Dark	System
Foundation	light	dark	System
Page defaults	light	dark	System
Navigation	light	dark	System
Glass	light	dark	System

Button materials

Choose an independent finish for actions while other surfaces retain their material. Explore the six button materials.