A design language borrowed from the Kindle: warm paper, one ink, hairline rules, and
no depth whatsoever. Everything below is built from the tokens in
styles/tokens.css — change those and the
whole site follows.
Color
01
Paper
--paper
Paper sunk
--paper-sunk
Paper raised
--paper-raised
Ink
--ink
Ink 3 · meta
--ink-3
Accent
--accent
Grayscale ramp
--g-0 … --g-7 · the panel only resolves ~16 levels, so the ramp stops at 8
Highlights
yellowbluepinkorangee-ink defaultwith a note
Type
02
--t-3xl / serif
Bookerly
--t-2xl / serif
Chapter One
--t-xl / serif
A section heading
--t-lg / serif
A card title
--t-read / serif
Reading body — 19px, 1.62 line height
--t-base / sans
UI chrome — buttons, labels, rows
--t-sm / sans
Metadata, timestamps, captions
--t-xs / sans
Eyebrow · uppercase · tracked
serif = content and anything the reader dwells on · sans = chrome and controls · measure capped at 34rem (~66ch)
Space & shape
03
--s-1 · 4
--s-2 · 8
--s-3 · 12
--s-4 · 16
--s-5 · 24
--s-6 · 32
--s-7 · 48
--s-8 · 64
--r-sm 2 · --r-md 4 · --r-lg 8 · --r-full for pills only
❦
dividers: hairline · ornament · dither (for loading and fills)
Device chrome
04
Status bar
adhyan.blog
9:41 72%
App bar
Notes on building small software
Reading footer & location bar
Location 1,204 of 3,1807 min left in chapter · 38%
Buttons
05
one primary per view · hover = fill shift, never a shadow · 44px min target on touch
Forms
06
Used only for new-post notifications.
19 px
Navigation
07
Table of contents
Reading
08
Chapter One
Why small software wins
The first thing you notice about a Kindle is what it refuses to do. There is no
notification tray, no infinite feed, no colour begging for attention. It has one job and the
entire industrial design bends toward it: a surface that
disappears behind the words. That is the brief for this whole kit.
Every interface decision here is subtractive. Rules instead of shadows. Fills instead of
gradients. A single accent, used perhaps twice a page.1
Perfection is achieved not when there is nothing more to add, but
when there is nothing left to take away.
The reading column is capped near sixty-six characters, the line height sits at 1.62, and the
text is justified with hyphenation on — exactly what the device
does, because it turns out a decade of typographic tuning is hard to beat.
1. The accent is --accent, a slate blue
that reads as dark gray on an actual e-ink panel.
Selection toolbar
Dictionary lookup
liminal
/ˈlɪmɪn(ə)l/ · adjective
Occupying a position at, or on both sides of, a boundary or threshold.
DictionaryWikipediaTranslate
Highlights & notes
A surface that disappears behind the words.
Location 214Yellow highlight
Rules instead of shadows. Fills instead of gradients.
↳ This is the actual rule for the site. No box-shadow anywhere in the CSS.
Location 231Note
Perfection is achieved… when there is nothing left to take away.
The first thing you notice about a Kindle is what it refuses to do. There is
no notification tray, no infinite feed, no colour begging for attention.
It has one job, and the entire industrial design bends toward it:
a surface that disappears behind the words. That is
the brief for this site as well — subtractive, quiet, and fast.
Every decision is a removal. Rules instead of shadows, fills instead of gradients, one
accent used perhaps twice a page.
Loc 1,2047 min left
adhyan
Illustration
13
Drawing for a one-bit panel. The whole language follows from a single constraint:
there is no gray — only ink, paper, and how densely you place one on the other.
One ink, no fills. Tone is density — dots and hatch — never a lighter color.
Three line weights only: 1 hairline for interior detail, 1.5 for contour, 2.25 for the
silhouette and the ground line. Strokes are non-scaling, cut flat at the ends, mitered at
the corners — engraving, not marker pen.
Everything is drawn on a 48-unit grid, so a spot at 32px and the same spot at 88px stay
in register with the type.
No perspective, no cast shadows, no gradients. Light is implied by which side gets hatched.
Photographs are not exempt: they get thresholded to one bit and framed like a printed plate.
also available inside SVG as fill="url(#kTone25)" — same four densities, same theme
Line weight
1 · hairline1.5 · contour2.25 · silhouette
Spot library
bookslampnotebookmugreadershelf
sizes: --xs 20 · --sm 32 · --md 56 · --lg 88 · --xl 140, all from one 48-unit drawing
Scenes are composed from the spot library rather than drawn
fresh — same grid, same weights, so the parts stay in register.
A continuous tone thresholded to one bit by the
#kDither filter. The same filter
takes a photograph the rest of the way to print.
Ornaments
Illuminated initial
The initial is a printed block, not a
big letter: a hairline square, a stipple ground, and the serif face sitting inside it. Use it once,
on the first paragraph of a piece — the moment a reader commits. Everywhere else, the plain
.k-dropcap is enough.
Generated cover art
Every piece gets a plate without
anyone drawing one. A procedural field is ordered-dithered through a 4×4 Bayer matrix and seeded by
the title, so a given title always produces the same art — and it's ink and paper, so it themes.
Why small software wins
Essay · 2026
The cost of a feature
Note · 2026
Shipping on a weekend
Log · 2025
Notes on latency
Note · 2025
In use
Nothing here yet
Highlights you make while reading will collect on this page.
Reading light
A spot at 56px sits level with a card title and a line of meta — that's what the
48-unit grid buys you.
Kindle UI Kit · styles/tokens.css +
styles/kindle.css · no dependencies, no shadows.
Drawn and built by Claude.