Design SystemFoundationsTypography

Typography

Installation

import { H1, H2, H3, BigText, Text, MediumText, SmallText } from "@olab/components";

Headers

H1 / H2 / H3

H1 — text-h1 (1.5rem / 2rem)

The quick brown fox jumps

H2 — text-h2 (1.25rem / 1.75rem)

The quick brown fox jumps

H3 — text-h3 (1rem / 1.25rem)

The quick brown fox jumps

Body Text

BigText (deprecated) / Text / MediumText / SmallText

BigText — text-bodyXl (1.25rem / 1.5rem) — @deprecated

The quick brown fox jumps over the lazy dog.

Text — text-bodyL (1rem / 1.25rem)

The quick brown fox jumps over the lazy dog.

MediumText — text-bodyM (0.875rem / 1.25rem)

The quick brown fox jumps over the lazy dog.

SmallText — text-bodyS (0.75rem / 1rem)

The quick brown fox jumps over the lazy dog.

Token Reference

ETHAN STYLE.CSS DEFINITIONS

Tokenfont-sizeline-heightletter-spacing
text-h11.5rem2rem—
text-h21.25rem1.75rem—
text-h31rem1.25rem0.01em
text-bodyXl1.25rem1.5rem0.01em
text-bodyL1rem1.25rem0.01em
text-bodyM0.875rem1.25rem0.02em
text-bodyS0.75rem1rem0.02em

Implementation Usage

Component implementation 真實使用次數（排除 stories）。

Token次數
text-bodyM32
font-medium10
text-bodyS5
text-bodyL4
text-bodyXl1
text-h11
text-h21
text-h31

Implementation Notes

Observation only — no migration planned

本區僅記錄 audit 觀察，不對應任何 active rule 或重構計畫。

OBSERVATION

  • Scale 完整且收斂 — text-bodyM 是真正 default（32×）。
  • Display tier（h1 / h2 / h3 / bodyXl）使用稀疏（各 1×），符合 display 性質。
  • Weight 只用 font-medium（10×）與隱含 normal/bold；無 entropy。
  • BigText 已標 deprecated，但元件還在匯出。

GAP — NUMERIC TIER MISSING

Live DS 無 numeric font tier（如 tabular-nums 或 mono number weight）。implementation 只 1 處 font-mono。 Trading UI 場景下這個層級通常會出現，但 Live 線上實作未引入。

FUTURE DIRECTION (NOT PLANNED)

Typography 層 entropy 低，無治理需求。numeric tier 是真正缺口，但屬於擴充不是修補。 現階段不執行。