Design system sample

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.

View dashboard sample Open form sample

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.

01

Example pages

16 pages
Start here

Getting started guide

Long-form documentation page exercising TOC, code blocks, kbd chips, alerts, tables, and the full editorial typography hierarchy.

 Operations

Dashboard patterns

Stats, tables, status chips, timeline entries, and compact toolbar controls.

 Forms

Input patterns

Text inputs, checkboxes, destructive actions, saved-state labels, and field grouping.

 New

Form patterns & dialogs

Field states, radio & switch, alerts, code blocks, kbd chips, and a native dialog.

 Editorial

Article layout

Long-form reading, table of contents chips, callouts, and section rhythm.

 Commerce

Pricing page

Plan cards, feature lists, selected states, and primary purchase actions.

 People

Profile page

Identity header, status badges, activity table, and team metadata.

 Planning

Roadmap page

Timeline entries, severity pills, progress chips, and milestone cards.

 Auth

Sign-in form pattern

Static demo of a sign-in surface — fields, checkbox, primary action, and support copy. No real authentication.

 Marketing

Landing page

Hero, feature grid, pull quote, FAQ with native <details>, and a CTA — all token-driven.

 Patterns

Search results

Search bar, filter facets, category tabs, breadcrumbs, pagination, and skeleton loading.

 Release notes

Changelog

Version pills, categorized changes, migration code blocks, and pagination.

 Error

404 page

Centered empty-state with icon slot, headline, body, and a list of likely destinations.

 Showcase

Component preview

Every component, every state, on one page. The palette toggle in the header flips Indigo & Cloud, Clay, Sage, and Burgundy live.

 Palettes

Compare palettes

Four iframes side-by-side rendering the preview in each palette. Toggle theme in the header to flip all four together.

 Tokens

Theme primitives

Palette, typography, spacing, radius, shadow, motion, and layout variables. Also exported as tokens.json.
02

Palette samples

8 swatches
--ivoryPage background
--paperPanel surface
--slatePrimary text
--accentPrimary action
--oatHover surface
--oliveSuccess
--warningWarning
--rustDanger

Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.