Rana

CSS for calm, long-form reading.

6 KB gzipped · Zero JavaScript · No preprocessor

Write Markdown. Link one stylesheet. Publish.

Rana styles the HTML your Markdown compiles to, including GitHub Flavored Markdown output: footnotes, task lists, tables, and alerts. No JavaScript, no preprocessor, no dependencies. The core is 6 KB gzipped. The file you read in the repo is the file the browser runs.

Typography that reads

A serif for reading, a sans-serif for headings and labels, and a monospace for code. Fluid sizes on a 65-character measure.

Four themes, one mechanism

Light, dark, a warm sepia¹, and a soft green mint², built on color-scheme and light-dark(). The dark theme follows your system setting.

Accessible by measurement

Every palette is checked against WCAG AA, and body text targets AAA. Focus stays visible, code and tables scroll from the keyboard, and motion respects your system setting.

Right-to-left, by default

Logical properties throughout, an Arabic typeface, and spacing that mirrors cleanly. Set dir="rtl" and the layout follows.

Getting started

One file, one link. Add rana.css to your <head>:

<link rel="stylesheet" href="https://unpkg.com/rana-css/rana.css">

Install it from npm:

npm install rana-css

Or grab the latest release from GitHub, or view the file directly.

For Shiki, KaTeX, or GitHub-style alerts, link rana-integrations.css after the core file. Step through every styled element in the demo, or read every custom property in the token reference.

Made for reading

Rana is set in Source Serif 4, an open-source Adobe typeface built for long stretches of text. It comes from the same family as the sans-serif and monospace Rana uses elsewhere, so the page reads as one voice, not three.

Your words land at a comfortable size, 17 to 19 pixels depending on the screen, with room between the lines and a column about 65 characters wide. That is about as far as the eye travels before it needs the next line.

Small refinements come set. A year like 1889 uses old-style figures that sit level with the letters around it. Emphasis is a true italic, drawn by the type designer rather than sloped by the browser. And a paragraph never leaves a single word alone on its last line.

The rest is styled the moment you write it: a link, bold, emphasis, an underline, a little highlight, inline code, and keyboard keys such as Ctrl and C.

Built on the modern web platform

Rana requires a mid-2026 evergreen browser.

light-dark(): Color variables flip between light and dark based on color-scheme. No JavaScript color-scheme observer.
:has(): Used to style form layouts, task lists, footnotes, and disclosure states without wrapper elements.
CSS nesting: The source reads as authored. No preprocessor required.
interpolate-size: Disclosure elements (<details>) animate to height: auto in pure CSS, no scripts.

Right-to-left and Arabic support

Rana supports RTL natively. It uses logical CSS properties throughout, so margins, padding, borders, and text alignment all flip with writing direction without a separate stylesheet.

For Arabic content, Rana provides a Noto Sans Arabic typographic voice and resets letter-spacing to preserve cursive glyph joining. Set dir="rtl" and lang="ar" on your root element.

What Rana looks like

Syntax highlighting is optional. Add rana-integrations.css and run Shiki in your build step, and every fenced block is highlighted for light and dark. Switch themes above to see it adapt.

function readingTime(text, wordsPerMinute = 238) {
  const words = text.trim().split(/\s+/).length;
  const minutes = Math.ceil(words / wordsPerMinute);
  return minutes === 1 ? "1 minute read" : `${minutes} minute read`;
}

Tables scroll horizontally on small screens. The first column stays anchored.

Framework	CSS size	JavaScript	Classes required
Rana	6 KB	0 KB	None
Bootstrap 5	~60 KB	~76 KB	Required

Make it yours 🎨

Colors, fonts, and spacing are custom properties. Change one, and the page follows. A new theme is about a dozen lines:

[data-theme="forest"] {
  color-scheme: light;
  --color-bg: #F3F7F0;
  --color-heading: #1A2E1D;
  --color-body: #243428;
  --color-link: #226644;
  --color-link-hover: #194D33;
}

Add data-theme="forest" to your page and it applies. The sepia and mint themes are built the same way, so there is always a working example to copy.

Browse every overridable property in the token reference.

Optional integrations

The core file covers standard HTML. Three optional overlays are available via rana-integrations.css:

Shiki syntax highlighting. Fenced code blocks get GitHub Light and Dark token colors from a single build-time render.
KaTeX math rendering. Display and inline math blocks are sized and spaced to match the surrounding text.
GitHub-style alerts. Note, tip, important, warning, and caution callouts from GFM output, with theme-aware colors.

See REQUIREMENTS.md for the pipeline hooks each overlay expects from your static site generator.

Printing

Print styles strip backgrounds, set black text on white, expand links to show their URLs, and prevent page breaks inside tables and code blocks. Syntax highlighting and alert colors are preserved, since they carry meaning beyond decoration.

Is Rana for you?

Use Rana if

You publish a blog, documentation, or long-form essays.
Your content is Markdown or semantic HTML.
You want themes and RTL support without configuration.

Not a fit if

You are building an app or dashboard. Rana has no layout grid and no components.
You rely on utility classes. Rana has none.
You need older browser support. Rana targets mid-2026 evergreen browsers.

Credits

Typography: Source Serif 4, Source Sans 3, and Source Code Pro by Adobe (SIL OFL); Noto Sans Arabic by the Noto Project Authors (SIL OFL); all served via Bunny Fonts. Fallback stacks from System Font Stack.
Typographic guidance: Matthew Butterick's Practical Typography.
Color: Light and dark palettes based on Pico CSS; sepia is Flexoki by Steph Ango.
Interaction: Easing curve after Emil Kowalski's animation research; interface details informed by Vercel's Web Interface Guidelines and Rauno Freiberg's Interfaces.
Pictograms: IBM's Carbon Design System (Apache 2.0).
Built with: Claude Code and Claude Fable 5.

The sepia palette is Flexoki, by Steph Ango. ↩
The eye resolves the most detail in green, peaking near 555 nm at the middle of the visible spectrum, so a soft green background stays clear while easing the glare of pure white. See RP Photonics, Luminosity Functions. ↩