Typography

타이포그래피 시스템의 전체 스케일과 스타일을 확인합니다.

Headings

h1~h6 헤딩 스케일

text-4xl / 36px / font-bold

text-3xl / 30px / font-bold

text-2xl / 24px / font-semibold

text-xl / 20px / font-semibold

text-lg / 18px / font-medium

text-base / 16px / font-medium

본문 텍스트 크기 비교

text-lg (18px)

디자인 시스템은 일관된 사용자 경험을 제공하기 위한 재사용 가능한 컴포넌트와 패턴의 모음입니다. 체계적인 디자인 언어를 통해 팀 전체의 생산성을 높입니다.

text-base (16px)

text-sm (14px)

text-xs (12px)

폰트 굵기 비교

font-light (300) - 디자인 시스템 컴포넌트

font-normal (400) - 디자인 시스템 컴포넌트

font-medium (500) - 디자인 시스템 컴포넌트

font-semibold (600) - 디자인 시스템 컴포넌트

font-bold (700) - 디자인 시스템 컴포넌트

font-extrabold (800) - 디자인 시스템 컴포넌트

font-black (900) - 디자인 시스템 컴포넌트

Roboto Mono - 숫자 및 코드에 사용

1,234,567.89 - text-lg

1,234,567.89 - text-base

1,234,567.89 - text-sm

1,234,567.89 - text-xs

const greeting = "Hello, World!";

텍스트 색상 토큰

text-foreground - 기본 텍스트 색상

text-muted-foreground - 보조 텍스트 색상

text-primary - 주요 색상

text-destructive - 위험/오류 색상