REFERENCE

CSS tokens

Shared attributes are the main configuration API. Use custom properties for values that need a project-specific adjustment.

Custom properties

Area	Property	Value type	Use
Semantic colours	`--re-secondary / --re-secondary-end / --re-on-secondary`	Colours	Secondary action fill, gradient endpoint and foreground.
Semantic colours	`--re-success / --re-success-end / --re-on-success`	Colours	Success fill, gradient endpoint and foreground.
Semantic colours	`--re-warning / --re-warning-end / --re-on-warning`	Colours	Warning fill, gradient endpoint and foreground.
Semantic colours	`--re-danger / --re-danger-end / --re-on-danger`	Colours	Danger fill, gradient endpoint and foreground.
Semantic colours	`--re-secondary-link / --re-danger-link`	Colours	Readable secondary and danger outline/ghost text.
Charts	`--re-chart-color`	Colour	Local SVG series stroke; defaults to the primary colour.
Charts	`--re-chart-ring-width`	SVG user units	Doughnut stroke width; default 22.
Drawer	`--re-drawer-width`	Length	Inspector width; default 28rem, customisable with ordinary CSS. Bounded by the viewport.
Application layout	`--re-sidebar-width`	Length	Sidebar and mobile drawer width; 16rem fallback, bounded by viewport.
Navigation	`--re-navbar-width`	Length or percentage	Navbar width; standard 100%, floating min(100% - 2rem, page width).
Navigation	`--re-navbar-margin`	Length	Navbar block margin; standard 0, floating 1rem.
Veil	`--re-veil-opacity`	Percentage	Surface backing; 94% default. Accessibility fallbacks use opaque backing.
Veil	`--re-veil-strength`	Number, 0–1	Perimeter colour and contour strength; 1 default. More contrast removes decoration.
Navigation	`--re-dropdown-width`	Length	Standalone dropdown width; 18rem fallback, bounded by viewport
Palette	`--re-bg`	Colour	Page background
Palette	`--re-surface`	Colour	Opaque component surface
Palette	`--re-surface-alt`	Colour	Secondary surface
Palette	`--re-text`	Colour	Main foreground
Palette	`--re-muted`	Colour	Supporting foreground
Palette	`--re-link`	Colour	Link foreground
Palette	`--re-line`	Colour	Surface boundary
Palette	`--re-control-line`	Colour	Control boundary
Accent	`--re-primary / --re-primary-end`	Colours	Accent stops; override both together
Accent	`--re-on-primary`	Colour	Foreground for the accent fill
Typography	`--re-font`	Font-family list	Body and control font
Typography	`--re-font-heading`	Font-family list	Optional heading override; otherwise falls back to --re-font
Layout	`--re-radius / --re-button-radius`	Length	Surface and action roundness
Layout	`--re-space / --re-gap`	Length	Base spacing
Layout	`--re-container`	Length	Maximum container width; 75rem by default
Layout	`--re-column`	Length	Auto-fit grid column target; 18rem fallback
Layout	`--re-prose`	Length	Readable content width; 65ch fallback
Layout	`--re-card-padding`	Length	Optional card padding override
Material	`--re-glass-opacity`	Percentage	Glass surfaces; 32% default
Material	`--re-glass-button-opacity`	Percentage	Glass actions and small surfaces; 90% default
Material	`--re-glass-shadow`	Shadow list or none	Glass elevation and rim shadows; follows shared data-depth
Material	`--re-glass-filter`	Filter value	blur(12px) saturate(145%) default
Assets	`--re-icon-size`	Length	Icon dimensions; 1.25em fallback
Assets	`--re-icon-stroke`	Number	SVG stroke width; 1.75 fallback
Assets	`--re-avatar-size`	Length	Avatar base size; 2.75rem fallback
Content	`--re-skeleton-width / --re-skeleton-height`	Length or percentage	Placeholder width/height; 100% / 1em fallbacks
Content	`--re-description-label`	Length	Description-list label column; 12rem fallback
Navigation	`--re-menu-width`	Length	Desktop panel width; 20rem fallback
Navigation	`--re-menu-anchor`	CSS identifier	Unique menu anchor; see complete menu markup

Other component-internal variables implement derived colours and state. Prefer the shared attributes and documented properties above; component-internal variables may change between versions.

Default palette: monochrome foundations and Blue Teal accent

The values below come from the palette manifest. Choose a different coordinated set with data-palette. Tone, local theme and glass material can alter effective component colours.

Property	Light	Dark
`--re-bg`	`#FAFAFA`	`#101010`
`--re-surface`	`#FFFFFF`	`#191919`
`--re-text`	`#111111`	`#F5F5F5`
`--re-surface-alt`	`#EDEDED`	`#292929`
`--re-primary`	`#1F6E8C`	`#2E8A99`
`--re-on-primary`	`#FFFFFF`	`#111111`
`--re-line`	`#D4D4D4`	`#414141`
`--re-primary-end`	`#195E78`	`#57ACB8`
`--re-link`	`#1F6E8C`	`#65BBC7`
`--re-muted`	`#4C4C4C`	`#BEBEBE`
`--re-control-line`	`#7C7C7C`	`#929292`

Semantic role tokens

Property	Light	Dark
`--re-secondary`	`#4B5563`	`#BFC8CD`
`--re-secondary-end`	`#3D4652`	`#CDD5D9`
`--re-on-secondary`	`#FFFFFF`	`#111111`
`--re-secondary-link`	`#4B5563`	`#BFC8CD`
`--re-success`	`#256B4E`	`#78B99B`
`--re-success-end`	`#1D573F`	`#8EC9AD`
`--re-on-success`	`#FFFFFF`	`#111111`
`--re-danger`	`#A63D4F`	`#D98B97`
`--re-danger-end`	`#8C3041`	`#E39EAA`
`--re-on-danger`	`#FFFFFF`	`#111111`
`--re-danger-link`	`#A63D4F`	`#D98B97`
`--re-warning`	`#E6BC63`	`#E6BC63`
`--re-warning-end`	`#D5A94E`	`#F0CB7C`
`--re-on-warning`	`#111111`	`#111111`

Override on the configured boundary

Global application values can live on :root. Scoped overrides belong on .reva or a descendant. Explicit shared attributes can install their own local token values, so place custom overrides where they should take precedence.

:root {
  --re-primary: #7041cf;
  --re-primary-end: #5228a4;
  --re-on-primary: #fff;
}
.reva.product-panel {
  --re-container: 60rem;
  --re-card-padding: 1.25rem;
}

Changing a colour does not automatically produce a readable palette. Review foregrounds, gradients, borders and glass backgrounds together. Opacity properties take percentages rather than decimal numbers.

Foundation token source · Eight-palette token manifest · Attribute option manifest