About This Template
An admin dashboard that looks drawn rather than rendered — a page from an ink notebook, with wobbly card edges, hatched charts and handwritten labels. Six complete pages: Overview, Customers, Orders, Products, Reports and Settings.
Two colours, and the constraint is the design
Ink #111111 on paper #FDFCF8, with #444444 for secondary text. No colour anywhere, no grey fills, no gradients, no blur. The Tailwind colour scale is replaced rather than extended, so a stray text-blue-500 fails to compile instead of quietly leaking colour onto page four — the constraint breaks the build rather than the design.
Status without colour
With no red and no green available, state cannot ride on hue. Every status is encoded three ways at once: a solid or dashed border, a filled, half or hollow circle, and a word. The word is the one that does the real work — a filled versus hollow circle is a few pixels of difference, and shape alone is not an accessible way to carry meaning when there is no colour left to fall back on. The same encoding is reused for stock state, so one legend covers the whole dashboard.
Typography that keeps numbers readable
Handwriting for things you read, monospace for things you compare. Kalam is self-hosted for headings, labels and navigation; every number, ID, date and currency figure is set in monospace and right-aligned. A handwriting face makes a 3 and an 8 argue with each other, and a column of figures set in one will not line up however it is aligned — so data never touches the hand font.
Charts that are actually drawn
Bar, line and horizontal-bar charts rendered with Rough.js at roughness 1.5, 2px strokes and hachure fill. Axes are a single confident stroke rather than the usual sketched-over double line. The wobble is seeded, so charts stay still instead of twitching on every resize, and they redraw at the real width rather than stretching a viewBox, which would smear the hatching. Hachure density doubles as a magnitude channel — denser means bigger — so rankings survive a black-and-white printout, with a legend on every chart that uses it.
Details that make it read as hand-drawn
Card corners rotate through four variants of an asymmetric border radius so neighbouring cards never wobble identically; a repeated irregular corner stops reading as hand-drawn the instant the eye catches the repeat. Shadows are hard offsets with no blur, shrinking on hover while the card shifts into the gap, so it reads as paper being pressed rather than sliding. Tables have no cell borders at all — rows are separated by a single dashed rule, which is exactly why the numeric columns are monospace and right-aligned.
Built to behave
Every chart carries a text description of its shape and headline figure. Contrast runs about 18:1 for body ink on paper. Verified across all six pages with no horizontal overflow at 380px and no console errors. It builds to a fully static site with no Node server at runtime, so it deploys by uploading a folder.
What you get
The complete Next.js project source — App Router, TypeScript, Tailwind and Rough.js. All demo data and copy sits in a single file, and the README covers the palette rule, the status encoding, the typography split and the four Rough.js settings that are doing the real work.