Editorial product UI with tokenized polish.
These pages demonstrate the Inkwell CSS system: serif headings, cool neutral surfaces, indigo accents, 1.5px borders, compact components, and automatic dark mode.
Using Claude/Codex/Devin/Cursor - tell your coding assistant to:
Read https://raw.githubusercontent.com/vscarpenter/inkwell/main/agent-instructions.md and apply the Inkwell Design System to this web app. Follow the design tokens, CSS classes, typography, spacing, color rules, and component patterns exactly, without introducing a competing styling system.
Example pages
18 pagesGetting started guide
Long-form documentation page exercising TOC, code blocks, kbd chips, alerts, tables, and the full editorial typography hierarchy.
NewEditorial carousel
A swipeable five-part series built on CSS scroll-snap — callouts, cited findings, keyboard navigation, and a zero-JS core.
OperationsDashboard patterns
Stats, tables, status chips, timeline entries, and compact toolbar controls.
ProductApp shell
SaaS chrome with .navbar, sidebar column, scrollable table, tooltips, and aria-busy export.
Tailwind v4 integration
Inkwell tokens and components alongside Tailwind utilities — border-hair, dark:, and cascade-order notes.
Input patterns
Text inputs, checkboxes, destructive actions, saved-state labels, and field grouping.
NewForm patterns & dialogs
Field states, radio & switch, alerts, code blocks, kbd chips, and a native dialog.
EditorialArticle layout
Long-form reading, table of contents chips, callouts, and section rhythm.
CommercePricing page
Plan cards, feature lists, selected states, and primary purchase actions.
PeopleProfile page
Identity header, status badges, activity table, and team metadata.
PlanningRoadmap page
Timeline entries, severity pills, progress chips, and milestone cards.
AuthSign-in form pattern
Static demo of a sign-in surface — fields, checkbox, primary action, and support copy. No real authentication.
MarketingLanding page
Hero, feature grid, pull quote, FAQ with native <details>, and a CTA — all token-driven.
PatternsSearch results
Search bar, filter facets, category tabs, breadcrumbs, pagination, and skeleton loading.
Release notesChangelog
Version pills, categorized changes, migration code blocks, and pagination.
Error404 page
Centered empty-state with icon slot, headline, body, and a list of likely destinations.
ShowcaseComponent preview
Every component, every state, on one page. The palette toggle in the header flips Indigo & Cloud, Clay, Sage, Burgundy, and Azure live.
PalettesCompare palettes
Five iframes side-by-side rendering the preview in each palette. Toggle theme in the header to flip all five together.
TokensTheme primitives
Palette, typography, spacing, radius, shadow, motion, and layout variables. Also exported as tokens.json.
Palette samples
8 swatchesMade with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.