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 — show the panel matching the active tab and hide the rest with [hidden].
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.
Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.