Type Scale

The theme's heading scale is intentionally unconventional. <h1> is a large display title; <h2> is a compact uppercase section label; <h3> is the primary readable heading for content sections. Use semantic HTML — don't skip levels for visual reasons.

Display Heading

<h1> — clamp(2rem, 4vw, 3rem) · weight 400 · tracking −0.03em

Section Label

<h2> — 0.76rem · uppercase · tracking +0.12em · weight 500

Content Section Heading

<h3> — 1.05rem · weight 500

<!-- Large display title (hero, page intro) -->
<h1>Display Heading</h1>

<!-- Compact uppercase label (section kickers, metadata) -->
<h2>Section Label</h2>

<!-- Primary readable content heading -->
<h3>Content Section Heading</h3>

Page Title Class

Because the base <h2> style is a small uppercase label, the showcase uses .page-title to override it to a readable page-level title. Apply this class when you need a prominent <h2> that reads as a title, not a label.

Page Title Override

<h2 class="page-title">Page Title Override</h2>

Body Text Hierarchy

Three levels of text weight via color tokens. The base <p> element defaults to --wm-color-text-secondary by the theme reset. Use inline style or a utility class in your own CSS to apply other levels.

Primary — --wm-color-text. Full-weight body copy, key values, and headlines.

Secondary — --wm-color-text-secondary (default <p>). Supporting descriptions, meta labels, and secondary content.

Muted — --wm-color-text-muted. Timestamps, captions, placeholder text, and de-emphasized UI chrome.

/* Apply to utility classes in your own stylesheet */
.text-primary  { color: var(--wm-color-text); }
.text-muted    { color: var(--wm-color-text-muted); }

/* Base <p> already targets text-secondary by the theme reset */

Links

Default <a> elements inherit the theme accent color and include an underline. No class required.

Inline anchor link — default state. Hover and focus states derive from --wm-color-accent.

<a href="/path">Link text</a>

Inline Code

Use <code> inline for variable names, token paths, class names, and short snippets. The element receives a monospace font and a subtle surface background.

Set data-theme="dark" on document.documentElement to activate the dark token set. Reference tokens like --wm-color-bg or --wm-radius-md in your CSS.

Set <code>data-theme="dark"</code> to activate dark mode.
Reference <code>--wm-color-bg</code> in your CSS.

Font Setup

The theme ships a single font-family token, --wm-font-sans, which falls back gracefully to system fonts if Inter is not loaded. Load Inter from Google Fonts before the theme stylesheet.

Checking Inter font load…

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
/>

/* Token resolved by the theme */
font-family: var(--wm-font-sans);
/* → 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif */