58 registry items

Warm paper. Translucent veils.

Washi at the ground, veils above, three lights beneath. Chinese & Japanese typography, considered from the start.

58

registry items

3

lights on paper

MIT

licensed

The veil at work

Ruled paper and the Tale of the Bamboo Cutter beneath the veil: a glowing stalk among the bamboo.

今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。名をば、さぬきの造となむいひける。その竹の中に、もと光る竹なむ一筋ありける。あやしがりて、寄りて見るに、筒の中光りたり。それを見れば、三寸ばかりなる人、いとうつくしうてゐたり。翁いふやう、我朝ごと夕ごとに見る竹の中におはするにて知りぬ。子となり給ふべき人なめり、とて手にうち入れて家へ持ちて来ぬ。妻の嫗に預けて養はす。うつくしきこと、かぎりなし。いと幼ければ、籠に入れて養ふ。竹取の翁、竹を取るに、この子を見つけてのちに竹取るに、節を隔てて、よごとに金ある竹を見つくること重なりぬ。かくて翁やうやう豊かになりゆく。この児、養ふほどに、すくすくと大きになりまさる。三月ばかりになるほどに、よき程なる人になりぬれば、髪上げなどさうして、髪上げさせ、裳着す。帳のうちよりも出さず、いつき養ふ。この児のかたち、けうらなること世になく、屋のうちは暗き所なく光満ちたり。翁、心地あしく苦しき時も、この子を見れば、苦しきこともやみぬ。腹立たしきことも慰みけり。翁、竹を取ること久しくなりぬ。勢ひ猛の者になりにけり。この子いと大きになりぬれば、名を、三室戸斎部の秋田を呼びてつけさす。秋田、なよ竹のかぐや姫とつけつ。

Surfaces & marks

Cards, pills, and badges on the glass registers. Semantic tokens switch themes with a single class.

glass-card

The base veil. White over washi in light, a lifted warm dark in dark mode.

ruri 瑠璃korozen 黄櫨染sumire 菫neutral

buttons & badges

WV-101v0.2.0
live
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-card.json

Forms & controls

The glass field carries the full control set. Every focus gets a ruri ring.

npx shadcn@latest add https://washiveil.alexchih.com/r/glass-select.json

Overlays

Radix sits underneath the veils. Panels float on strong glass over a soft, deep scrim.

npx shadcn@latest add https://washiveil.alexchih.com/r/glass-dialog.json

Structure

Tabs, accordion, and tables in the washi editorial register.

The ground is warm and grained, with a soft ivory cast.

TokenNamed afterΔE
ruri瑠璃 — lapis blue7.8
korozen黄櫨染 — imperial amber7.8
sumire菫 — violet13.0
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-tabs.json

ground

#F7F3EC · dark #12130F

紙底 · washi ground

ink

#1C1914 · dark #E9E5DC

標題 · headings

body

#4A443C · dark #B5AFA2

內文 · body text

muted

#6E6659 · dark #A8A193

次要 · secondary text

faint

#9A9184 · dark #7E7869

meta · timestamps

ruri 瑠璃

#2E63B8 · dark #82B4F0

導引 · links, focus, selection

korozen 黄櫨染

#D0722E · dark #F2A36B

行動 · primary CTA, editorial marks

sumire 菫

#7B68C8 · dark #A99BEA

氛圍 · ambient glow, ::selection

deep

#112441 · dark –

hover 深端 · dark button text

Indicators & wayfinding

Understated states and clear wayfinding.

AC
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-pagination.json

Pickers & input

cmdk, day-picker, vaul, and OTP share the same veil.

Loading with ⌘K

Nothing here yet

The empty state is a dashed washi ground that stays quiet.

npx shadcn@latest add https://washiveil.alexchih.com/r/glass-command.json

Chinese & Japanese, first-class

Noto CJK unifies zh/ja glyph forms; display text balances; Japanese headings break at phrase boundaries.

zh-TW 中文

紙為底,紗為層,三色為光

暖紙質感的介面系統——全形標點與中日字形在各平台保持一致,排版不是事後補丁。

ja 日本語

紙の上に、三つの灯り

和紙の温もりを基調に、語節単位の改行と統一された字形で、日本語の組版を最初から考慮した設計です。

npx shadcn@latest add https://washiveil.alexchih.com/r/theme.json

Prose: the ink layer

Article typography with a stance: ruri marks the interactive, korozen marks editorial intent.

← Writing Security · 2026-05-18 · 12 min read

Ink on Washi

H2 Section heading

H3 Subsection heading

A paragraph shows bold emphasis, italic stress, an inline link, and terraform plan as inline code.

段落展示粗體強調、Latin italic、行內連結與行內 terraform plan。

段落には太字の強調、斜体、インラインリンク、terraform plan のインラインコードが並びます。

「引用はここに——左側の黄櫨染は編集記号です。」
  • 無序清單 unordered
  • 巢狀 nested:
    • 第二層 second level
  1. 有序清單 ordered
  2. 番号付きリスト numbered
resource "aws_security_group_rule" "api" {
  cidr_blocks = ["10.0.0.0/8"]   # code block
}
表格欄位数字
row 分隔 hairline内容1,024
最後一列無線内容42

Image placeholder (rounded-xl)
figcaption — mono, centered, faint
npx shadcn@latest add https://washiveil.alexchih.com/r/prose.json

Install

Every component pulls the theme token layer automatically.

npx shadcn@latest add https://washiveil.alexchih.com/r/glass-card.json