デザインシステム・カタログ

基礎

色、書体、ブランドマーク。すべてのページを形づくるトークンを、実物のまま並べました。

色

インク、紙、スパーク

--paper
すべてのページが載る地。
ライト #f8f7f2 · ダーク #15171c
--ink
文字と罫線。
ライト #15171c · ダーク #f8f7f2
--spark
ただひとつの合図。塗りに使い、本文には使いません。
ライト #e1402f · ダーク #e1402f

使っている場所

すべてのページ

ライトとダークで入れ替わる2つの無彩色と、どちらでも変わらない赤がひとつ。赤は塗りと罫線に使い、赤い文字には --spark-ink を使います。

色のトークン

var(--paper)

…

var(--paper-2)

…

var(--paper-3)

…

var(--ink)

…

var(--ink-2)

…

var(--muted)

…

var(--line)

…

var(--line-2)

…

var(--line-strong)

…

var(--line-control)

…

var(--spark)

…

var(--spark-ink)

…

使っている場所

すべてのページ

サイトのすべての色には名前がついています。値と紙に対するコントラスト比は、読み込まれているスタイルシートから読み取るので、ライト/ダークの切り替えに合わせて変わります。文字には ink、ink-2、muted、spark-ink を使い、罫線と spark は形のために使います。

書体

書体の役割

Context changes the answer.

Intent First reads language as intent, context and constraints, not as menu paths.

Design system

Design system · 0123456789

日本語（lang=ja）

状況が変われば、答えも変わる。

Intent First は、言葉をメニュー操作に当てはめず、意図・文脈・制約として読み取ります。

デザインシステム

デザインシステム · 0123456789

使っている場所

すべてのページ

文字が指定するのは書体ではなく、見出し・本文・ラベル・人の言葉・データという役割です。スイッチを切り替えると、サンプルの見出しの書体がすべて入れ替わります。日本語には専用の書体があります。

役割×サイズ

サイズ	display	body	label	voice	data
text-caption13px	意図	意図	意図	意図	意図
text-meta14px	意図	意図	意図	意図	意図
text-body17px	意図	意図	意図	意図	意図
text-lead21px	意図	意図	意図	意図	意図
text-h426px	意図	意図	意図	意図	意図
text-h333px	意図	意図	意図	意図	意図
text-h241px	Aあ	Aあ	Aあ	Aあ	Aあ
text-h152px	Aあ	Aあ	Aあ	Aあ	Aあ
text-display52–65px	Aあ	Aあ	Aあ	Aあ	Aあ
text-hero41–96px	Aあ	Aあ	Aあ	Aあ	Aあ