Portfolio

## 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).

4xl Wander the forest
2xl Where the mushrooms glow
md Body copy in Inter keeps long text calm and legible.
hand Handwritten 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

Menu
★★★★☆

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

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.
File
Edit

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

- Apple
- Apricot
- Banana
- Cherry
- Grapefruit
- Mango

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.

Inkwash · v0.1.0 · MIT · a work in progress

Delete this painting?
This can't be undone — the pigment soaks in for good.
Let's chat
A native `<dialog>` styled with Inkwash — backdrop blur, spring entrance, closes on backdrop click or Esc.
Menu

- Overview
- Components
- Themes
- Settings