Ink & Paper

A design system of two inks on paper — tokens, CSS, React components and document templates. Built for interfaces and for documents that get printed.

Русский · English

Everything measures. Every line is a dimension, a leader, a scale or a boundary; every number has a unit; the one accent color means measure or not guaranteed. No rounding, no shadows, no gradients — texture comes from printing, not from the screen.

What's inside

Tokens	tokens/tokens.json (W3C DTCG) and tokens/roles.json — the single source. CSS, JS and JSON are built from them
CSS	dist/ink-and-paper.css — tokens, fonts, base, patterns and component styles in one file; works without React
Print	dist/print.css — A4 page, margins, folio, breaks. Paper prints light, without a ground
Components	React: Button, Link, TextField, DataTable, Sheet, LoadingState, EmptyState, ErrorState, ThemeProvider, Instrument
Assets	Anticva display face (SIL OFL), eight instrument emblems in SVG
Templates	templates/page.html, templates/document.html (+ .ru), examples/specimen.html
Checks	contrast of every text pair in both themes, no raw values outside tokens, types — on every push

Use it

npm install github:malinkin-s/ink-and-paper#v1.0.0

Plain HTML:

<link rel="stylesheet" href="node_modules/@malinkin-s/ink-and-paper/dist/ink-and-paper.css">
<p class="ip-kicker">Report</p>
<h1 class="ip-display">Measurement</h1>
<button class="ip-button ip-button--primary ip-pressable">Send</button>

React:

import '@malinkin-s/ink-and-paper/css';
import { Button, DataTable, ThemeProvider } from '@malinkin-s/ink-and-paper';

<ThemeProvider theme="auto">
  <DataTable caption="Measurement" rows={[{ label: 'Checked', value: 30, unit: 'programs' }]} />
  <Button>Send</Button>
</ThemeProvider>

Tokens in JS:

import { tokens } from '@malinkin-s/ink-and-paper/tokens';
tokens.role.dark.accent; // '#5CA382'

A document: copy templates/document.html, replace the text, print to PDF (A4).

Work on it

npm install
npm run build          # tokens → dist/
npm run check          # contrast, raw values, types, build
open examples/specimen.html

Change a value in tokens/tokens.json, never in the outputs. A new color, typeface or line type needs an entry in docs/en/decisions.md.

Documentation

Principles · Stop list · Color · Type · Grid · Lines · Motion · Components · Instruments · Documents · Accessibility · Decisions

Versions follow VERSIONING.md; changes are in CHANGELOG.md.

License

MIT © 2026 Sergey Malinkin. The Anticva typeface is © Konstantin Krastev under the SIL Open Font License 1.1 (assets/fonts/anticva/OFL.txt). IBM Plex is loaded from Google Fonts under the SIL OFL.