Philosophy
Inkwell is for content that wants to feel curated rather than crowded — share pages, dashboards, login flows, single-purpose apps where character carries more weight than density. It borrows the typography of printed books: ceremonial italic display type, mono-caps metadata, hairline rules, generous whitespace.
Three typefaces do all the work. Newsreader (italic, for titles and ceremony). JetBrains Mono (small caps, for labels, metadata, and structure). Inter (regular, for body prose only). The hierarchy comes from which face is used where, not from size jumps alone.
The system ships in two themes. Day is warm cream paper with deep bronze — daylight, foolscap paper. Night is warm dark with brass — evening, lamplit desk. Both share the same component vocabulary; only the tokens shift.
Tokens · Color
--bg
#F4EDDA
--bg-deep
#EAE0C4
--ink
#1F1812
--ink-soft
#5A4F40
--muted
#968A75
--rule
#D4C9B0
--accent
#7A5F1F
--warning
#B5471F
Tokens · Typography
In Press
Welcome Back
please present your credentials
Body prose for descriptions, about sections, and long-form text where readability beats character.
METADATA STRIP
EYEBROW · CATEGORY HEADER
FORM LABEL · FINE PRINT
Tokens · Spacing
--iw-space-14px
--iw-space-28px
--iw-space-314px
--iw-space-420px
--iw-space-528px
--iw-space-640px
--iw-space-756px
--iw-space-880px
--iw-space-9120px
Components · Brand
.ink-wordmark
Colophon
.ink-wordmark.ink-wordmark--lg
Colophon
Components · Display
.ink-eyebrow
Frontispiece
.ink-eyebrow.ink-eyebrow--flex (full-width)
Infrastructure
.ink-title.ink-title--display
Twenty-Two Services
.ink-title.ink-title--md
Welcome Back
.ink-sub.ink-sub--lg
please present your credentials to continue
Components · Inline
.ink-meta with .ink-pip separators
.ink-body
Body prose uses Inter, the only sans-serif in the system. It exists because Newsreader is too soft for long passages and JetBrains Mono is too dense.
.ink-link · .ink-link-mono
Components · Buttons
.ink-btn (primary)
.ink-btn-secondary
Components · Elements
Atomic UI primitives — the small, composable pieces that appear inside forms, layouts, and patterns. Status indicators, surfaces, feedback signals, and the typographic punctuation marks of an interface.
.ink-alert — info, success, warning, error
Notice
Saved
In Rehearsal
Reading Cancelled
.ink-avatar — initials · sizes
N
O
A
B
.ink-avatar-group — overlapping stack
NOAB
NOA+5
.ink-badge — default · --accent · --warning · --solid · --dot
Draft
Featured
Beta
On Air
Entry
Outage
.ink-banner — default · --accent · --warning
.ink-card — surface plate
An Entry
A quiet plate
Cards hold a single thought. A heading, a paragraph, perhaps an action.
.ink-chip — filter pill
All
Essays
Notes
Letters
.ink-kbd — keyboard glyph
K
·.ink-progress — determinate
.ink-separator — hairline rule
.ink-skeleton — loading placeholder
Components · Forms
.ink-form-field — label + input + hint
we'll only write when something opens
at least eight characters
.ink-textarea
.ink-checkbox · .ink-radio-group
.ink-pin-input
Components · Structure
.ink-divider · .ink-end · .ink-frame
section break
— Finis —
Components · Navigation
.ink-breadcrumb
.ink-tabs
Long-form pieces, set in Newsreader.
.ink-pagination · .ink-stepper
…
1
Credentials
2
Verify
3
Welcome
Components · Overlay
.ink-tooltip · .ink-popover · .ink-toast — quiet ephemera
in rehearsal
live
Components · Data
.ink-accordion
What is Inkwell?
A design vocabulary for things made with restraint.
Why two themes?
Day and Night share the same vocabulary; only the tokens shift.
How are icons handled?
Iconify via Nuxt Icon — Lucide and Heroicons collections, served locally.
.ink-empty
An empty shelf
.ink-table
| Service | Region | Uptime |
|---|---|---|
| spruce | us-east | 14d 06h |
| cedar | eu-west | 22d 11h |
| juniper | ap-south | 3d 02h |
.ink-timeline
Mar 14
Spring Edition Opens
Mar 16
Scheduled Maintenance
Mar 22
v0.2 · Autumn Tokens
Components · ColorMode
.ink-color-mode-switch (live — controls this page)
Patterns
Patterns are higher-order compositions of the components above. Each is documented in a working example you can copy-paste.
Hero
Centered ceremonial entry — eyebrow + display title + sub. The opening of every page in the system.
Topbar
Wordmark left, metadata right. Minimal app shell header that doesn't compete with content.
Frontispiece
Centered narrow card containing brand, hero, and a framed form. Login pages and gated entry.
Masonry
CSS columns with break-inside:avoid. For categorized lists where category counts vary.
Spec Sheet
Three-column program insert of metadata. From the video share page; reusable for any technical record.
Plate
Dark frame for focal media (video, image). Bronze-tinted shadow on Day, brass bloom on Night.
Voice · Idiom
Inkwell inherits the language of printed programs. Use these substitutions when writing copy. The pattern is: the literal action becomes a marginal note; the section header becomes a volume entry.
Login page (eyebrow)
“Frontispiece”
Dashboard (eyebrow)
“In Press”
Video / share page (eyebrow)
“Now Reading” · “An Entry From The Kitchen”
Footer closer
“— Finis —”
Primary action button
“Sign-in” · “Enter” · “Continue”
Counts as title
“Twenty-Two Services” — spell out small numbers
Subtitle phrasing
“set at inkwell.io” · “pressed by spruce”
Status indicators
all systems nominal · uptime · est. 2024
Reference
Drop
@nficano/inkwell/css into a project, add the font imports, and apply .inkwell-day or .inkwell-night to the body or a container. All component classes are namespaced .ink-. All custom properties are --iw-. Themes can nest — a single page can have a
.inkwell-night region inside a .inkwell-day page. Tokens flow through custom properties, so all components inside the nested region pick up the new theme automatically.