タイポグラフィ

Large Title（64px）からCaption 2（11px）まで、13種類の文字スタイルを提供します。それぞれ4種類の太さを持ち、Interを使い、Figmaのテキストスタイルと1対1で対応しています。

システムがどのように機能するか

すべてのスタイルは、 複合トークン: 以下のような1つのクラス text-body-medium で定義される壷のサイズ、ライン高さ、手紙の間隔および重量を一緒に置きます styles/typography.css. 決して結合しません text-sm と、 font-medium そして、 leading-5 手で - 単一のトークンは、Figmaのテキストスタイルを指定する正確なメトリックを保証します。

ネーミングは text-{family}-{weight} - 13家族×4重量(通常400、中500、セミボルト600、ボルド700)。 色は、意味のあるテキストトークンと別々に適用されるので、一般的なラベルは読みます text-body-medium text-text-secondary: メトリックの1クラス、色は1クラス。

これらのクラスが住んでいたので text-* namespace は、登録済みです。 cx() (私たちのtailwind-merge wrapper) フォントサイズのユーティリティとして - それ以外の場合は、色のクラスとマージすることは、静かにそれらをドロップします。 あなたはスタイルを追加または名前を変更した場合、それをミラーリングします utils/cx.ts.

タイトル

64px / 80px

Hero numerals and marketing-scale headings.

The five boxing wizards jump quickly.

text-large-title-regularRegular · 400

The five boxing wizards jump quickly.

text-large-title-mediumMedium · 500

The five boxing wizards jump quickly.

text-large-title-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-large-title-boldBold · 700

ディスプレイ 1

56px / 72px

Full-page hero headings.

The five boxing wizards jump quickly.

text-display-1-regularRegular · 400

The five boxing wizards jump quickly.

text-display-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-1-boldBold · 700

ディスプレイ2

48px / 64px

Large section heroes.

The five boxing wizards jump quickly.

text-display-2-regularRegular · 400

The five boxing wizards jump quickly.

text-display-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-2-boldBold · 700

ディスプレイ 3

40px / 54px

Prominent stats and page heroes.

The five boxing wizards jump quickly.

text-display-3-regularRegular · 400

The five boxing wizards jump quickly.

text-display-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-3-boldBold · 700

ディスプレイ 4

32px / 44px

Page titles; the largest style used inside the app shell.

The five boxing wizards jump quickly.

text-display-4-regularRegular · 400

The five boxing wizards jump quickly.

text-display-4-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-4-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-4-boldBold · 700

タイトル 1

24px / 34px

Card headline figures (step totals, earnings).

The five boxing wizards jump quickly.

text-title-1-regularRegular · 400

The five boxing wizards jump quickly.

text-title-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-1-boldBold · 700

タイトル2

20px / 26px

Section headings inside pages and panels.

The five boxing wizards jump quickly.

text-title-2-regularRegular · 400

The five boxing wizards jump quickly.

text-title-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-2-boldBold · 700

タイトル 3

18px / 24–26px

Sub-section headings, calendar month titles.

The five boxing wizards jump quickly.

text-title-3-regularRegular · 400

The five boxing wizards jump quickly.

text-title-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-3-boldBold · 700

見出し

16px / 22px

Emphasized body copy and lead paragraphs.

The five boxing wizards jump quickly.

text-headline-regularRegular · 400

The five boxing wizards jump quickly.

text-headline-mediumMedium · 500

The five boxing wizards jump quickly.

text-headline-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-headline-boldBold · 700

ボディ

14px / 20px

The default UI text: labels, table cells, nav items.

The five boxing wizards jump quickly.

text-body-regularRegular · 400

The five boxing wizards jump quickly.

text-body-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-boldBold · 700

ボディ2

13px / 18px

Dense contexts: compact tables, secondary descriptions.

The five boxing wizards jump quickly.

text-body-2-regularRegular · 400

The five boxing wizards jump quickly.

text-body-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-2-boldBold · 700

キャプション 1

12px / 16px · tracking 0.15px

Axis labels, unit suffixes, timestamps.

The five boxing wizards jump quickly.

text-caption-1-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-1-boldBold · 700

キャプション2

11px / 15px · tracking 0.2px

The smallest legible annotations (badges, fine print).

The five boxing wizards jump quickly.

text-caption-2-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-2-boldBold · 700