右上のアイコンでライト / ダークを切り替えられます（OS 設定にも追従）。
本文テキスト。IBM Plex Sans JP の 400。これはリンクでホバーすると色が変わります。
補足テキスト（--text-sub）
無効・プレースホルダ相当（--text-muted）
区切りは「枠線」か「面」のどちらか一方。既定は余白だけで見せる。
card--bordered。構造的に独立した存在として見せたいとき。
card--tint。一覧の中で軽くまとまりを示したいとき（--surface-tint）。
card--raised。一覧中で軽く浮かせたいときのみ、薄い影を使う。
card--lg。ページ最上位の囲いなど。角丸は --radius-lg、padding は --space-lg。
表示名に使われます。
この項目は必須です。
新しいサンプルパックを公開しました。
保存しました。
アップロードに失敗しました。
インラインは var(--accent) のように表示します。
:root {
--accent: #c87ddb;
}Material Design の「型」を akizakura の方針（フラット・固定角丸・pill にしない・弱い影のみ）に翻訳したコンポーネント。位置取り（sticky / fixed）は *--sticky / *--fixed で opt-in。開閉やタイマー等の挙動は利用側 JS の責務。
先頭アクション → タイトル → 末尾アクション。区切りは下 1px のみ。実画面では app-bar--sticky で上端固定。
概要：余白と並びで構造を伝える、依存ゼロの軽量 UI フレームワークです。
仕様：1 枚の CSS。色・余白・角丸はすべてトークンで管理します。
レビュー：「線が少なくて読みやすい」と好評です。
タブをクリックすると現在タブ（accent の下線）と内容が切り替わります。切替の挙動はこのデモの JS。
badge の対話版。角丸は --radius（pill にしない）。選択は accent 塗り。
スイッチのトラックは pill にせず --radius の角丸矩形。セグメントは外周だけ角丸、選択は accent 塗り。
円形にはせず角丸方形（--radius-lg）。accent 塗り＋弱い影。実画面では fab--fixed で右下に浮かせる。
いずれも --bg + 枠線 + 弱い影の浮遊サーフェス。Dialog はネイティブ <dialog>、背面は --scrim。せり上げ・背面 scrim はこのデモの JS / CSS で付けている（フレームワーク本体は CSS のみ）。
既定の .input は outlined。--filled で面、.field--floating でラベルが枠上へ浮上（マークアップは「入力 → ラベル」の順、placeholder=" " 必須）。