CSS Framework · 和紙

Paper & sumi ink,
as a design system.

A warm, tactile component kit — washi-paper tones, vermilion seal red, jade and murasaki accents, monospace body type and Noto Serif JP display.

色 · Colour
--paper
--card
--paper-2
--paper-3
--ink
--accent
--jade
--murasaki
--gold
--muted
字 · Typography
Eyebrow label

Display heading 見出し

Section heading

Subsection heading

A lead paragraph sets the tone — slightly larger, softer ink, tighter leading.

Body copy is set in DM Mono for a precise, drafting-table feel. Inline code, a hyperlink, strong emphasis, and ⌘K keys all live here.

The space between things is where the design lives. — a maxim
  • Marker bullets carry the accent colour
  • Generous line-height for readability
  • Consistent vertical rhythm
:root {
  --ink:    #1a1714;
  --paper:  #f3ede1;
  --accent: #c0392b;
}
釦 · Buttons
部品 · Components

Cards

New

Vermilion

Cards lift on hover and carry an optional coloured top-stripe.

Jade

完

A header row pairs nicely with a hanko seal.

Murasaki

Soft warm shadows, hairline borders, paper surface.

tagtag

Badges, tags & stats

Default Accent Jade Violet Gold Solid
和Harmony
42Projects
3:08Avg time
98%Uptime

Alerts & status

Vermilion alertSomething needs attention.
SuccessThe operation completed cleanly.
NoteAn aside, set apart in murasaki.
Default status Invalid input Looking good! Solving…

Table

PieceAreaState
Rectangle A2 × 3Valid
Rectangle B1 × 4Valid
Rectangle C3 × 3Overlap

Overlay / modal

入力 · Forms
Looks valid.