Inkwash — a hand-drawn design system

Get it

CSS-first — one stylesheet, no build step. Download the whole kit or grab a piece.

<link rel="stylesheet" href="watercolor.css">
<body class="wc"> <button class="wc-btn">Go</button> </body>

Download kit (.zip) watercolor.css watercolor.js tokens.json registry.json llms.txt

Color

Warm paper neutrals, a gold primary, and a 5-level semantic scale. Every token flips with the theme.

Typography

Playfair (headings) · Inter (body) · Caveat (hand-lettered labels & buttons).

4xlWander the forest

2xlWhere the mushrooms glow

mdBody copy in Inter keeps long text calm and legible.

handHandwritten accents & buttons

Buttons

Wobbly ink outline on a filtered layer so labels stay crisp. Variants, sizes, states.

Variants

Sizes · Icon button

With icons

Cards

Soft elevation, optional sketch border and paper texture.

Sketch card · Plain card

Live catch

A rules engine that reads every field and speaks up the instant something's off.

Featured

Plain card

Same tokens, no sketch outline — just soft warm elevation on paper.

Forms

Inputs, selects, textareas, search, sliders, checkboxes, radios, switches — all themed and accessible.

Text input · Select · Textarea

Your email * We'll only use it to reply.

Inquiry

Message

Search field · Slider

Checkbox · Radio · Switch

Checkbox Radio A Radio B Switch

File upload · OTP code

Drop files to upload or click to browse — PNG, SVG, PDF up to 10 MB

Feedback

Semantic alerts (5 levels), badges, chips, tooltip, progress, spinner.

Semantic alerts

Critical

A blocking error stopped the submission.

Warning

Something needs your attention soon.

Info

A helpful note, no action required.

Tip

A little nudge toward the better path.

Badge · Chips · Tooltips (4 placements) · Spinner

New Billing Coding Tooltip on top Tooltip below To the left To the right

Progress bar

Tabs & avatars

Segmented tabs — with optional icons, a full-width wc-tabs--fill variant, avatars. Tabs scroll on narrow screens and support arrow-key nav.

Segmented tabs (with icons)

Full-width tabs

Avatar group

Status

Presence on hand-painted watercolor avatars — online pulses green when the user is there, plus away, busy, and offline.

Presence states (avatar + status dot)

Online

Away

Busy

In a meeting

Offline

Notification badge (overlay)

3 12

Overlays & menus

Modal (native <dialog>), dropdown & accordion (CSS-only <details>), toast, underline tabs, rating.

Modal · Toasts (6 levels + action) · Menu · Rating

★★★★☆

Underline tabs

Vertical tabs

Accordion

What is Inkwash?

A hand-drawn, watercolor-textured component library you drop in with one stylesheet.

Is it accessible?

Getting there — keyboard, focus rings, and ARIA are part of the v0.1 → v1 hardening pass.

Can I theme it?

Yes — add .wc-forest for the dark theme, or override the --wc-* tokens.

Data display

Table, skeleton loader, pagination, breadcrumbs, tags, empty state.

Table

Role	Company	Year
Senior Product Designer	XALT	2022–
Lead Product & UX Designer	BI	2019–24
Product + brand design	CoApp	2024–

Skeleton loader · Empty state

Nothing here yet

Add your first component to get started.

Tree view

Design system

Components

buttons.css

forms.css

Tokens

tokens.json

README.md

Breadcrumbs · Tags · Pagination

Design Systems

Data visualization

Everything for painted data — a full data grid (sortable columns, live filter, pagination, row selection) plus themed SVG charts: bar, line, pie/donut, sparkline, and a radar/spider echoing the portfolio's skill wheel. All via WC.init, all retinted per theme.

Data grid — sort · filter · paginate · select

Name	Role	Team	Rate
Ada Chen	Product Designer	Platform	$120
Ben Ortiz	UX Engineer	Growth	$95
Cora Diallo	Design Lead	Platform	$150
Devin Park	Researcher	Insights	$88
Elena Ruiz	Brand Designer	Marketing	$110
Femi Ade	Design Systems	Platform	$135
Grace Lim	Motion Designer	Growth	$102
Hugo Vidal	Product Designer	Insights	$118

Charts — bar · line · donut · radar · sparkline

+38%

this quarter

Growth Mode

A signature feature: themed foliage grows from behind an element on hover, then lazily retreats. Every theme has its own foliage set — toggle Night forest and hover again to see it swap. Wrap any element in <span class="wc-grow"> (one sprite by default; data-grow="2" for wider elements).

Hover to grow (button · button · chip)

Grows too

Walk foliage

Rain foliage

Fire foliage

Dark Forest foliage

Actions & lists

App bar, button group, toggle group, floating action button, stepper, list, and links — each labelled below.

App bar

Button group · Toggle group · Floating action button

Stepper

1 Discover 2 Design 3 Ship

List & link on a surface

Overview
Components
Themes

A plain Inkwash link on a simple .wc-surface.

Layout & type

Container, Stack, Grid, Image List, Masonry, and Typography utility classes.

Kbd · Labeled divider · Callout

Press ⌘ K to search, or Esc to close.

or continue with

Every pixel painted, every icon inked — software that feels like it was made by a person.— a happy Inkwash user

Type utilities

Overline

A heading utility — .wc-h3

Body copy via .wc-body, with a .wc-caption below.

Caption / helper text

Responsive grid

Grid cell

auto-fit

responsive

Image list

App navigation

Bottom navigation, drawer, speed dial, menubar, popover, timeline.

Bottom navigation

Drawer · Speed dial · Popover · Menubar

A native [popover] styled with Inkwash.

Timeline

2019
Discovery & research
2022
Design & prototyping
2024
Ship it

Advanced inputs

Number field, autocomplete (type to filter), transfer list (select then move).

Number field · Autocomplete

Transfer list

Blue Laser
CoApp
XALT

BI

Date & time

A hand-painted calendar (prev/next months, today, selection), a date-field popover, and a time-slot picker. Optional JS via WC.init.

Calendar · Date field · Time field

Date Time

Patterns & layouts

Components composed into real screens — a desktop app shell and a mobile flow, both built from the pieces above. The confirm-dialog pattern lives in Overlays & menus.

Desktop — settings screen with a two-column form

Fernfield Studio

Overview
Settings
Team

Workspace settings

Studio name

Theme

Bio

notifications

Email me Weekly digest

Mobile — sign-up flow

Join the studio

Name

Email

Code

or

Icons

288 felt-pen icons — Feather geometry re-inked into filled, variable-width marker strokes, themed via currentColor. Usage: <svg class="wc-icon"><use href="icons/sprite.svg#wc-i-home"/></svg>

Download all icons sprite.svg SVG · PNG (24/48/96/256) · PDF · sprite · JSON

Built for AI

Machine-readable specs so an assistant can generate correct Inkwash markup.

llms.txt

A concise, LLM-oriented map — setup, the rules for valid markup, and every component's class + minimal usage. Point your assistant here first.

Open llms.txt

registry.json

The full spec — variants, states, parts, a11y notes, and examples for 40+ components. Powers a future npx inkwash add CLI / MCP server.

Open registry.json

Pull it into your AI agent

Copy a ready-to-paste prompt that points any assistant at the live spec — or just grab the llms.txt link.