Skip to content

Getting Started

Three files. One import. Start building.

Install

Copy tokens.css and tailwind.config.js into your project, or install via npm:

npm install remarque-tokens

Then import the tokens before your other styles:

Plain HTML

<link rel="stylesheet" href="tokens.css">

Astro

---
import '../styles/tokens.css';
---

Next.js

// app/layout.tsx
import './tokens.css';

Use the typography classes (.text-display, .text-title, .text-meta), content width utilities (.content-reading, .content-standard), and the .remarque-prose wrapper for article content.

Page Archetypes

Every page built with Remarque must conform to one of these four archetypes. Copy the HTML, adjust the content.

Essay

Long-form writing. The core content type.

<article class="pt-24">
  <header class="content-reading mb-8">
    <h1 class="text-display font-display">Your Title</h1>
    <div class="mt-4 font-mono text-meta text-muted">
      2026-04-11 · 8 min read · topic
    </div>
  </header>
  <div class="remarque-prose content-reading">
    <p class="text-body-lg text-fg-muted">Lead paragraph...</p>
    <h2>Section Heading</h2>
    <p>Body text...</p>
  </div>
</article>

Project Dossier

Technical, structured, informative.

<article class="pt-24">
  <header class="content-standard mb-8">
    <h1 class="text-display font-display">Project Name</h1>
    <p class="mt-4 text-body-lg text-fg-muted max-w-reading">
      One-paragraph summary.
    </p>
  </header>
  <div class="content-standard mb-12 p-6 border rounded-md">
    <dl class="grid grid-cols-[auto_1fr] gap-x-8 gap-y-2 font-mono text-meta">
      <dt class="text-muted">Status</dt>
      <dd>Active</dd>
    </dl>
  </div>
  <div class="remarque-prose content-reading">
    <h2>Architecture</h2>
    <p>Technical details...</p>
  </div>
</article>

Notebook

Short-form notes, bookmarks, observations.

<div class="pt-24">
  <h1 class="text-display font-display">Notes</h1>
  <div class="mt-12 content-reading">
    <article class="py-6 border-b">
      <div class="font-mono text-meta text-muted mb-2">
        2026-04-11 · topic
      </div>
      <p class="text-body">Note content...</p>
    </article>
  </div>
</div>

Landing

Homepage. Clear identity statement and navigation.

<div class="pt-32 pb-24">
  <h1 class="text-display font-display max-w-[20ch]">
    Your identity statement.
  </h1>
  <p class="mt-6 text-body-lg text-fg-muted content-reading">
    One paragraph of context.
  </p>
</div>
<div class="border-t pt-8">
  <div class="grid grid-cols-3 gap-8 content-standard">
    <a href="/section">
      <h2 class="text-section font-display">Section</h2>
      <p class="mt-2 text-body text-fg-muted">Description.</p>
    </a>
  </div>
</div>