View PDF →

A Design System Playbook · 2026

The Playbook, Bound.

A constraint system for editorial documents — cool canvas, single accent, serif carries hierarchy.

Quire

Contents

What's inside this playbook

02

Chapter 01

The Problem

03

Chapter 01 · The Problem

Word document gray is not neutral — it's stale

AI can produce a 50-page playbook in minutes. Most of them land as gray Calibri walls on pure-white pages — technically readable, but nothing about the page invites you to keep reading.

Why this happens

Without a constraint system, every session drifts toward defaults — system fonts, blue-gray neutrals, no rhythm. The output looks like a Word document because that's what training data is full of.

What's missing

Not capability. Not effort. The missing piece is discipline: a small set of rules that an agent will not break, no matter how the prompt drifts.

Note Polished typography on bad content is "polished mediocrity." Quire's job is the typography. You bring the argument.
04

Chapter 01 · The Problem

1

The number of chromatic colors in a Quire document. Sky blue #1cb2f5 — and nothing else.

Every "category color," every "success green," every "warning red" spends visual budget. A document that needs differentiation uses gray weight, not a second hue.

05

Chapter 02

The Constraint Language

06

Chapter 02 · The Constraint Language

Three constraints carry everything

Quire is not a UI framework. It's three pillars and ten rules — enough structure for consistent output, narrow enough that every document still feels composed rather than templated.

Color · single accent, no second hue

Surface and text · cool grays (B ≥ G ≥ R)

Canvas
#f7fbff
Ink
#131b2a
Ink-muted
#647184
Rule
#d3e0ed

Accent · sky blue, locked system-wide

Accent-tint
#c8ebfa
Accent
#1cb2f5
Accent-deep
#0d8ace
— no second hue —
forbidden
— no second hue —
forbidden

Type and spacing

07

Chapter 02 · The Constraint Language

Default document vs. Quire

Same content, different rules. The defaults are not neutral — they encode decisions that fight against editorial reading.

Element Default doc Quire
Canvas Pure white #ffffff Cool canvas #f7fbff
Body font Calibri / Arial fallback Fraunces, opsz 14, SOFT 50
Grays Neutral or warm (`R ≥ B`) Cool-toned (`B ≥ G ≥ R`)
Accent colors Multi-color, no ceiling Sky blue only, no second hue
08

Chapter 03

The Page Archetypes

09

Chapter 03 · The Page Archetypes

A 50-page wall of body text is not a book — it's a transcript. The rhythm is what makes it readable.
— Quire design notes 10

Colophon

This playbook was set with Quire.

Eleven pages, one accent color (sky blue #1cb2f5), one serif family (Fraunces), one sans for chrome (Inter Tight). Ten editorial pages plus this colophon.

Quire is a constraint system, not a generator. It can compose this document because the document follows its own rules. If a Quire-styled output ever breaks these rules, the rules — not the document — are wrong.

SKILL.md · CHEATSHEET.md · references/design.md
assets/templates/playbook.html
Inspired by tw93/kami · MIT License
11