Heading
Body Text
Body text is the default. Paragraphs sit on the text-content column at a comfortable measure, the line-height is tuned for sustained reading, and nothing extra is needed — just write.
.lead
A single oversized opening paragraph. Think of it as the page's TL;DR: one or two sentences that tell the reader what this page is about and whether to keep reading. Use it once, at the top of a long-read.
.lead is how you say that out loud.
The treatment is intentionally restrained — larger size, lighter weight, slightly tighter leading. Loud enough to set the page, quiet enough to step out of the way.
Meta Copy
Special Text Elements
A handful of blocks sit slightly past the text-content column on both sides — a small but deliberate signal that they are not the prose, they are about the prose. Captions, highlights, and content-captions all share this outdent: var(--space-lg) on desktop, tightening to var(--space-sm) on mobile. The shift is driven by a single internal SCSS mixin (@mixin outdent in typography/_text-content.scss) so the three blocks stay coherent. In v0.6.15 the same pattern will be exposed as the public utility .rd-outdent.
.text-content-caption
A wrapper that widens its content past the regular text column by one outdent on each side. Use it for figures, illustrative cards, or any block that needs slightly more horizontal room than a paragraph but should still belong to the article.
.highlight
An emphatic, centered block with a thick brand-color border. The reading flow stops here and reads this carefully — so use it sparingly, for the single sentence on the page that has to land.
.caption
An aside-style block with a soft gray background and a brand-color left rule. Used for editor's notes, observations, or short asides that comment on the prose without being part of it.
A bad font doesn't just look bad. It feels irrelevant.
<mark>
Inline highlighting for words or phrases inside running text. Use it to flag the single phrase a skimming reader must not miss.
<cite>
The semantic element for attributing a quotation. Renders right-aligned and muted — see the <blockquote> example below.
Blockquote
A good quote is like a well-timed assist in basketball—it brings someone else’s brilliance into play exactly when you need it. Blockquotes give voice and weight to borrowed wisdom, letting other people’s words do the heavy lifting while you focus on connecting the dots.
The quote is a strange literary device. It allows us to borrow authority we haven’t earned, to dress our modest thoughts in borrowed finery.
Yet there’s honesty in the quote, too. It admits that all our ideas are built on foundations laid by others. Every writer is, in some sense, a plagiarist—not by theft, but by inheritance.
Jorge Luis Borges, “The Library of Babel and Other Essays”
In Rare Styles, <blockquote> are set apart with comfortable margins and a subtle background treatment—enough to signal “this is someone else talking” without turning your page into a ransom note made of clippings. Citations are handled through the <cite> element, because proper attribution is the difference between scholarship and plagiarism, and we prefer the former.
Epigraph
The whole of science is nothing more than a refinement of everyday thinking.
— Albert Einstein
An <figure class="epigraph"> sets a short, attributed quotation at the head of a section or page. Unlike a blockquote, it is small, italic, and right-aligned — a voice from outside the text, placed at the threshold rather than woven into the argument.
Keep epigraphs brief. Their job is to set a tone before the reader enters, not to carry an argument.
.boilerplate
A muted block for text notes, fine print, or a short standing notice, set off from the prose by a top rule and a leading info marker. Each <p> inside carries the marker, so the block reads as a small notice about the page rather than part of the argument. The glyph is drawn from the canonical Material Symbols Outlined family. Harvested into the library in v0.6.15.
Rare Styles is a narrow, professional CSS library for clarity-first longreads and decision-first data views — not a general-purpose framework.
Definition Lists
A plain <dl> is styled directly: readable spacing, bold enlarged terms, and extra separation before each new term. Use it for glossary-style or principle-style content where each term introduces a short block — the manifesto principles are set exactly this way.
- Clarity first
- Every component should help the reader decide faster, not admire the styling longer.
- Scannability
- Dense information should still reveal structure at a glance.
- Narrow scope
- Rare Styles is for longreads and decision-first views, not for general-purpose UI theming.
.dl-grid
The grid variant turns a definition list into a compact key:value grid. Use it for metadata, settings summaries, technical facts, or small inspection panels.
- Version
v0.6.14- Status
- In progress
- Next release
v0.6.14_1
dt > code inside .dl-grid is intentionally rendered at normal weight, so code-like keys do not become too heavy.
Tags
.tag
Raw Code
<code>
<pre>
<code></code>
</pre>
.legal
.material-symbols-outlined