Luminary UI styles all core typography elements automatically. No classes required.

Headings

All heading levels (h1–h6) receive bold weight, tight letter spacing (-0.025em), and vibrant text color. Each level has a distinct font-size.

<h1>Heading 1 — 2.2rem</h1>
<h2>Heading 2 — 1.75rem</h2>
<h3>Heading 3 — 1.4rem</h3>
<h4>Heading 4 — 1.15rem</h4>
<h5>Heading 5 — 1rem</h5>
<h6>Heading 6 — 0.875rem</h6>

Note: h6 also receives text-transform: uppercase and letter-spacing: 0.03em — ideal for section labels and eyebrow text.

Paragraphs & Text

Paragraphs use the secondary text color (--glass-text-secondary) and have 1.25rem bottom margin. <strong> and <em> are also styled.

<p>A standard paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
<small>Small/muted caption text.</small>

Links

Links are automatically colored with --glass-accent (iOS blue by default), have no underline, and fade on hover.

<a href="/docs/introduction">This is a styled link</a>

Inline Code

The <code> element is styled as an accent-colored pill with a subtle tinted background.

<p>Use the <code>backdrop-filter</code> property for glass effects.</p>

Code Blocks

<pre> elements get a dark glass panel treatment with horizontal scroll and a monospace font stack.

<pre><code>
const luminary = 'glassmorphism for everyone';
console.log(luminary);
</code></pre>

Blockquote

<blockquote>
  <p>Design is not just what it looks like and feels like.</p>
  <cite>— Steve Jobs</cite>
</blockquote>

Horizontal Rule

<hr> renders as a 1px line using --glass-border color with rounded caps.

<hr />

Lists

<ul> and <ol> are styled with proper indentation and secondary text color. Nesting works automatically.

<ul>
  <li>Glassmorphism</li>
  <li>iOS-style transitions</li>
</ul>

<ol>
  <li>Install the package</li>
  <li>Import the CSS</li>
</ol>

Mark & Keyboard

<mark> highlights text with a warning-tinted background. <kbd> renders as a 3D keycap.

<mark>Highlighted text</mark>
<kbd>⌘</kbd> + <kbd>K</kbd>

Text Selection & Scrollbars

Custom text selection styling is applied globally — selected text uses the accent color at 25% opacity. Webkit browsers also receive custom glassmorphic scrollbars with frosted thumbs and a specular inset shadow, which auto-adjust in dark mode.