103 lines
4.4 KiB
Markdown
103 lines
4.4 KiB
Markdown
# 和紙 · 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 <site> 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.
|