cotozu

08 / Design Tokens

デザイントークン
Design Tokens

Figma の Variables / スタイルとして登録するための命名と値。グループ / 名前 形式で統一します。（ドラフト提案 — チームやプロジェクトに合わせて調整可）

01
Color

カラートークン

Token値用途
color/charcoal#333333Primary — ロゴ・本文
color/black#111111Mono / Print
color/white#FFFFFFReversed
color/gray-light#F5F5F5Surface / Background
color/gray-line#E5E2DA境界線・区切り（補助）
color/gray-muted#8C887F補助テキスト（補助）
◆
ブランドの原則はモノクロです。gray-line / gray-muted はUI上の補助色で、ロゴには使用しません。
02
Typography

タイポグラフィトークン

Font token値
font/latinAvenir / Avenir Next
font/latin-webMontserrat / Nunito Sans
font/jpZen Kaku Gothic New
font/jp-webNoto Sans JP
font/monoDM Mono
Type scaleSize / LineWeight
type/display40 / 1.15900
type/h132 / 1.2900
type/h224 / 1.3700
type/h318 / 1.4700
type/body15 / 1.8400
type/caption12 / 1.6400
◆
サイズは px 基準のドラフト。プロジェクトの基準（デスクトップ/モバイル）に合わせて段階を調整してください。
03
Spacing

スペーストークン

基準単位 4px。余白は「意図」として、この刻みに揃えます。

Token値
space/2xs4
space/xs8
space/sm12
space/md16
space/lg24
space/xl32
space/2xl48
space/3xl64
04
Radius & logo

角丸・ロゴトークン

Radius値
radius/sm4
radius/md7
radius/lg10
radius/avatar26
radius/full9999
Logo token値
logo/clearspace-min0.5 H
logo/clearspace-rec1 H
logo/min-horizontal120 px
logo/min-vertical96 px
logo/min-symbol16 px
◆
H はシンボルの高さ。クリアスペースはロゴサイズに対する相対値として扱います。詳細は余白・サイズを参照。
Back

Home へ戻る →

ガイドライン トップ。