Typography

Inter for all UI and body copy. Sora for display and marketing. JetBrains Mono for code blocks. All sizes, weights, and line heights are tokenised.

Font Families

TokenStackUse
--font-primary'Inter', system-ui, sans-serifAll UI, body, labels, buttons
--font-display'Sora', 'Inter', system-ui, sans-serifMarketing, hero headings
--font-mono'JetBrains Mono', 'Courier New', monospaceCode blocks, token display

Font Sizes

All size tokens map directly to a pixel value. Use --fs-* in component CSS — never hardcode pixel values.

TokenValuePreview
--fs-1010pxThe quick brown fox
--fs-1212pxThe quick brown fox
--fs-1414pxThe quick brown fox
--fs-1616pxThe quick brown fox
--fs-2020pxThe quick brown fox
--fs-2424pxThe quick brown fox
--fs-3232pxThe quick brown fox
--fs-4040pxThe quick brown fox
--fs-4848pxThe quick brown fox
--fs-5656pxThe quick brown fox
--fs-6464pxThe quick brown fox

Type Scale — Desktop (1440px)

Heading 1The quick brown fox64px / 72px
Heading 2The quick brown fox56px / 64px
Heading 3The quick brown fox jumps48px / 56px
Heading 4The quick brown fox jumps over40px / 48px
Heading 5The quick brown fox jumps over the lazy dog32px / 40px
Heading 6The quick brown fox jumps over the lazy dog24px / 32px
Body 1The quick brown fox jumps over the lazy dog16px / 24px
Body 2The quick brown fox jumps over the lazy dog14px / 24px
Body 3The quick brown fox jumps over the lazy dog14px / 20px
Caption 1The quick brown fox jumps over the lazy dog12px / 16px
Caption 2The quick brown fox jumps over the lazy dog10px / 12px

Font Weights

TokenValueSample
--fw-extralight200DigiLawyer Design System
--fw-light300DigiLawyer Design System
--fw-regular400DigiLawyer Design System
--fw-medium500DigiLawyer Design System
--fw-semibold600DigiLawyer Design System
--fw-bold700DigiLawyer Design System
--fw-extrabold800DigiLawyer Design System
--fw-black900DigiLawyer Design System

Line Heights

TokenValue
--lh-1212px
--lh-1616px
--lh-2020px
--lh-2424px
--lh-3232px
--lh-4040px
--lh-4848px
--lh-5656px
--lh-6464px
--lh-7272px