Initial Version

2026-06-08 08:54:29 +01:00
commit 2cf1b64bfa
3 changed files with 1039 additions and 0 deletions
@@ -0,0 +1,102 @@
+# 和紙 · 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.