Chapters you page through, not a feed you scroll past.
The core is CSS scroll-snap — swipe, trackpad, and the scrollbar work with JS disabled. Buttons, dots, and arrow keys are progressive enhancement.
A live tour of Inkwell with its default Indigo & Cloud palette. Use the toggle
in the top-right to flip between auto / light / dark. Open tokens.css for the source,
DESIGN_SYSTEM.md for the docs, index.html for a starter template.
Hex labels show light-mode values. Toggle to dark to see the lifted equivalents
(e.g., --accent shifts to #7A8AD1 periwinkle).
A deck paragraph sits between the headline and the body — serif italic, twenty pixels, comfortable line-length.
| Invoice | Status | Amount | Issued | Due |
|---|---|---|---|---|
| INV-0041 | Paid | $1,280.00 | May 2 | May 16 |
| INV-0042 | Open | $640.00 | May 9 | May 23 |
.tbl-scroll wrapper — the table scrolls instead of crushing columns on narrow
viewports. .sr-only and .skip-link ship for screen-reader and
keyboard flows; pair aria-busy="true" with disabled from JS
(CSS only blocks pointer events, not keyboard activation).
Elevated 502 errors on /sync for 27 minutes. Root cause: a stale connection pool after the deploy at 14:02 UTC. Mitigated by rolling restart; permanent fix tracked in INC-2025-0412.
| Item | Owner | Status | Due |
|---|---|---|---|
| Revamp planner sidebar | Avery | Done | Mon |
| Migrate auth to OAuth2 | Jordan | In review | Wed |
| Rate-limit retries | Sam | At risk | Fri |
Default uses --oat background with the 1.5px hairline. Tinted variants reuse
--accent-tint / --olive-tint to stay on-palette without introducing new colors.
Heads up
Your workspace will move to the new billing model on the first of next month.
Settings saved
Changes are live for everyone in this workspace.
Approaching plan limit
You've used 87% of your monthly seat allocation.
Sync failed
Last attempt at 14:02 returned a 502. Retrying in 5 minutes.
const dialog = document.querySelector('#confirm');
document.querySelector('#open').addEventListener('click', () => {
dialog.showModal();
});::backdrop.
Tab panels are unstyled containers. The reference script synchronizes aria-selected, roving tabindex, keyboard navigation, and [hidden].
Members content can contain controls, tables, or empty states without changing the tab treatment.
Billing content remains associated with its controlling tab through aria-controls and aria-labelledby.
Activity shows the same keyboard contract: Arrow keys move, Home and End jump, and focus follows selection.
Hover or focus to reveal. Pair with aria-label for screen-reader users — the visual bubble is decorative.
Animation respects prefers-reduced-motion; the gradient lives between --gray-100 and --gray-200 so it stays warm in dark mode.
Try a broader query, or remove a filter. Searches match component names, token names, documentation headings, and inline code.
Why a 1.5-pixel border is the most opinionated decision a design system can make — and the one that ages best.
Every design system makes a wager about borders. Most pick one pixel, because that is the default in every framework and the cheapest line the browser knows how to draw. Inkwell picks one-and-a-half. The half-pixel is a small concession to the era of retina screens, and a deliberate signal that this system was tuned for the era it ships in, not the one CSS was first specified for.
The half-pixel is the system's most opinionated decision — and the easiest one to defend.
On a 2× display, a 1.5-pixel border renders as three device pixels. That is the smallest unit that reliably reads as a drawn line rather than an artifact of antialiasing. One-pixel borders, on the same screen, often disappear under shadows and tinted backgrounds. Two-pixel borders read as frames around posters — fine for art, wrong for product UI.
Pair this with sparing color and the system stops shouting. That, more than any single token, is what Inkwell is for.
Built and governed
Distinctive IP, legible blocks, portable wrappers, sound governance, and no one using any of it yet.
Enabled and adopted
Packaged for the channel, so it gets approved, implemented, and explained where the money actually flows.
of pension funds hire their managers through a consultant. You don't reach the institution; the gatekeeper does. Andonov et al. · AFA 2024
of advisor model assets are now custom-built for a specific platform. You win by fitting the channel, not pitching it. Cerulli · 2025
The core is CSS scroll-snap — swipe, trackpad, and the scrollbar work with JS disabled. Buttons, dots, and arrow keys are progressive enhancement.
Built and governed
A carousel that only works with a framework, a build step, and a script tag.
Enabled and adopted
A carousel that starts as plain scrollable HTML and gets better from there.
lines of JavaScript required for the core swipe, snap, and scroll behavior. inkwell-components.css
pixel border on the frame, as always. The slide divider drops to a 1px hairline so the outer frame stays dominant. Design invariant · §1.5
Controls stay [hidden] until the enhancement script wires them — no dead buttons without JS.
Arrow keys and Home/End navigate when the region has focus; smooth scrolling
is gated on prefers-reduced-motion: no-preference. See examples/carousel.html
for the full five-part series.
Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.