TTokey
書き出し

現在はColorの全設定を保存します。

DTCG・Figma用出力は今後追加します。

前回の作業を読み込み中。端末間の同期は未対応です。

DESIGN TOKENS

Color

基準色と、UIで使う用途ごとの色を設定します。

ブランドカラー

この色を基準色として保持し、明暗スケールを生成します。

#

Primitive palette

基準色はbrand/baseに保持します。600は生成した明暗の1段階です。

カスタム
brand/base基準色#4F46E5
brand/50#F7F8FF
brand/100#EAEDFF
brand/200#CDD5FD
brand/300#AAB5FA
brand/400#8994F5
brand/500#6E76EF
brand/600#5654E8
brand/700#4439CC
brand/800#302898
brand/900#1E1867
brand/950#0F0B3F

Accent color

ブランドカラーとの関係から自動生成します。

#

Primitive palette

アクセントの基準色と生成した明暗スケールです。

補色
accent/base基準色#776600
accent/50#F9F8F5
accent/100#F0EFE7
accent/200#DCD8C5
accent/300#C2BB9A
accent/400#A99F70
accent/500#93874A
accent/600#7E6F1E
accent/700#675800
accent/800#4B3F00
accent/900#312900
accent/950#1B1600

Semantic color

すべての用途色をLight / DarkごとにPrimitiveへ接続します。

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Light

Dark

Semantic colorを削除しますか？

「」を削除します。セッション中は元に戻せます。

文字の読みやすさ

通常文字の目安は4.5:1です。警告があっても書き出せます。

  • 本文と背景・Light16.97:1 · 基準以上
  • 本文と背景・Dark19.06:1 · 基準以上
  • 補足と背景・Light4.62:1 · 基準以上
  • 補足と背景・Dark7.59:1 · 基準以上

現在はColorの編集に対応しています。Typography以降は順次追加します。

Colorを初期化しますか？

色と用途を初期セットへ戻します。この操作は元に戻せます。

プロジェクトを読み込みますか？

「」のColor設定で、現在の作業を置き換えます。必要な場合は現在のプロジェクトを先に書き出してください。