Tailwind v4 utilities. Inkwell tokens and components. One page.
Every color, type stack, radius, and the 1.5px border-hair signature
come from the same Inkwell tokens that drive the rest of this site. The components below
(.btn, .card,
.alert) are unchanged Inkwell. Layout (the grid, the gaps,
the max-width, the spacing scale) is plain Tailwind. The dark:
variant honors the same [data-theme] toggle Inkwell uses everywhere.
Layout in utilities, primitives in components
The grid below uses grid grid-cols-1 md:grid-cols-3 gap-5.
Each tile is an unmodified .stat-card. Tailwind handles where things sit; Inkwell handles what they look like.
The signature: border-hair
Tailwind's default border is 1px. Inkwell's signature is 1.5px.
We deliberately do not redefine the default; instead, you reach for border-hair
wherever Inkwell character is intended.
border (1px)Tailwind's stock 1px border. Used everywhere outside Inkwell-flavored markup.
border-hair (1.5px)The system's signature, on a retina display. On 1× displays Chrome rounds to 1px and reports 1px in getComputedStyle — that's browser behavior, not a bug.
Dark mode — two paths, one cascade
Toggle Auto / Light / Dark in the header. Two of the three tiles below adapt
via Inkwell's token shift — same utility classes in both modes, because
--paper and --slate have different values per mode.
The third tile uses Tailwind's dark: variant to pick a
different utility per mode, which fires when Inkwell's
[data-theme="dark"] attribute is set on <html>.
Uses bg-paper text-slate. No dark: needed — the values of --paper and --slate change in dark mode, so the same utility produces the right color in both.
bg-accent-tint maps to Inkwell's --accent-tint. Preserves the specific 0.14/0.18 alpha values instead of guessing at /14.
Uses bg-paper dark:bg-accent and text-slate dark:text-paper. Toggle Dark to see the accent take over. Fires under the manual toggle ([data-theme="dark"]) — for OS-only dark, set the toggle to Auto and mirror OS preference into data-theme via JS, or rely on token-shift like the first tile.
Uses bg-rust-tint and border-rust-tint-border.
Uses bg-warning-tint and text-warning-dark.
Uses bg-olive-tint and border-olive-tint.
Components and utilities compose
All four buttons below are .btn instances. The last two
add Tailwind utilities to widen and enlarge. In a real Tailwind v4 build via
inkwell-theme.css, components sit in
@layer components and utilities in
@layer utilities, so plain
w-full and px-8 h-12
win the collision. This CDN demo loads inkwell-components.css
unlayered (the browser compiler can't pull external @imports
into Tailwind's compile context), so the demo uses Tailwind's !
prefix to force precedence — drop the ! in a real build.