デザインガイドライン

Phrasekeep Notes の実装で共有するトークンとコンポーネントの参照です。

原則

読みやすさ、状態の分かりやすさ、継続して使える落ち着いた表現を大切にします。

サーフェストークン

ライト

appBg

#FAFAF5

appBg とのコントラスト比: 1.00:1

panel

#F1F1EA

appBg とのコントラスト比: 1.08:1

surface

#FFFFFF

appBg とのコントラスト比: 1.05:1

surfaceHover

#E9E9E0

appBg とのコントラスト比: 1.17:1

surfaceSelected

#DEDED2

appBg とのコントラスト比: 1.30:1

border

#DCDCD2

appBg とのコントラスト比: 1.32:1

borderStrong

#7E7E63

appBg とのコントラスト比: 3.97:1

textPrimary

#272822

appBg とのコントラスト比: 14.20:1

textSecondary

#4A4B44

appBg とのコントラスト比: 8.42:1

textMuted

#666252

appBg とのコントラスト比: 5.84:1

textDisabled

#8A8676

appBg とのコントラスト比: 3.49:1

accent

#C3054A

appBg とのコントラスト比: 5.83:1

accentText

#C3054A

appBg とのコントラスト比: 5.83:1

accentSoft

#FADCE3

appBg とのコントラスト比: 1.22:1

onSolid

#FFFFFF

appBg とのコントラスト比: 1.05:1

link

#0D6B7D

appBg とのコントラスト比: 5.87:1

linkSoft

#E5F5F4

appBg とのコントラスト比: 1.07:1

success

#4C6B0F

appBg とのコントラスト比: 5.87:1

successSoft

#EEF7D9

appBg とのコントラスト比: 1.06:1

warning

#945101

appBg とのコントラスト比: 5.84:1

warningSoft

#FAECD7

appBg とのコントラスト比: 1.11:1

highlight

#6B6313

appBg とのコントラスト比: 5.87:1

highlightSoft

#F7F6E3

appBg とのコントラスト比: 1.04:1

ダーク

appBg

#272822

appBg とのコントラスト比: 1.00:1

panel

#1E1F1C

appBg とのコントラスト比: 1.11:1

surface

#34352F

appBg とのコントラスト比: 1.20:1

surfaceHover

#3E3D32

appBg とのコントラスト比: 1.36:1

surfaceSelected

#49483E

appBg とのコントラスト比: 1.61:1

border

#414339

appBg とのコントラスト比: 1.48:1

borderStrong

#6F7263

appBg とのコントラスト比: 3.02:1

textPrimary

#F8F8F2

appBg とのコントラスト比: 13.94:1

textSecondary

#CFD0C8

appBg とのコントラスト比: 9.56:1

textMuted

#9C9D95

appBg とのコントラスト比: 5.43:1

textDisabled

#75715E

appBg とのコントラスト比: 3.03:1

accent

#F92672

appBg とのコントラスト比: 3.93:1

accentText

#FF698E

appBg とのコントラスト比: 5.42:1

accentSoft

#4D2830

appBg とのコントラスト比: 1.18:1

onSolid

#141510

appBg とのコントラスト比: 1.23:1

link

#66D9EF

appBg とのコントラスト比: 9.01:1

linkSoft

#324847

appBg とのコントラスト比: 1.52:1

success

#A6E22E

appBg とのコントラスト比: 9.58:1

successSoft

#3E4924

appBg とのコントラスト比: 1.55:1

warning

#FD971F

appBg とのコントラスト比: 6.81:1

warningSoft

#4E3C21

appBg とのコントラスト比: 1.41:1

highlight

#E6DB74

appBg とのコントラスト比: 10.44:1

highlightSoft

#494831

appBg とのコントラスト比: 1.60:1

タイポグラフィ

sans

学習ノート Aa 09:00

mono
学習ノート Aa 09:00

ui.body: 14px / 20px

ui.muted: 12px / 16px

ui.heading: 20px / 28px

ui.title: 16px / 24px

ui.display: 24px / 32px

tree.row: 14px / 20px

editor.body: 14px / 22.4px

note.title: 30px / 48px

意味色

ライト

accent

link

success

warning

highlight

ダーク

accent

link

success

warning

highlight

状態色

ドロップ先のツリー行

選択リスト行（暗いテーマでも textMuted を使わず textPrimary を使う）

ドロップ先: getPhrasekeepTreeRowColorScheme / 選択行: dashboard-ui の CompactSelectList（surfaceSelected）

ノート操作バー

デスクトップ（40px）

タッチ優先（48px）

本文編集ボタンの状態

編集していないとき

編集中

アイコン

意味	アイコン
追加（追加対象が 1 種類だけの場合）	`FiPlus`
新規ノート	`FiFilePlus`
新規フォルダー	`FiFolderPlus`
ノート	`FiFileText`
フォルダー	`FiFolder`
デッキ	`FiLayers`
クリップ	`FiFilm`
tag 見出し	`FiHash`
開閉（inline section）	`FiChevronRight`
開閉（inline section）	`FiChevronDown`
overlay を閉じる	`FiX`
戻る	`FiChevronLeft`
学習を開始	`FiPlay`
もう一度再生	`FiRotateCcw`
review	`FiRepeat`
listening	`FiHeadphones`
編集	`FiEdit2`
編集完了	`FiCheck`
削除	`FiTrash2`
study / listening から外す（tag を外す）	`FiMinusCircle`
clip を学習対象から外す	`FiSlash`
more	`HiOutlineDotsVertical`
設定	`FiSettings`
分割表示	`FiColumns`
export / import	`FiDownload`
export / import	`FiUpload`
外部ページを開く	`FiExternalLink`
sync now（操作）	`FiRefreshCw`
同期中・再試行中（状態）	`FiRefreshCw`
待機中（状態）	`FiClock`
同期済み・offline・warning・error（状態）	`FiCheckCircle`
同期済み・offline・warning・error（状態）	`FiCloudOff`
同期済み・offline・warning・error（状態）	`FiAlertCircle`

メディア操作は @mine/youtube-clip-controls-react の再生・一時停止アイコンをそのまま使うため、この表には載せない。

場所	大きさ	見本
phone header、note top bar	20px	`20px`
rail	20px	`20px`
phone tab bar、phone FAB	24px	`24px`
menu row、Settings row、popover、bottom sheet、review / listening session の header と footer、review start tile、heatmap toggle	16px	`16px`
tree row（icon column）	1em（12px）	`1em（12px）`
tree row の icon button	desktop 12px phone 16px	`desktop 12pxphone 16px`
search result row	1em（14px）	`1em（14px）`
listening player controls	16px	`16px`

サイズと密度

Phone

treeRowHeight44px

ツリー行

searchRowHeight56px

検索結果行

rowIconButtonClassNameh-11 w-11 min-w-11

iconButtonClassNameh-11 w-11 min-w-11

controlHeightClassNamemin-h-11

Desktop

treeRowHeight24px

ツリー行

searchRowHeight32px

検索結果行

rowIconButtonClassNameh-4 w-4 min-w-4

iconButtonClassNameh-8 w-8 min-w-8

controlHeightClassNamemin-h-8

理解度レベル

default

warning

primary

success

復習セッションの採点ボタンと同じ flat variant と理解度レベルの色を使っています。

継続学習ヒートマップ

塗りと文字色を 1 本の opacity ランプにまとめず dark: バリアントで分けているのは、明暗どちらのテーマでも同じランプでは文字が読めなくなる帯が別々のアルファ値に来るため。上段が現在のテーマ、下段は dark: バリアントを強制した見本。

エディタテーマ

エディタのテーマはアプリのテーマに従います。ダークテーマでは editor-monokai.css を通じてコードブロックが surface と textPrimary に解決され、ライトテーマでは markdown-editor の既定値を使います。

// keeps the streak
const nextInterval = getStudyReviewInterval(4, 3);
const label: StudyReviewLevelColor = "success";

選択範囲

選択されたテキスト

コントロール

有効

ノート名

Phrasekeep Notes design guide: packages/phrasekeep/docs/guides/design-language.md