Midnight Essays
A long-read review after dark: ink-blue night, warm paper type, one amber lamp.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A literary review designed for reading late, in bed, for forty minutes at a time. Deep ink-blue pages, warm parchment-coloured serif type set at generous sizes, and a single amber accent like a reading lamp. No photographs — just essays, footnotes and the pleasure of a long paragraph.
Midnight Essays is a reading environment first and a website second. It takes its cues from the literary quarterlies of the mid-century, the paper-white-on-ink night modes of good e-readers, and the warmth of a single reading lamp in a dark room. The canvas is a deep ink-blue rather than black, which is gentler on eyes at night; the type is a warm parchment tone, not white. There is no photography: the essays and their titles are the imagery, set in a beautiful text serif at book sizes with footnotes, reading times and word counts as the only decoration.
Principles
- Optimise for forty minutes of reading, not for a five-second scan.
- Warm text on cool dark: never pure white on pure black.
- Type is the image — no photographs, no illustrations.
- Show word counts and reading times; they are a promise.
- One amber mark per screen, like a lamp in a dark room.
Motion
A thin amber reading-progress line grows along the top edge as you scroll. Text blocks fade up 10px as they enter, slowly, like eyes adjusting to lamplight.
Do & don't
Do
- ✓ Show word count and reading time on every essay.
- ✓ Keep the reading column under 68 characters.
- ✓ Use amber footnote markers with hover previews.
Don't
- ✕ Don't use pure white text or a pure black background.
- ✕ Don't add photography or stock illustrations.
- ✕ Don't set body text smaller than 18px.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 359 lines of DESIGN.md in total.
More like this
All Editorial & Luxury →Broadsheet Press
No. 001A morning broadsheet: masthead, column rules, datelines and a grey halftone photograph.
Didone Couture
No. 002Haute couture in two inks: a hairline Didone, paper white and absolute black.
Folio Press
No. 003A literary publisher's catalogue: Garamond, small caps, cream paper and a printer's red.
Herbarium Journal
No. 004A naturalist's field journal: specimen plates, Latin names, moss green and foxed paper.
Linen Atelier
No. 005An artisan workshop journal: flax tones, soft serif, stitched details and daylight.
Magenta Shout
No. 006A pop-culture magazine at full volume: towering italics, hot magenta, cut-out photos.