# 和紙 · Washi

> © 2026 Andy Dixon · [www.dixon.cx](https://www.dixon.cx) · All rights reserved.

A warm **paper & sumi-ink** CSS framework. No build step, no dependencies — one
stylesheet of plain, semantic class names you drop straight onto markup.

```
v3/
├── washi.css     ← the framework (tokens + reset + components + utilities)
├── index.html    ← live showcase of every component
└── README.md     ← this file
```

## Quick start

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="washi.css">
```

Fonts (Noto Serif JP + DM Mono) are `@import`ed by `washi.css`, so no extra `<link>`
is required. Optional dark theme: add `data-theme="sumi"` to `<html>`.

---

## Design language

| Aspect      | Choice                                                            |
|-------------|------------------------------------------------------------------|
| Background  | Warm washi paper `#f3ede1` + greyscale noise + corner colour-washes |
| Text/ink    | Sumi `#1a1714`, monospace body (**DM Mono**)                      |
| Display     | **Noto Serif JP** — headings, brand mark, big numbers, kanji      |
| Accents     | Vermilion `#c0392b`, jade `#2e7d5e`, murasaki `#7c5cbf`, gold `#b07d2e` |
| UI labels   | UPPERCASE, wide letter-spacing, small (eyebrows / button text)    |
| Borders     | 1.5px hairlines; 2px ink rules under headers/footers              |
| Radius      | Tight — 2px controls, 4px inputs, 8px cards                       |
| Motion      | Press-down buttons, fade/pop overlays, shimmer loading            |
| Signature   | The **hanko seal** (`.seal`) and `完`-style kanji flourishes      |

All values are CSS custom properties under `:root` — see the **DESIGN TOKENS**
section of `washi.css`. Re-theme by overriding the semantic aliases
(`--bg`, `--surface`, `--text`, `--heading`, `--border`, `--accent`, …).

---

## Component cheat-sheet

**Layout** — `.container` / `.container-sm`, `.section`, `.grid` (auto) /
`.grid-2/3/4`, `.stack` / `.stack-sm` / `.stack-lg`, `.cluster`, `.spread`, `.center`.

**Header/nav** — `.site-header` > `.brand` (`.mark` JP + `.mark-en`) and
`.nav` > `a` (use `aria-current="page"` for the active link).

**Typography** — `h1`–`h6` (serif), `.display`, `.title-jp`, `.eyebrow` / `.label`,
`.lead`, `.kanji`. Text colour: `.muted`, `.t-accent`, `.t-jade`, `.t-violet`, `.t-gold`.

**Buttons** — `.btn` + one of `.btn-primary` `.btn-accent` `.btn-success`
`.btn-info` `.btn-danger` `.btn-ghost`; sizes `.btn-sm` / `.btn-lg` / `.btn-block`;
`.is-loading` for the shimmer. Groups: `.segmented` (square, joined) and
`.pills` (rounded ends). Mark the selected child `.active` or `aria-pressed="true"`.

**Cards** — `.card` > `.card-header` / `.card-body` / `.card-footer`; `.card-title`;
add `.card-hover` for lift; top-stripe variants `.card-accent/-jade/-violet/-gold`.

**Feedback** — `.badge` (+ `-accent/-jade/-violet/-gold/-solid`), `.tag`,
`.alert` (+ `-accent/-jade/-violet/-gold`) with `.alert-title`,
`.status` (+ `.error/.success/.info`).

**Forms** — `.field` > `label` + input; styled `input/textarea/select`,
`.check` for checkbox/radio rows, `.input-group`, validation `.is-valid/.is-invalid`,
`.hint`.

**Data** — `.table` (+ `.table-hover`, `.table-zebra`), `pre`/`code` blocks, `.stat` > `.stat-num` + `.stat-label`.

**Flourish** — `.seal` / `.seal-round` / `.seal-ink` (hanko stamp),
`.rule` (centred-glyph divider), `.hero`.

**Overlay** — `.overlay` + toggle `.show`; `.modal` inside; `.win-kanji` for the popped kanji.

**Utilities** — `.surface`, `.bordered`, `.shadow` / `.shadow-lg`, `.text-center/-right`,
`.uppercase`, `.full`, `.hidden`, spacing `.mt-* / .mb-*`.

---

## Redesigning a site with Washi

When asked to *"redesign &lt;site&gt; using Washi"*, the recipe is:

1. Link `washi.css`; remove the old stylesheet.
2. Wrap the page in `.site-header` + `.container` + `.site-footer`.
3. Map existing UI to the cheat-sheet above — prefer composing the provided classes
   over writing new CSS. Reach for tokens (`var(--…)`) before hard-coded values.
4. Use Noto Serif JP (`h*` / `.display` / `.title-jp`) for headings and one or two
   kanji/seal flourishes; keep everything else in mono.
5. Keep the palette disciplined: ink + paper as the base, **one** accent per section.

`reduced-motion` and keyboard `:focus-visible` are handled by the framework.

---

© 2026 Andy Dixon · [www.dixon.cx](https://www.dixon.cx) · All rights reserved.