# すりガラスのカード — Style Reference
> 生成りの紙の上で、色の光が流れる。カードの中だけが曇りガラス越しに見える。
**Theme:** light **Series:** PARTS 100 **World:** ノートアプリの固定メモ。
## Concept
背景は手続き生成の色の塊(珊瑚・空色・砂・若草)と、大きな欧文と細い罫。カードはその上に置いたすりガラスで、後ろの色は滲み、罫は柔らかい帯になり、大きな文字は影のように残る。ガラスの上には細かい粒があり、光の当たる側の縁だけ白く立つ。光源はカーソルで、動かすと縁の光と内側の照り返しが向きを変える。
## Signature Technique
- ガラス: `background: rgba(255,255,255,.42); backdrop-filter: blur(22px) saturate(1.5)`。`@supports not` で非対応時は白 92%。
- 粒: `::before` に SVG の `feTurbulence`(fractalNoise、baseFrequency 0.9、2 オクターブ)を data URI の背景画像(160px タイル)として敷き、`mix-blend-mode: multiply; opacity: .5`。
- 縁の光: `::after` を `padding: 1px` の枠にし、`linear-gradient(var(--ang), 白 95% → 25% → 8% → 55%)` を `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude` で 1px の輪だけ残す。`--ang` は光源の方向から求める(`atan2(0.5-ly, 0.5-lx) + 90°`)。
- 照り返し: `.sheen` に `radial-gradient(closest-side at var(--lx) var(--ly), 白 55% → 0 70%)`、カードより 40% はみ出した大きさで置く。
- 光源: ポインタのカード内相対位置 `(lx, ly)` を 0.08 の線形補間で追従。4 秒操作が無いと半径 0.35 の円をゆっくり回る。
- 背景(2D canvas、DPR 上限 1.5): 4 つの縁の硬い色の円(グラデーション停止 0.86)が `sin/cos(t*0.07〜0.11)` で漂う。カードの真後ろ(左右 28px 内側、高さ 18%〜82%)にだけ 9 本の 1px 罫を毎フレーム描き、カードの外には何もはみ出させない。地は #F7F5F2。罫がガラスの下で帯に滲み、外の欧文はくっきり残るので、ぼけが読める。
- `prefers-reduced-motion`: 背景を t=2 で 1 回描画し、光は固定。
## Color Palette
| Token | HEX | Role |
|---|---|---|
| --cream | #F7F5F2 | 地 |
| --ink | #1E1919 | 文字、背景の大きな欧文(20%) |
| --mute | #716B61 | 注釈、ラベル |
| --red | #DD4C4F | ラベルの点 1 つ |
| --line | rgba(30,25,25,.14) | 罫線 |
| coral | #F2A7A0 | 背景の色 1 |
| sky | #9DB9F5 | 背景の色 2 |
| sand | #F3D58A | 背景の色 3 |
| mint | #BFE3CF | 背景の色 4 |
## Typography
- カード見出し: Zen Kaku Gothic New 700、`clamp(24px,2.4vw,32px)`、行間 1.3。本文 400、14〜16px。
- 背景の欧文: Inter 800、`clamp(120px,24vw,360px)`、字間 -.05em、不透明度 20%。
- ラベル・計測: JetBrains Mono 11〜12px、字間 .04〜.14em。
## Spacing & Layout
- 全画面 1 区画。カードは中央、幅 `min(92vw, 520px)`、内側 `34px 36px 30px`、角丸 22px(スマホ 18px)。
- カードの下に説明 2 行。下に罫線。左に光の位置で右にタグ。
## Motion
- rAF 1 本。背景の漂いは周期 60〜90 秒、光の追従は 0.08。
- 操作が無いと光が 25 秒で 1 周。
- reduced-motion では静止。
## Components
- card: ラベル(赤い点 + 今日のメモ)+ h1 + 本文 + 罫線 + 計測(blur / grain / rim)。
- behind: 大きな欧文「ARCHIVE」と罫 2 本(ぼけの対照用)。
- footer: 左に light の位置、右に `VALE / PARTS 100 / すりガラスのカード` と説明 1 行。
## Do / Don't
Do
- ガラスの後ろに、輪郭のはっきりしたものを必ず置く。ぼけは対照で見える。
- 粒は 50% 以下。文字の可読性を落とさない。
- 縁の光は 1px。太くしない。
Don't
- 白を濃くしすぎない(42% まで)。濃いと紙のカードに戻る。
- 影を強くしない。ガラスは薄い。
- 色の塊を増やさない。4 つまで。
## Usage
1. `.card` と `.card::before`(粒)、`.card::after`(縁の光)、`.card .sheen`(照り返し)の CSS をコピーする。`@supports not` の行も一緒に。
2. HTML はカードの先頭に `` を置き、中身は `position: relative` にする(`.card > *` の指定)。
3. 光を動かすなら `