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.

01

Example pages

14 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.

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
Built with inkwell.css, tokens.css, and demo-only helpers in demo.css.

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