タイポグラフィ · Tinyrack Design System

階層を選ぶ

読む順序を先に決め、その階層を表せる最小限のロールを選んでください。displayLg はブランドやキャンペーンを代表する強いメッセージだけに使い、それ以外の大きな導入見出しには display を使います。見出しロールは入れ子になったセクション、body と bodySm は本文、caption は補足、label は短い識別子に使います。

テキストロール

クラスターの状態と容量caption

ラック状態label

クラスターの状態と容量body

クラスターの状態と容量bodySm

rack.deploy()code

クラスターの状態と容量headingSm

クラスターの状態と容量headingMd

クラスターの状態と容量headingLg

クラスターの状態と容量display

クラスターの状態と容量displayLg

行長とローカライズ

段落は読み取りやすい幅に抑え、ラベルは内容に応じて伸縮できるようにしてください。日本語や韓国語は英語と異なる位置で改行されます。英語の文字列を基準に幅を固定したり、説明文を 1 行に強制したりしないでください。大文字の字間は短いラテン文字のラベルだけに使い、日本語の本文には適用しません。

適用例

ラック A

クラスターの状態

すべてのノードが応答しています。次のバックアップは 03:18 に始まります。

2 分前に更新

フォント読み込みの責任

Tinyrack のコア CSS は、body と heading トークンに "IBM Plex Sans"、mono トークンに "IBM Plex Mono" というファミリー名だけを宣言します。フォントファイルは提供も読み込みもしません。利用するアプリで、必要なウェイトと言語サブセットを読み込んでください。このドキュメントアプリでは、IBM Plex Sans と韓国語・日本語用のファミリー、そして IBM Plex Mono を読み込んでいます。

code や TRCode、TRCodeBlock、TRFileTree を描画する場所では IBM Plex Mono を読み込んでください。mono トークンは汎用の monospace ファミリーにフォールバックするため、ウェブフォントが届く前でも等幅を保てます。

実装とリファレンス

@import "@tinyrack/ui/core.css";
.rack-title { font: var(--tinyrack-weight-heading) var(--tinyrack-text-2xl) / var(--tinyrack-leading-sm) var(--tinyrack-font-heading); }

ロール	サイズ	行高	ウェイト	字間
caption	`0.75rem`	`1.2`	`400`	`0`
label	`0.75rem`	`1`	`700`	`0.08em`
body	`1rem`	`1.5`	`400`	`0`
bodySm	`0.875rem`	`1.5`	`400`	`0`
code	`0.875rem`	`1.65`	`400`	`0`
headingSm	`1.125rem`	`1.2`	`650`	`0`
headingMd	`1.5rem`	`1.2`	`650`	`0`
headingLg	`1.875rem`	`1.2`	`650`	`0`
display	`2.75rem`	`1.2`	`650`	`0`
displayLg	`3.5rem`	`1`	`650`	`0`

Tailwind のタイポグラフィマッピングも確認してください。