4.4 KiB
和紙 · Washi
© 2026 Andy Dixon · 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
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="washi.css">
Fonts (Noto Serif JP + DM Mono) are @imported 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 <site> using Washi", the recipe is:
- Link
washi.css; remove the old stylesheet. - Wrap the page in
.site-header+.container+.site-footer. - 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. - Use Noto Serif JP (
h*/.display/.title-jp) for headings and one or two kanji/seal flourishes; keep everything else in mono. - 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 · All rights reserved.