A design system that reads like a magazine.
Inkwell is a pure-CSS toolkit for product UI, dashboards, and editorial interfaces. Two files, no build step, light and dark modes out of the box, and a serif-led typography system that makes ordinary product screens feel considered.
MIT licensed · Vanilla CSS · No npm install
What you get
6 traitsPure CSS, zero deps
No bundler, no preprocessor, no runtime. Two files you copy in. Tokens are visible, editable, and grep-able.
Light + dark, first-class
Auto via prefers-color-scheme, manual override via data-theme. Saturated tokens are lifted in dark — never just inverted.
Editorial typography
Serif headings carry gravitas, mono signals technical metadata, sans does the work. Three families with clear jobs.
Hairline 1.5px borders
The system's signature. Reads as letterpress, not wireframe — and never as Material Design's heavy 2px.
Tokens, never literals
Component CSS routes everything through CSS variables. Re-theming is a ~30-line palette file, not a fork.
WCAG AA body text
Captions clear 4.5:1. Focus rings clear 3:1 by a margin. Reduced-motion is honored. Color is never the only signal.
The only design system that ships in two files and still looks like it took a year.
— a designer who actually reads CSS
Frequently asked
5 questionsWhy no build step?
Build steps add maintenance, lock-in, and waiting. Inkwell is small enough that the gain from minification and tree-shaking is negligible compared to what you lose: editability, transparency, and the ability to ship to a static host with zero tooling.
Can I use this in React, Vue, or Svelte?
Yes — Inkwell is framework-agnostic. Link inkwell.css from your <head> (or import it from your app entry), then use the class names in your JSX/templates. There's no JavaScript runtime to integrate.
How do I add a new color palette?
Override the brand-layer tokens (--accent, --ivory, --paper, etc.) in a small CSS file loaded after inkwell.css. The structural layer stays intact. See variants/ for working override-only examples.
What about Tailwind interop?
Use inkwell-theme.css after @import "tailwindcss" for Tailwind v4 utilities and components. The repo also ships tokens.json as a generated machine-readable mirror; inkwell-tokens.css remains the canonical token source.
Is there a roadmap?
Yes. See the changelog for what shipped, and the design principles in DESIGN_SYSTEM.md for what won't ship — multiple accent colors, custom fonts, shadow-heavy components.
Ready to read the docs?
Six sections, ten minutes. You'll know the system end-to-end.
Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.