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 that imports tokens.css. The structural layer stays intact. See variants/ for working examples — each is around 30 lines.
What about Tailwind interop?
The repo ships tokens.json as a machine-readable mirror. Feed it into your Tailwind config's theme.extend, into Style Dictionary, or into a Figma plugin. Treat tokens.css as canonical and regenerate the JSON when CSS changes.
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.