# papercade
**A pixel × hand-drawn design library.** Pixel-game UI (quest logs, XP bars, dialogue boxes, coin counters) fused with Excalidraw-style sketchiness (paper grain, ink strokes, hand-written notes) — one coherent system, unmistakably not a generic UI kit. Think *NES.css × Excalidraw, with a character in it*.
**Live demo:** https://anandparth.github.io/papercade/ — scroll it. The character walking down the page is the scroll indicator, inking his route behind him and stopping to talk. He is built from three shipped components and nothing else.
**License:** MIT (code) · CC BY 4.0 (art) · OFL (fonts)
## Quick start
Two CDN tags, any HTML page, no framework required. The second one is only needed for the interactive elements:
```html
```
Or from npm:
```sh
npm install papercade
```
```js
import "papercade"; // the stylesheet
import "papercade/elements"; // registers and friends (typed)
```
To hack on the library itself:
```sh
git clone https://github.com/anandparth/papercade
cd papercade
pnpm install
pnpm build # tokens + css + fonts + art + element bundles -> dist/
pnpm watch # rebuild on change, in one terminal
pnpm dev # live demo at localhost:5844, in another
```
## What's inside
| Layer | What | Status |
|---|---|---|
| Tokens | DTCG `tokens/tokens.json` → Style Dictionary → `--px-*` CSS custom properties (paper/ink palette, Excalidraw stroke+fill pairs, pixel motion curves) | ✅ |
| Surfaces & type | `.px-paper` / `.px-screen` dot-grid surfaces, `.px-mono` HUD labels, `.px-hand` notes, `.px-hl` marker highlight | ✅ |
| Static components | `.px-frame` pixel box · `.px-btn` sketch button · `.px-card` sketch card (build-time rough.js border) · `.px-dialogue` RPG dialogue · `.px-note` / `.px-arrow` annotation · `.px-quest` quest select · `.px-chip` HUD chip · `.px-xp` / `.px-hp` meters | ✅ 8 of 8 |
| Custom elements | `` bring-your-own-sprite-sheet mascot · `` collectible + shared wallet · `` foil tilt · `` two-face turn | ✅ 4 of 4 |
v1 ships **exactly 12 components** and stops. No generic form controls — your `