Design System — through the lens
ブランドカラー
ロゴ グラデーション
#F7F4EC 温白#E3B8D4 桃#A49AEC 藤
マーク（うさぎ）
ファビコン
角丸プレート＋ブランドグラデーションでうさぎさんを飾ったよ🐰✨
ローダー
ローディング時に見れるうさぎさん🐰✨見つけてみてね👼
ベクター
オープニングアニメーションで使ってるよ🐰✨
TOTEKAWA
イントロの組み方（実寸比）🐰うさぎさんは .intro__title の子で、大きさは 2.7em＝ワードマークの font-size 基準
不透明度 12%、比率は一定（描画高 ＝ 画面幅の35.5%）
カラートークン
--bg
背景（墨色）
#14161A
oklch(0.200 0.009 266)
--surface
サーフェス（カード）
#1C1F26
oklch(0.239 0.014 266)
--line
罫線 / 枠
#2A2D34
oklch(0.297 0.013 266)
--text
文字（主）
#F0EDE4
oklch(0.946 0.012 92)
--text-mute
ヘッダーのナビ
#C3C7CE
oklch(0.829 0.011 262)
--text-faint
月ナビのリンク
#AEB2BA
oklch(0.763 0.012 265)
--text-sub
文字（従）
#9FA3AA
oklch(0.714 0.011 266)
--text-dim
小見出し・注記（等幅と併用）
#91959E
oklch(0.669 0.015 266)
--accent
アクセント
#D85A31
oklch(0.623 0.168 38)
--band-bg
Tools・Aboutの帯
#1A1D25
oklch(0.231 0.016 266)
--band-line
帯の罫線
#2B303C
oklch(0.309 0.023 266)
--panel
.band--flat の地・追従サムネ
#0F1014
oklch(0.174 0.008 266)
--shade
写真を落とす黒（αで使う）
#0A0B0E
oklch(0.150 0.007 266)
--backdrop
ライトボックス背景
#08090B
oklch(0.139 0.005 266)
--white
純白（アクティブなタグの文字）
#FFFFFF
oklch(1 0 0)
値の正はすべて style.css の @layer tokens
hex は oklch から変換した参考値
アクセント・グロー（About背景の光）
--glow-purple
紫の光
#7E5CCD
oklch(0.565 0.168 294)
--glow-blue
青の光
#4876D6
oklch(0.582 0.156 263)
--glow-pink
桃の光
#D85A7A
oklch(0.636 0.160 7)
タイポグラフィ
ロゴ ワードマーク · letter-spacing 0.18em · グラデclip
TOTEKAWA
見出し H1 · weight 500 · letter-spacing 0.22em
Through the Lens
見出し H2 · weight 500 · letter-spacing 0.12em
Works / About / Contact
本文 · 16px · line-height 1.7
ゲーム世界のかわいいポートレートをお届けする、バーチャルフォトのポートフォリオ👼🪄
補助テキスト · 14px · --text-sub
in-game photography — 鳴潮 / Arknights: Endfield
等幅 · DM Mono · 数値 / トークン名 / メタ情報
745 PHOTOS · ALL IN 4K · oklch(0.623 0.168 38)
--font-sans
"Satoshi", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", system-ui, sans-serif
--font-mono
"DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
書体クレジット
コラージュメーカーの書体セレクトが9書体まで増えたので、使わせていただいているフォントの作者・配布元・ライセンスをここに一覧化🐰✨ 敬意を込めて。
サイト全体
TOTEKAWA
Satoshi
サイト全体のワードマーク・見出し・本文（--font-sans）自前配置
2026.08
DM Mono
数値・トークン名・メタ情報（--font-mono）自前配置
コラージュメーカー — 書体セレクト
光と、影と、記憶と。
Noto Serif JP
書体セレクト「明朝（静か・上品）」のタイトル・見出しCDN
光と、影と、記憶と。
Noto Sans JP
書体セレクト「ゴシック」のタイトル、および他8書体の日本語サブテキストで共通使用CDN
Through the Lens
Dancing Script
書体セレクト「筆記体・Dancing Script（読みやすい・英字のみ）」自前配置
Through the Lens
Alex Brush
書体セレクト「筆記体・Alex Brush（ブラシ・英字のみ）」自前配置
Through the Lens
Sacramento
書体セレクト「筆記体・Sacramento（華奢・英字のみ）」自前配置
Through the Lens
Great Vibes
書体セレクト「筆記体・Great Vibes（クラシック・英字のみ）」自前配置
Through the Lens
Allura
書体セレクト「筆記体・Allura（流れるような・英字のみ）」自前配置
光と、影と、記憶と。
ひとりゴシック HitoriGothic
書体セレクト「手書き風・ひとりゴシック（やわらか・日本語対応）」自前配置
光と、影と、記憶と。
よもぎフォント Yomogi
書体セレクト「手書き風・Yomogi（繊細・日本語対応）」自前配置