CSS Design Tokens

RMHC Style Guide

Synced from the live CSS token catalog on this site. This page will reflect any changes made to global styles.

Active palettes: primary, secondary, base, neutral · Not enabled yet: secondary, tertiary, accent

Colors

Only tokens confirmed in the live catalog are shown.

primary

primary-ultra-light

var(–primary-ultra-light)

primary-light

var(–primary-light)

primary-semi-light

var(–primary-semi-light)

primary

var(–primary)

primary-semi-dark

var(–primary-semi-dark)

primary-dark

var(–primary-dark)

primary-ultra-dark

var(–primary-ultra-dark)

primary-hover

var(–primary-hover)

base

base-ultra-light

var(–base-ultra-light)

base-light

var(–base-light)

base-semi-light

var(–base-semi-light)

base

var(–base)

base-semi-dark

var(–base-semi-dark)

base-dark

var(–base-dark)

base-ultra-dark

var(–base-ultra-dark)

base-hover

var(–base-hover)

neutral

neutral-ultra-light

var(–neutral-ultra-light)

neutral-light

var(–neutral-light)

neutral-semi-light

var(–neutral-semi-light)

neutral

var(–neutral)

neutral-semi-dark

var(–neutral-semi-dark)

neutral-dark

var(–neutral-dark)

neutral-ultra-dark

var(–neutral-ultra-dark)

neutral-hover

var(–neutral-hover)

Contextual backgrounds

bg-ultra-light

var(–bg-ultra-light)

bg-light

var(–bg-light)

bg-dark

var(–bg-dark)

bg-ultra-dark

var(–bg-ultra-dark)

black

var(–black)

white

var(–white)

body-bg-color

var(–body-bg-color)

Contextual text

text-dark — The quick brown fox jumps over the lazy dog.

text-dark-muted — The quick brown fox jumps over the lazy dog.

text-light — The quick brown fox jumps over the lazy dog.

text-light-muted — The quick brown fox jumps over the lazy dog.

Custom palette

Brand Colors

From the RMHC Custom Colours stylesheet — each colour has a base, light, and dark variant.

lavender

color-lavender-light

var(–color-lavender-light)

color-lavender

var(–color-lavender)

color-lavender-dark

var(–color-lavender-dark)

aqua

color-aqua-light

var(–color-aqua-light)

color-aqua

var(–color-aqua)

color-aqua-dark

var(–color-aqua-dark)

lime

color-lime-light

var(–color-lime-light)

color-lime

var(–color-lime)

color-lime-dark

var(–color-lime-dark)

gold

color-gold-light

var(–color-gold-light)

color-gold

var(–color-gold)

color-gold-dark

var(–color-gold-dark)

purple

color-purple-light

var(–color-purple-light)

color-purple

var(–color-purple)

color-purple-dark

var(–color-purple-dark)

blue

color-blue-light

var(–color-blue-light)

color-blue

var(–color-blue)

color-blue-dark

var(–color-blue-dark)

green

color-green-light

var(–color-green-light)

color-green

var(–color-green)

color-green-dark

var(–color-green-dark)

orange

color-orange-light

var(–color-orange-light)

color-orange

var(–color-orange)

color-orange-dark

var(–color-orange-dark)

Type scale

Typography

Each row lists the token and a sample sized with that token

Headings

var(–h1) / <h1>

Heading 1 — The quick brown fox

var(–h2) / <h2>

Heading 2 — The quick brown fox

var(–h3) / <h3>

Heading 3 — The quick brown fox

var(–h4) / <h4>

Heading 4 — The quick brown fox

var(–h5) / <h5>

Heading 5 — The quick brown fox

var(–h6) / <h6>

Heading 6 — The quick brown fox

Text sizes

var(–text-xxl)

XXL text — The quick brown fox jumps over the lazy dog.

var(–text-xl)

XL text — The quick brown fox jumps over the lazy dog.

var(–text-l)

L text — The quick brown fox jumps over the lazy dog.

var(–text-m)

M text — The quick brown fox jumps over the lazy dog.

var(–text-s)

S text — The quick brown fox jumps over the lazy dog.

var(–text-xs)

XS text — The quick brown fox jumps over the lazy dog.

Spacing

Bars use each token as a real size (inline-size / block-size) — not labels only.

Space scale

var(–space-xs)

var(–space-s)

var(–space-m)

var(–space-l)

var(–space-xl)

var(–space-xxl)

Section space

var(–section-space-xs)

var(–section-space-s)

var(–section-space-m)

var(–section-space-l)

var(–section-space-xl)

var(–section-space-xxl)

Contextual gaps

var(–content-gap)

var(–grid-gap)

var(–container-gap)

Block one

Block two

var(–gutter) · var(–content-width)

Shape

Borders & Radius

Borders use var(–border). Radius uses radius tokens only — never spacing tokens.

Border

var(–border) · var(–border-size) · var(–border-style) · var(–border-color-dark) · var(–border-color-light)

Sample box: border: var(–border); border-radius: var(–radius);

Radius

var(–radius)

var(–radius-m)

var(–radius-50)

var(–radius-circle)

var(–radius-none)

Elevation

Shadows

var(–box-shadow-1)

Shadow sample card

var(–box-shadow-2)

Shadow sample card

var(–box-shadow-3)

Shadow sample card

Inline

Links

Default link styling .

Default link External link

Actions

Buttons

Button utility classes — no custom button CSS.

Solid

primary primary-light primary-dark secondary base neutral

Outline

primary outline secondary outline

Sizes

XS S M L XL XXL

Layout

Widths

Bars use each width token as inline-size.

var(–content-width)

var(–width-10)

var(–width-20)

var(–width-30)

var(–width-40)

var(–width-50)

var(–width-60)

var(–width-70)

var(–width-80)

var(–width-90)

var(–width-full)