Remarque

A typography-first design system for editorial, technical, and personal web projects.

Live Demo | Type Specimen | Design Tokens | Get Started

---

Why Remarque?

Most developer sites inherit the visual language of SaaS dashboards or component-library defaults. Remarque is the antidote: a system rooted in book typography, editorial design, and the quiet confidence of a well-made publication.

What makes it different:

• Typography is the interface — not color, not illustration, not animation. Three fonts (Newsreader, Inter, JetBrains Mono), each with a strict role.
• 17px minimum body text — one pixel above the industry default. The difference in reading comfort is immediate.
• 46rem reading column — derived from the typographic standard of 45-75 characters per line.
• OKLCH color space — perceptually uniform. A lightness of 0.50 actually looks mid-brightness.
• Self-hosted fonts — no Google CDN dependency. Strict CSP. GDPR-compliant.
• AI-native — designed to be consumed by Claude Code, Cursor, Copilot, and other AI coding tools with zero aesthetic drift.

Install

npm install remarque-tokens

Then import in your CSS:

@import 'remarque-tokens';

Or copy tokens.css and tailwind.config.js directly into your project.

For AI Agents

Remarque includes a machine-readable implementation contract. When prompting any AI coding tool:

Build this page using the Remarque design system.
See: REMARQUE.md for specification, AGENT_RULES.md for implementation contract, tokens.css for design tokens.

The agent rules define build order, non-negotiable rules, disallowed patterns, and a quality checklist. Every decision is specified — agents don't need to guess.

Files

File	Purpose
REMARQUE.md	Full system specification — philosophy, visual rules, page archetypes, acceptance criteria
AGENT_RULES.md	Implementation contract — build order, non-negotiables, pitfalls, quality checklist
tokens.css	Design tokens as CSS custom properties + base typography classes + prose styling
tailwind.config.js	Tailwind CSS v3/v4 configuration extending tokens into utility classes
package.json	npm package manifest for remarque-tokens

Three-Font System

Role	Font	Usage
Display	Newsreader	Page titles, hero headings, article titles. Never for body copy.
Body	Inter	Body text, UI labels, navigation, buttons. The workhorse.
Mono	JetBrains Mono	Metadata, code, timestamps, labels. Never for headings.

Page Archetypes

Every page conforms to one of four archetypes:

• Essay — long-form writing with serif title, mono metadata, narrow reading column
• Project Dossier — structured project page with metadata block and architecture section
• Notebook — short-form notes with mono timestamps, no cards
• Landing — identity statement, content navigation, generous whitespace

See the live demo for all four archetypes in action.

Design Decisions

Decision	Value	Why
Body size	17px	Measurably improves reading comfort over 16px default
Line height	1.75	Generous — this is what makes prose readable
Reading width	46rem	~70 chars/line at 17px Inter. Upper end of comfortable range for technical content
Color space	OKLCH	Perceptual uniformity. Consistent across hues without manual tuning
Top padding	6rem min	The breathing room that says "this is editorial, not a dashboard"
Border radius	0.5rem max	Restrained. No "friendly SaaS" over-rounding
Motion	120ms/180ms	Hover and theme transitions only. No scroll-triggered, entrance, or staggered animations

Named For

In fine art printmaking, a remarque is a small original drawing made by the artist in the margin of a proof print. Found only in limited editions, it is the mark that says: this was made by someone specific, with intention.

License

MIT