Typography
The Chilli design system uses SF Pro Display for headings and Inter for body copy, buttons, and UI. Use named text styles (Headings / Body / Button) whenever possible — raw tokens are exposed below for custom compositions.
Font Families
SF Pro Display
Headings, display moments
Inter
Body, buttons, UI
Text Styles
Named styles from the Figma library. Use these as the first choice — they pin font family, size, line height, and weight together.
Headings — SF Pro Display
Headings/display/bold
SF Pro Display · 32/40 · 700
The quick brown fox jumps over the lazy dog
Headings/display/semibold
SF Pro Display · 32/40 · 600
The quick brown fox jumps over the lazy dog
Headings/large/Semibold
SF Pro Display · 24/32 · 600
The quick brown fox jumps over the lazy dog
Headings/large/Medium
SF Pro Display · 24/32 · 500
The quick brown fox jumps over the lazy dog
Headings/medium/semibold
SF Pro Display · 20/28 · 600
The quick brown fox jumps over the lazy dog
Headings/medium/medium
SF Pro Display · 20/28 · 500
The quick brown fox jumps over the lazy dog
Headings/small/semibold
SF Pro Display · 18/26 · 600
The quick brown fox jumps over the lazy dog
Headings/small/medium
SF Pro Display · 18/26 · 500
The quick brown fox jumps over the lazy dog
Headings/xsmall/Semibold
SF Pro Display · 16/20 · 600
The quick brown fox jumps over the lazy dog
Headings/xsmall/Medium
SF Pro Display · 16/20 · 500
The quick brown fox jumps over the lazy dog
Body — Inter
Body/P1/strong
Inter · 18/26 · 600
The quick brown fox jumps over the lazy dog
Body/P1/accent
Inter · 18/26 · 500
The quick brown fox jumps over the lazy dog
Body/P1/regular
Inter · 18/26 · 400
The quick brown fox jumps over the lazy dog
Body/P2/strong
Inter · 16/24 · 600
The quick brown fox jumps over the lazy dog
Body/P2/accent
Inter · 16/24 · 500
The quick brown fox jumps over the lazy dog
Body/P2/regular
Inter · 16/24 · 400
The quick brown fox jumps over the lazy dog
Body/P3/strong
Inter · 14/20 · 600
The quick brown fox jumps over the lazy dog
Body/P3/accent
Inter · 14/20 · 500
The quick brown fox jumps over the lazy dog
Body/P3/Regular
Inter · 14/20 · 400
The quick brown fox jumps over the lazy dog
Body/P4/strong
Inter · 12/16 · 600
The quick brown fox jumps over the lazy dog
Body/P4/accent
Inter · 12/16 · 500
The quick brown fox jumps over the lazy dog
Body/P4/Regular
Inter · 12/16 · 400
The quick brown fox jumps over the lazy dog
Button — Inter
Button/B1/semibold
Inter · 16/24 · 600
The quick brown fox jumps over the lazy dog
Button/B1/medium
Inter · 16/24 · 500
The quick brown fox jumps over the lazy dog
Button/B2/semibold
Inter · 14/20 · 600
The quick brown fox jumps over the lazy dog
Button/B2/medium
Inter · 14/20 · 500
The quick brown fox jumps over the lazy dog
Font Size
14 sizes from 10px to 128px. Match with a corresponding line-height token below.
--font-size-2xs
10px
The quick brown fox
--font-size-xs
12px
The quick brown fox
--font-size-sm
14px
The quick brown fox
--font-size-md
16px
The quick brown fox
--font-size-lg
18px
The quick brown fox
--font-size-xl
20px
The quick brown fox
--font-size-2xl
24px
The quick brown fox
--font-size-3xl
28px
The quick brown fox
--font-size-4xl
32px
The quick brown fox
--font-size-5xl
48px
The quick brown fox
--font-size-6xl
60px
The quick brown fox
--font-size-7xl
72px
The quick brown fox
--font-size-8xl
96px
The quick brown fox
--font-size-9xl
128px
The quick brown fox
Line Height
Absolute line-height values (px). Pair with the matching font-size.
--line-height-2xs
14px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-xs
16px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-sm
20px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-md
24px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-lg
26px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-xl
28px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-2xl
32px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-3xl
40px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-4xl
46px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-5xl
54px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-6xl
66px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-7xl
78px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-8xl
106px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--line-height-9xl
136px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Letter Spacing
5 tracking tokens adjust horizontal spacing between characters.
--letter-spacing-xs
-2px
ABCDEFGHIJKLM abcdefghijklm
--letter-spacing-sm
-1px
ABCDEFGHIJKLM abcdefghijklm
--letter-spacing-md
0px
ABCDEFGHIJKLM abcdefghijklm
--letter-spacing-lg
1px
ABCDEFGHIJKLM abcdefghijklm
--letter-spacing-xl
2px
ABCDEFGHIJKLM abcdefghijklm
Font Weights
Four weights cover text styles from body copy to bold headings.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox