Overview

Using the system

Link one stylesheet, use the classes. Tokens are also published as W3C design-token JSON for tools and other platforms.

Link it

Everything - tokens and components - is one file. Load Onest from Google Fonts; Redaction 35 is declared inside the stylesheet and comes from jsDelivr.

index.html

<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400..600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://system.heyrav.in/heyrav.css">
<script src="https://system.heyrav.in/js/heyrav.js" defer></script>

heyrav.js is optional: it only wires the interactive pieces (popovers, tabs, dialogs, toasts, reveal, count-up, the scroll comet). Everything static works on CSS alone.

Files

File	What it is
`heyrav.css`	Tokens + every component. The one file pages link.
`css/tokens.css`	Tokens only, generated - for a page that brings its own components.
`tokens/tokens.json`	The source of truth, in W3C Design Tokens (DTCG) format. Dark values and status live in `$extensions.heyrav`.
`js/heyrav.js`	Behaviour for interactive components. No dependencies, about 9 KB.

Dark theme is opt-in

heyrav.in is light-only today, so linking the stylesheet can never flip a page by itself. Dark values are defined for every colour token and switch on with an attribute:

<html data-theme="dark">

The docs you are reading run on the same contract - the theme switch in the sidebar sets that attribute.

Naming

Token names are the ones heyrav.in already uses (--ink, --mut, --r-md, --t-body), so pages can adopt the file without renaming anything.
New scales are self-describing: --s-N is N × 4px, --d-* durations are named by role (fast, base, move, slow, reveal).
Shipped class names are kept verbatim (.case-link, .impact, .define-t). New components get plain names (.btn, .badge, .menu), and where a shipped class is an instance of a new one it is listed as an alias.

Changing a token

Edit tokens/tokens.json, run node build.mjs. The build regenerates the CSS, every swatch and table in these docs (contrast ratios included), the search index and the sitemap. No dependencies.