Typography

Korean and general text uses Pretendard; Latin and numerals use Satoshi. letter-spacing is unified across both scripts at --tracking: -0.01em. Use .t-* utility classes instead of inline styles — tracking and color are applied automatically.

Type Scale

An 8-step scale with size, weight, and line-height locked to tokens. All headings use --c-ink-deep.

Social Solidarity Bank

.t-h164 / 800 / 1.15

Social Solidarity Bank

.t-h256 / 700 / 1.18

Design System

.t-h340 / 700 / 1.25

Tokens & Components

.t-h427 / 700 / 1.35

Body text is set at 18px with a line-height of 1.7 for comfortable long-form reading.

.t-body18 / 400 / 1.7

Emphasized body text uses weight 600.

.t-body-strong18 / 600 / 1.7

Captions, table cells, and helper text are 16px.

.t-caption16 / 400 / 1.6

Fonts

Only two typefaces are used. For numerals, IPs, and domains where a monospaced feel is needed, set letter-spacing to 0.

--ff · Pretendard

The quick brown fox

Korean & general body / heading

--ff-en · Satoshi

0123456789 AaBbCc

Latin & numeric emphasis

Usage Patterns

Real-world rules from design.md. Heading color is ink-deep; eyebrow is normal (400) primary.

Hero H1: 56 / 800 (mobile clamp(34px, 7.5vw, 56px) + keep-all)
Eyebrow (label above heading): 16 / 400 normal / primary — bold is not allowed
Section heading (h2): 27 / 800 / ink-deep
Card heading (h3): 21 / 800 / ink-deep
Body / lead: 18 / 400 / body · Caption / table cell: 16
Badge / chip: 13–15