BlueAI Typography
可読性と階層を生むタイポグラフィシステム。Lato + Noto Sans JP をベースに、一貫したスケールで情報を整理する。
フォントファミリー
Lato
UI 全般のプライマリフォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%
Noto Sans JP
日本語 font-weight: 900 専用
あいうえおかきくけこ
請求書 勤怠管理 会計
マルナゲ デザインシステム
見出しスケール
XXLBlueAI Design System
XLBlueAI Design System
LBlueAI Design System
MBlueAI Design System
SBlueAI Design System
XSBlueAI Design System
XXSBlueAI Design System
| Level | Tag | Size | Line Height | Weight |
|---|---|---|---|---|
| XXL | <h1> | 32px (2rem) | 2.25rem | 900 |
| XL | <h1> | 28px (1.75rem) | 2rem | 900 |
| L | <h2> | 24px (1.5rem) | 1.75rem | 700 |
| M | <h3> | 20px (1.25rem) | 1.5rem | 700 |
| S | <h4> | 16px (1rem) | 1.25rem | 700 |
| XS | <h5> | 14px (0.875rem) | 1.25rem | 700 |
| XXS | <h6> | 12px (0.75rem) | 1rem | 700 |
本文テキスト
Largeすべてのユーザーにとって快適なプロダクト体験を提供するために、一貫したタイポグラフィを使用します。
16px / 1.5rem — 読み物コンテンツ、LP本文
Medium (Default)すべてのユーザーにとって快適なプロダクト体験を提供するために、一貫したタイポグラフィを使用します。
14px / 1.25rem — UI全般、フォームラベル、テーブル
Smallすべてのユーザーにとって快適なプロダクト体験を提供するために、一貫したタイポグラフィを使用します。
12px / 1rem — 補足情報、キャプション、タイムスタンプ
| Level | Size | Line Height | Tailwind | 用途 |
|---|---|---|---|---|
| Large | 16px (1rem) | 1.5rem | text-[16px] leading-[24px] | 読み物コンテンツ、LP本文 |
| Medium (Default) | 14px (0.875rem) | 1.25rem | text-[14px] leading-[20px] | UI全般、フォームラベル、テーブル |
| Small | 12px (0.75rem) | 1rem | text-[12px] leading-[16px] | 補足情報、キャプション、タイムスタンプ |
フォントウェイト
400Regular — The quick brown fox
500Medium — The quick brown fox
700Bold — The quick brown fox
900Black — The quick brown fox
| 名前 | 値 | Tailwind | 用途 |
|---|---|---|---|
| Regular | 400 | font-normal | 本文テキスト、説明文 |
| Medium | 500 | font-medium | ラベル、ナビゲーション項目 |
| Bold | 700 | font-bold | 見出し、強調テキスト |
| Black | 900 | font-black | ページタイトル、ブランド表現 |
テキストカラー
メインテキスト
text-text-primary
見出し、本文
補足テキスト
text-text-secondary
補足情報、ラベル
薄いテキスト
text-text-tertiary
プレースホルダー、ヒント
ガイドライン
Do
- ページに h1 は 1 つだけ使う
- 見出しレベルは順序通りに使う（h1 → h2 → h3）
- 本文は 14px (Medium) をデフォルトにする
- 日本語の太字見出しは自動で Noto Sans JP が適用される
Don't
- 見出しレベルをスキップしない（h1 → h3）
- スタイルのために間違った見出しタグを使わない
- 本文で Bold を多用しない（読みにくくなる）
- 定義されたスケール外のフォントサイズを使わない