Paper Ledger style guide

Colors

Nine values from one warm family. There is no accent color, so nothing on the page shouts.

Canvas#e7e4ddPage background

Paper#f7f5f0Cards and inputs

Cover#fcfbf7Top of a card

Paper hover#f1eee7Rows under the pointer

Line#d9d4c8Borders and dividers

Faint#9c968aMarks only, never words

Edge#857f73Borders of inputs

Muted#625d53Secondary text

Ink#1b1a17Main text, solid buttons

Type

Two fonts with one job each. Newsreader writes titles. IBM Plex Mono writes everything else.

Page title
Newsreader 500, 48 to 60pxFiled and found

Card title
Newsreader 500, 22pxThe One-Page Handoff

Pull quote
Newsreader 500 italic, 24pxWrite the page your buyer will forward.

Body
IBM Plex Mono 400, 15 to 16pxBody text is set in a typewriter face with generous line spacing so long lines stay easy to follow.

Secondary
IBM Plex Mono 400, 13px, mutedSummaries and helper text use the muted tone.

Label
IBM Plex Mono, 11px caps, wide spacingChecklist

Shape and depth

Small corners, hairline borders and one soft shadow. The page should feel like stacked sheets of paper.

Corners6px on cards, inputs and buttons. 4px on tag chips.

Borders1px in the line color. Inputs and small buttons use the darker edge color.

ShadowCards only: 0 1px 2px at 4% plus 0 4px 16px at 5%, both in ink.

Widths1180px for directories. 720px for reading pages. 20px side padding.

Breakpoints640, 768, 1024 and 1280px. The grid goes from one column up to four.

MotionA card lifts 2px under the pointer and an opened panel fades in. Both switch off for readers who ask for less motion.

PhonesCards drop the tall cover and keep four ruled lines. Fields use 16px text so the page does not zoom.

Components

These are live. Hover them, tab through them, and copy the class names from the page source.

Buttons and links

Browse the directory Open a sample entry Jump to tokens A text link to the rules

Form controls

Search

Topic

View

Badges, labels and chips

Field-tested Working draft Template #handoff #weekly

Document card

ChecklistField-tested

Monday Money Check

Ten minutes each Monday to see what came in and what is owed.

Finance desk2023

Money

Pull quote

Polite and on time beats angry and late.

Note card

Why it is on the shelf

A weekly look catches a slow month while there is still time to act.

The seven rules

Follow these and a new page will match, even if you never open the stylesheet.

Two fonts, one job each. The serif writes titles. The typewriter face writes the rest.
No accent color. State is shown by dark ink against light marks, never by hue.
Faint grey is for marks only. Words use ink or muted so they stay readable.
One line color draws every border. Only things you type in or press get the darker edge.
A list item looks like the thing it lists. Here a card looks like the first page of a document.
Filters sit in one row. The live count goes right under them.
Every action has a button shape. Underlined text is only for links that take you somewhere.

Tokens

A token is a named value, like a paint swatch with a label. Paste these into any stylesheet to carry the look.

:root {
  --pl-canvas: #e7e4dd;
  --pl-paper: #f7f5f0;
  --pl-cover: #fcfbf7;
  --pl-paper-hover: #f1eee7;
  --pl-line: #d9d4c8;
  --pl-edge: #857f73;
  --pl-ink: #1b1a17;
  --pl-muted: #625d53;
  --pl-faint: #9c968a;
  --pl-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --pl-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pl-content: 1180px;
  --pl-letter: 720px;
  --pl-radius: 6px;
  --pl-shadow: 0 1px 2px rgba(27, 26, 23, 0.04), 0 4px 16px rgba(27, 26, 23, 0.05);
}

Start a new page

Add the fonts and the stylesheet, then put the class pl on the body.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap">
<link rel="stylesheet" href="paper-ledger.css">

<body class="pl">
  <main class="pl-main">
    <article class="pl-entry">
      <h1 class="pl-entry-title">Your title</h1>
    </article>
  </main>
</body>

Style guide