Akizakura.css

Color

--accent
--accent-2
--accent-dark
--danger
--success
--surface-tint

Typography

見出し h1 / 2rem

見出し h2 / 1.5rem

見出し h3 / 1.2rem

本文テキスト。IBM Plex Sans JP の 400。これはリンクでホバーすると色が変わります。

補足テキスト(--text-sub)

無効・プレースホルダ相当(--text-muted)

Card

区切りは「枠線」か「面」のどちらか一方。既定は余白だけで見せる。

枠線カード

card--bordered。構造的に独立した存在として見せたいとき。

面カード

card--tint。一覧の中で軽くまとまりを示したいとき(--surface-tint)。

浮き上がりカード

card--raised。一覧中で軽く浮かせたいときのみ、薄い影を使う。

大きめサーフェス

card--lg。ページ最上位の囲いなど。角丸は --radius-lg、padding は --space-lg。

List

余白のみ(既定)

下線で区切る

Icon + Text

favorite テキストにアイコンを添える music_note --icon-size でアイコンだけ大きく

Form

表示名に使われます。

この項目は必須です。

通知設定
公開範囲

Button

Badge

Future Bass Kawaii House NEW FREE 公開中 非公開

Notice

info

新しいサンプルパックを公開しました。

check_circle

保存しました。

error

アップロードに失敗しました。

Code

インラインは var(--accent) のように表示します。

:root {
  --accent: #c87ddb;
}