Tokens · Typography
Typography
3 つのフォントファミリーと 11 段階のスケール。Mincho はブランド演出専用 ── ホーム画面の漢字や、色のストーリーの見出しに限定して使います。
Font families
Sans
本文・見出し・UIThe quick brown fox — 群青 becoming blue.
Inter (next/font/google)Mincho
ブランドの見出し・漢字群青 — Becoming blue.
var(--font-mincho) — Shippori MinchoMono
コード・データ・識別子import { Button } from "@gunjo/ui";
ui-monospace, SFMono-Regular, Menlo, ConsolasScale
text-xs12pxBecoming blue
text-sm14pxBecoming blue
text-base16pxBecoming blue
text-lg18pxBecoming blue
text-xl20pxBecoming blue
text-2xl24pxBecoming blue
text-3xl30pxBecoming blue
text-4xl36pxBecoming blue
text-5xl48pxBecoming blue
text-6xl60pxBecoming blue
text-7xl72pxBecoming blue
Weights
群青 Aa
font-normal400群青 Aa
font-medium500群青 Aa
font-semibold600群青 Aa
font-bold700群青 Aa
font-extrabold800密度のルール
- 本文のデフォルト： UI コントロールは text-sm (14px)、長文プロースは text-base (16px)。
- コントロールの高さ： ボタン・入力・セレクトはすべて 36px (h-9)。ダッシュボード向けにコンパクトでありながらタップしやすいバランス。
- 見出しの階層： H1 は text-4xl/lg:text-5xl、H2 は text-2xl、H3 は text-xl、H4 は text-lg。