Menu
Esc
DocsGitHub TR

Foundations

Typography

Font, sizes, weights and line heights, and every Figma text style as a font shorthand.

Typography 1

TokenValuePreview
--font-family
01 Get Started / font-name
var(--font-hanken-grotesk, "Hanken Grotesk"), system-ui, sans-serif

size 17

TokenValuePreview
--font-size-base-size
03 Token / design-tokens/typography/size/base-size
14px
--font-size-display
03 Token / design-tokens/typography/size/display
  • Desktop 64px
  • Tablet 56px
  • Mobile 32px
--font-size-footnote
03 Token / design-tokens/typography/size/footnote
10px
--font-size-h1
03 Token / design-tokens/typography/size/h1 · added in code
40px
--font-size-h2
03 Token / design-tokens/typography/size/h2 · added in code
32px
--font-size-h3
03 Token / design-tokens/typography/size/h3 · added in code
24px
--font-size-h4
03 Token / design-tokens/typography/size/h4 · added in code
20px
--font-size-h5
03 Token / design-tokens/typography/size/h5 · added in code
18px
--font-size-h6
03 Token / design-tokens/typography/size/h6 · added in code
16px
--font-size-hero
03 Token / design-tokens/typography/size/hero · added in code
48px
--font-size-hero-xl
03 Token / design-tokens/typography/size/hero-xl · added in code
64px
--font-size-page-title
03 Token / design-tokens/typography/size/page-title · added in code
18px
--font-size-paragraphy
03 Token / design-tokens/typography/size/paragraphy
var(--font-size-base-size)
--font-size-text
03 Token / design-tokens/typography/size/text
var(--font-size-base-size)
--font-size-text-lead
03 Token / design-tokens/typography/size/text-lead
16px
--font-size-text-small
03 Token / design-tokens/typography/size/text-small
12px
--font-size-title
03 Token / design-tokens/typography/size/title · added in code
32px

weight 3

TokenValuePreview
--font-weight-bold
03 Token / design-tokens/typography/weight/bold
700
--font-weight-normal
03 Token / design-tokens/typography/weight/normal
500
--font-weight-regular
03 Token / design-tokens/typography/weight/regular · added in code
400

line-height 14

TokenValuePreview
--line-height-base
03 Token / design-tokens/typography/line-height/base
24px
--line-height-display
03 Token / design-tokens/typography/line-height/display
  • Desktop 80px
  • Tablet 40px
  • Mobile 40px
--line-height-footnote
03 Token / design-tokens/typography/line-height/footnote
12px
--line-height-h1
03 Token / design-tokens/typography/line-height/h1 · added in code
56px
--line-height-h2
03 Token / design-tokens/typography/line-height/h2 · added in code
48px
--line-height-h3
03 Token / design-tokens/typography/line-height/h3 · added in code
32px
--line-height-h4
03 Token / design-tokens/typography/line-height/h4 · added in code
28px
--line-height-h5
03 Token / design-tokens/typography/line-height/h5 · added in code
24px
--line-height-h6
03 Token / design-tokens/typography/line-height/h6 · added in code
24px
--line-height-hero
03 Token / design-tokens/typography/line-height/hero · added in code
64px
--line-height-hero-xl
03 Token / design-tokens/typography/line-height/hero-xl · added in code
80px
--line-height-paragraphy
03 Token / design-tokens/typography/line-height/paragraphy · added in code
normal
--line-height-text-small
03 Token / design-tokens/typography/line-height/text small
16px
--line-height-title
03 Token / design-tokens/typography/line-height/title · added in code
48px

Text styles: ui 19

TokenValuePreview
--text-ui-title
ui/title
var(--font-weight-normal) var(--font-size-title)/var(--line-height-title) var(--font-family)Çağrı İşığı
--text-ui-label
ui/label
var(--font-weight-regular) var(--font-size-base-size)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-display
ui/display
var(--font-weight-bold) var(--font-size-display)/var(--line-height-display) var(--font-family)Çağrı İşığı
--text-ui-display-letter-spacing
ui/display
-0.02em
--text-ui-caption
ui/CAPTION
var(--font-weight-bold) var(--font-size-text-small)/var(--line-height-text-small) var(--font-family)Çağrı İşığı
--text-ui-caption-text-transform
ui/CAPTION
uppercase
--text-ui-text-regular
ui/text/regular
var(--font-weight-normal) var(--font-size-base-size)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-text-bold
ui/text/bold
var(--font-weight-bold) var(--font-size-text)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-text-small-regular
ui/text small/regular
var(--font-weight-normal) var(--font-size-text-small)/var(--line-height-text-small) var(--font-family)Çağrı İşığı
--text-ui-text-small-bold
ui/text small/bold
var(--font-weight-bold) var(--font-size-text-small)/var(--line-height-text-small) var(--font-family)Çağrı İşığı
--text-ui-text-lead-regular
ui/text lead/regular
var(--font-weight-normal) var(--font-size-text-lead)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-text-lead-bold
ui/text lead/bold
var(--font-weight-bold) var(--font-size-text-lead)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-footnote-regular
ui/footnote/regular
var(--font-weight-normal) var(--font-size-footnote)/var(--line-height-footnote) var(--font-family)Çağrı İşığı
--text-ui-footnote-bold
ui/footnote/bold
var(--font-weight-bold) var(--font-size-footnote)/var(--line-height-footnote) var(--font-family)Çağrı İşığı
--text-ui-caption-small
ui/CAPTION Small
var(--font-weight-bold) var(--font-size-footnote)/var(--line-height-footnote) var(--font-family)Çağrı İşığı
--text-ui-caption-small-text-transform
ui/CAPTION Small
uppercase
--text-ui-page-title
ui/page title
var(--font-weight-normal) var(--font-size-page-title)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-button
ui/button
var(--font-weight-normal) var(--font-size-text)/var(--line-height-base) var(--font-family)Çağrı İşığı
--text-ui-card-title
ui/card title
var(--font-weight-normal) var(--font-size-text-lead)/var(--line-height-base) var(--font-family)Çağrı İşığı

Text styles: content 29

TokenValuePreview
--text-content-paragraphy-regular
content/paragraphy/regular
var(--font-weight-normal) var(--font-size-paragraphy)/var(--line-height-paragraphy) var(--font-family)Çağrı İşığı
--text-content-paragraphy-bold
content/paragraphy/bold
var(--font-weight-normal) var(--font-size-paragraphy)/var(--line-height-paragraphy) var(--font-family)Çağrı İşığı
--text-content-h1-regular
content/H1/Regular
var(--font-weight-regular) var(--font-size-h1)/var(--line-height-h1) var(--font-family)Çağrı İşığı
--text-content-h1-semibold
content/H1/Semibold
var(--font-weight-normal) var(--font-size-h1)/var(--line-height-h1) var(--font-family)Çağrı İşığı
--text-content-h1-bold
content/H1/Bold
var(--font-weight-bold) var(--font-size-h1)/var(--line-height-h1) var(--font-family)Çağrı İşığı
--text-content-h2-regular
content/H2/Regular
var(--font-weight-regular) var(--font-size-h2)/var(--line-height-h2) var(--font-family)Çağrı İşığı
--text-content-h2-semibold
content/H2/Semibold
var(--font-weight-normal) var(--font-size-h2)/var(--line-height-h2) var(--font-family)Çağrı İşığı
--text-content-h2-bold
content/H2/Bold
var(--font-weight-bold) var(--font-size-h2)/var(--line-height-h2) var(--font-family)Çağrı İşığı
--text-content-h3-regular
content/H3/Regular
var(--font-weight-regular) var(--font-size-h3)/var(--line-height-h3) var(--font-family)Çağrı İşığı
--text-content-h3-semibold
content/H3/Semibold
var(--font-weight-normal) var(--font-size-h3)/var(--line-height-h3) var(--font-family)Çağrı İşığı
--text-content-h3-bold
content/H3/Bold
var(--font-weight-bold) var(--font-size-h3)/var(--line-height-h3) var(--font-family)Çağrı İşığı
--text-content-h4-regular
content/H4/Regular
var(--font-weight-regular) var(--font-size-h4)/var(--line-height-h4) var(--font-family)Çağrı İşığı
--text-content-h4-semibold
content/H4/Semibold
var(--font-weight-normal) var(--font-size-h4)/var(--line-height-h4) var(--font-family)Çağrı İşığı
--text-content-h4-bold
content/H4/Bold
var(--font-weight-bold) var(--font-size-h4)/var(--line-height-h4) var(--font-family)Çağrı İşığı
--text-content-h5-regular
content/H5/Regular
var(--font-weight-regular) var(--font-size-h5)/var(--line-height-h5) var(--font-family)Çağrı İşığı
--text-content-h5-semibold
content/H5/Semibold
var(--font-weight-normal) var(--font-size-h5)/var(--line-height-h5) var(--font-family)Çağrı İşığı
--text-content-h5-bold
content/H5/Bold
var(--font-weight-bold) var(--font-size-h5)/var(--line-height-h5) var(--font-family)Çağrı İşığı
--text-content-h6-regular
content/H6/Regular
var(--font-weight-regular) var(--font-size-h6)/var(--line-height-h6) var(--font-family)Çağrı İşığı
--text-content-h6-semibold
content/H6/Semibold
var(--font-weight-normal) var(--font-size-h6)/var(--line-height-h6) var(--font-family)Çağrı İşığı
--text-content-h6-bold
content/H6/Bold
var(--font-weight-bold) var(--font-size-h6)/var(--line-height-h6) var(--font-family)Çağrı İşığı
--text-content-hero-regular
content/Hero/Regular
var(--font-weight-regular) var(--font-size-hero)/var(--line-height-hero) var(--font-family)Çağrı İşığı
--text-content-hero-semibold
content/Hero/Semibold
var(--font-weight-normal) var(--font-size-hero)/var(--line-height-hero) var(--font-family)Çağrı İşığı
--text-content-hero-bold
content/Hero/Bold
var(--font-weight-bold) var(--font-size-hero)/var(--line-height-hero) var(--font-family)Çağrı İşığı
--text-content-hero-xl-regular
content/Hero XL/Regular
var(--font-weight-regular) var(--font-size-hero-xl)/var(--line-height-hero-xl) var(--font-family)Çağrı İşığı
--text-content-hero-xl-regular-letter-spacing
content/Hero XL/Regular
-0.02em
--text-content-hero-xl-semibold
content/Hero XL/Semibold
var(--font-weight-normal) var(--font-size-hero-xl)/var(--line-height-hero-xl) var(--font-family)Çağrı İşığı
--text-content-hero-xl-semibold-letter-spacing
content/Hero XL/Semibold
-0.02em
--text-content-hero-xl-bold
content/Hero XL/Bold
var(--font-weight-bold) var(--font-size-hero-xl)/var(--line-height-hero-xl) var(--font-family)Çağrı İşığı
--text-content-hero-xl-bold-letter-spacing
content/Hero XL/Bold
-0.02em