← Phrasekeep に戻る

デザインガイドライン

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

原則

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

サーフェストークン

ライト

appBg

#FAFAF5

1.00:1

panel

#F1F1EA

1.08:1

surface

#FFFFFF

1.05:1

surfaceHover

#E9E9E0

1.17:1

surfaceSelected

#DEDED2

1.30:1

border

#DCDCD2

1.32:1

borderStrong

#7E7E63

3.97:1

textPrimary

#272822

14.20:1

textSecondary

#4A4B44

8.42:1

textMuted

#666252

5.84:1

textDisabled

#8A8676

3.49:1

accent

#C3054A

5.83:1

accentText

#C3054A

5.83:1

accentSoft

#FADCE3

1.22:1

onSolid

#FFFFFF

1.05:1

link

#0D6B7D

5.87:1

linkSoft

#E5F5F4

1.07:1

success

#4C6B0F

5.87:1

successSoft

#EEF7D9

1.06:1

warning

#945101

5.84:1

warningSoft

#FAECD7

1.11:1

highlight

#6B6313

5.87:1

highlightSoft

#F7F6E3

1.04:1

ダーク

appBg

#272822

1.00:1

panel

#1E1F1C

1.11:1

surface

#34352F

1.20:1

surfaceHover

#3E3D32

1.36:1

surfaceSelected

#49483E

1.61:1

border

#414339

1.48:1

borderStrong

#6F7263

3.02:1

textPrimary

#F8F8F2

13.94:1

textSecondary

#CFD0C8

9.56:1

textMuted

#9C9D95

5.43:1

textDisabled

#75715E

3.03:1

accent

#F92672

3.93:1

accentText

#FF698E

5.42:1

accentSoft

#4D2830

1.18:1

onSolid

#141510

1.23:1

link

#66D9EF

9.01:1

linkSoft

#324847

1.52:1

success

#A6E22E

9.58:1

successSoft

#3E4924

1.55:1

warning

#FD971F

6.81:1

warningSoft

#4E3C21

1.41:1

highlight

#E6DB74

10.44:1

highlightSoft

#494831

1.60:1

タイポグラフィ

sans

学習ノート Aa 09:00

mono

学習ノート Aa 09:00

ui.body: 14

ui.muted: 12

ui.heading: 20

tree.row: 14

editor.body: 16

editor.code: 14

lineHeight.body: 1.5

lineHeight.heading: 1.25

状態色

accent
success
warning
highlight

理解度レベル

1

default

2

warning

3

primary

4

success

エディタテーマ

const review = note.level;

コントロール