jawnpaper

A drop-in CSS design system that makes any web page look like marker on cream paper. Tokens, components, and utilities for the hand-drawn aesthetic — with one wobbly SVG filter doing the heavy lifting.

install Add two lines to your <head> and one class to <body>:

<link rel="stylesheet" href="jawnpaper.css">
<script src="jawnpaper.js" defer></script>
<body class="notebook">

tokens

Everything is wired through CSS custom properties on :root. Override any of them in your own stylesheet to retheme.

palette

--np-yellow
#ffe87a

--np-red
#e85a4f

--np-blue
#5b9bd5

--np-green
#6ec275

--np-purple
#a780e8

--np-orange
#ff924f

--np-pink
#f48fb1

--np-teal
#4ec9b0

paper + ink

--np-paper
#fdfaf2

--np-paper-deep
#f6efd8

--np-paper-deeper
#ede4c5

--np-ink
#1a1a1a

typography

Three font families, all hand-lettered. Headings use Caveat, body uses Patrick Hand, the stamp class uses Patrick Hand SC for that all-caps marker feel.

heading 1 / Caveat

heading 2 / Caveat

heading 3 / Caveat

heading 4 / Caveat

A lede paragraph uses .np-lede for a slightly oversized intro line that signals "start reading here."

Body copy is Patrick Hand. Inline code sits on a yellow highlighter swatch. Underlined phrases use a CSS gradient. Colored text via utilities.

cards

The basic container. Wobbly ink border drawn by a ::before pseudo-element so it doesn't affect the contents.

plain card

Use .np-card on any block element.

<div class="np-card">
  ...
</div>

deep paper

Same card with a deeper paper background via .np-bg-deep.

highlighter card

Yellow background reads as a sticky note.

Wrap a grid in .np-tilt-children to give every Nth card a subtle pinned-note rotation. Tilts are auto-disabled below 720px and for prefers-reduced-motion.

notes / callouts

Highlighted callouts for asides, warnings, and tips. The default is yellow; modifier classes change the wash color.

Default note. Yellow highlighter wash. Good for "heads up" or "note to self."

Red note. Use for warnings or destructive actions.

Blue note. Use for general info or links to docs.

Green note. Use for confirmations or success messages.

Purple note. Use for trivia or "fun fact" asides.

Paper note. Subtle deep-paper background for low-emphasis callouts.

buttons + toolbars

Use <a class="np-button"> for links and <button class="np-button"> for actions. 44px minimum tap height built in.

Use .np-toolbar on a wrapping element for an evenly-spaced flex group:

tags + stamps

Tags are small inline labels: draft urgent info done fyi

Stamps are bigger, rotated, and meant to grab attention: experimental draft approved final

annotations

Circle a phrase: like this. Or in a different color: blue oval, green oval, purple oval.

Underline a phrase with a marker swipe: default yellow, red, blue, green.

code

Inline code uses a yellow swatch automatically when inside .notebook, or with the .np-code class anywhere.

For multi-line code, wrap a <pre> in .np-codebox:

function wobble(element) {
  element.style.filter = 'url(#np-wobble)';
  return element;
}

const card = document.querySelector('.card');
wobble(card);

tables

component	class	what it does
card	`.np-card`	Bordered paper container.
note	`.np-note`	Highlighter callout. Add `--red` / `--blue` / etc. for color.
button	`.np-button`	Pill button with 44px min height. Add `--primary` or `--danger`.
tag	`.np-tag`	Small inline label. Same color modifiers.
stamp	`.np-stamp`	Rotated red label. Eye-catching.
circled	`.np-circled`	Wobbly oval annotation around a phrase.

forms

your name email message

favorite shape hexagon octagon star subscribe? newsletter updates wobble strength

speech bubble + quote

a wobbly tail-down speech bubble. Use .np-bubble.

The most important step a man can take is the next one. Dalinar Kholin, Oathbringer

layout helpers

class	what it does
`.np-container`	Centered max-width 960px container with fluid padding.
`.np-grid`	Auto-fit responsive grid. Each cell is at least 310px or 100% of the parent.
`.np-stack`	Vertical stack with consistent spacing between children.
`.np-stack--lg` / `--sm`	Bigger or smaller stack gap.
`.np-tilt-children`	Auto-rotate every 3rd child a fraction of a degree (pinned-note effect).
`.np-wobble-border`	Apply a wobbly ink border to any element.
`.np-tilt-left` / `--right` / `-2` / `-3`	One-off tilt utilities.

customizing

All visual choices are tokens on :root. To retheme, override the variables in your own stylesheet after loading jawnpaper.css:

:root {
  --np-paper: #f0e6d2;       /* swap the cream for parchment */
  --np-ink: #2c1810;         /* sepia ink */
  --np-yellow: #d4af37;      /* gold highlighter */
  --np-red: #8b0000;         /* deep crimson */
  --np-font-display: 'Kalam', cursive;
}

Or scope the override under a class for per-page themes:

.midnight {
  --np-paper: #1c1c2e;
  --np-paper-deep: #2a2a40;
  --np-ink: #f0f0f5;
  --np-yellow: #ffd166;
}

browser support

Modern browsers (Chrome / Edge / Safari / Firefox 2023+). The whole system depends on filter: url(#…) and color-mix(), both of which are universally baseline now. prefers-reduced-motion disables card tilts and smooth-scroll. Print stylesheet drops the wobble for clean printouts.

Source: stash/docs/jawnpaper · Born from the border-shape playground.