Quire
A design system for editorial documents — playbooks, white papers, single-page reports, landing pages, slide decks.
Get started
Install
One command.
Install as an agent skill — works with Claude Code, Cursor, Codex, Goose, and every other agent the skills CLI supports. Then ask in natural language.
npx skills add FoundDream/Quire
Claude Code (global, auto-confirm)
npx skills add FoundDream/Quire -a claude-code -g -y
Then say: “做一份关于 X 的 playbook”, “把这份内容排成白皮书”, “turn this into an editorial PDF”.
Introduction
Output forms
One language, five format profiles.
The same palette, typography, and component library produce different document shapes. Playbook, white paper, single-page, landing-page, and slides profiles are all live today.
| Profile | Pages | Format | Status |
|---|---|---|---|
| Playbook | 10–80 | 11×8.5in landscape | ● live |
| White paper | 8–30 | A4 portrait | ● live |
| Single-page report | 1 | A4 portrait, fixed | ● live |
| Landing page | continuous | A4 width, flows + paginates | ● live |
| Slides | 5–60 | 16:9 HTML deck, arrow-key nav | ● live |
Introduction
See it
An 11-page self-introducing playbook.
The same system, applied to introduce itself. Four content archetypes, three chapter dividers, one stat-anchor, one pull-quote, one colophon.
Reference
The design system
Every token, archetype, component, and rule visualized below. Edit the
:root CSS variables at the top of this file to retheme —
every section below is composed from them.
Quire · v1 · 2026
Design System Reference
Every token, archetype, component, and rule on one page. Edit
:root at the top of this file to retheme; every section below
is composed from those variables.
01 / 9
Tokens
Color
Cold-toned and chromatically monochrome. One accent, one canvas family, one cool gray scale. There is no second chromatic hue.
Surface
Text — cool grays, B ≥ G ≥ R
Accent — sky blue, locked system-wide
02 / 9
Tokens
Typography
One serif (Fraunces, variable) carries every hierarchy from cover title to
body. Sans (Inter Tight) only for UI chrome. Two weights — 400
and 500. No bold, no italic body.
Font roles
Editorial
Fraunces 文
The document voice: titles, body, quotes, and stat figures. Chinese pairs with Noto Serif SC.
Interface
Inter Tight 字
Quiet chrome: eyebrows, table headers, buttons, labels, and tags. Chinese pairs with Noto Sans SC.
Code
JetBrains Mono
Mechanical detail: code, version strings, page chrome, and metadata.
Source: assets/styles/quire-type.css defines the three roles, Fraunces axes, type levels, legacy aliases, and Chinese font pairing.
opsz 144 · SOFT 30
opsz 14 · SOFT 50
Type scale
cover, chapter divider
section open
subsection
reading text
notes, sources
chrome
assets/styles/quire-type.css.03 / 9
Tokens
Spacing
Base unit 4pt. Seven tiers cover everything from inline adjacency to cover hero gap. Page margins are asymmetric — left tighter than right — to give breathing room for page numbers and marginalia.
Scale
Page margins · asymmetric (left tighter)
| Format | T / R / B / L | Notes |
|---|---|---|
| A4 portrait | 22 / 24 / 24 / 22 mm | White paper, single-page, landing-page |
| Landscape (playbook) | 18 / 22 / 22 / 18 mm | Default playbook profile |
04 / 9
Tokens
Strokes & radii
Three line weights cover every divider, table head, and pull-quote bar. Radii stay flat: 3pt is the maximum a Quire document will ever round. Anything heavier or rounder belongs to a different system.
Stroke weights — three values, shown at 1×
Border radius — flat default, 3pt ceiling
05 / 9
Structure
Page archetypes
Every page in a Quire document belongs to one of seven archetypes. Each archetype is a fixed structure: changing the structure produces a different archetype, never a hybrid.
06 / 9
Structure
Page chrome
Running header and page number are the only marks that sit outside the content area. Tiny, mono, ink-faint — present enough to orient, quiet enough to disappear. Standard content, TOC, comparison, and colophon carry both; cover and chapter divider drop both; stat-anchor and pull-quote keep the page number only.
| Element | Spec | Position |
|---|---|---|
| Running header | mono 8pt · ink-faint · +0.04em | 12pt above top edge. Left: document name. Right: current chapter title. |
| Page number | mono 9pt · ink-faint · tabular-nums | 12pt below bottom edge. Outer corner — right (portrait or landscape). |
| Margin rule (optional) | 1px · ink-faint | A hairline between header and body, only on documents over 40 pages — gives long docs a stronger orienting line. |
07 / 9
Building blocks
Components
Live demos. Each component below is what the templates actually render — copy the CSS class names from this file into your own.
Callout · 4 label variants
Compare table
| If you're testing… | Use | Why |
|---|---|---|
| Whether the problem is real and frequent | Discovery interview | Open-ended; surfaces unprompted workarounds |
| Willingness to pay or commit | Pre-sale / LOI | Behavior is the only honest signal |
| Whether a specific solution is usable | Prototype test | Reveals where assumptions break |
Tag pill
Stat block
of startups failed because they built something nobody wanted — before agentic coding made shipping a prototype an afternoon's work.
Inline highlight .hl and term of art <em>
AI changes internal processes by collapsing the gap between decision and action. The shift isn't speed — it's that the team becomes orchestrator of agents rather than individual contributor. Both are valid moves; the first uses accent color and 500 weight, the second is the term-of-art convention.
Lists · unordered, ordered, definition
Unordered · em-dash bullet
- A signal is an observation collected from interviews, tickets, or telemetry.
- A hypothesis is a prediction with a fail condition — metric, magnitude, timeframe.
- A test is the cheapest experiment that could falsify the hypothesis.
Ordered · numbered, accent
- State the signal in one sentence.
- Rewrite it as a hypothesis containing a metric, a magnitude, and a timeframe.
- Name the cheapest test that could prove the hypothesis wrong.
Definition · term + body
- Signal
- An observation from a customer or user — not yet a claim.
- Hypothesis
- A prediction with a fail condition. Names metric, magnitude, timeframe.
- Validation
- A test designed to falsify the hypothesis, not confirm it.
08 / 9
Building blocks
Diagrams
The one-accent constraint forces editorial-style visualization — no color encoding, no chart junk, direct labels instead of legends. The eight inline-SVG archetypes below cover most editorial needs; full templates and the small-multiples rule for multivariate data live in references/diagrams.md.
09 / 9
Quantitative limits
Density limits
A document violates Quire when any of these limits is exceeded. They prevent the most common AI failure mode: treating every page as if it were the most important page.
| Element | Limit | Why |
|---|---|---|
| Callouts (Exercise / Note / Think) | ≤ 2 per spread | Three or more makes the page feel like an annotated lesson, not a chapter. |
| Pull-quote pages | ≤ 1 per chapter | Pull-quotes punctuate. Two in a chapter becomes decoration. |
| Stat-anchor pages | ≤ 2 per document | Stats anchor; over-use turns the document into an infographic. |
| Accent surface (per page) | judgment call | The 5 % cap was retired. The principle holds: one accent should still feel scarce. |
Inline .hl highlights |
≤ 2 per page | Highlight everything = highlight nothing. |