Light the way
display-2xl
- Size Comp / Comf / Spac
- 60px / 95px / 180px
- ms-8
- Line height
- 1
- leading-none
- Weight
- 700
- font-weight.bold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- -0.05em
- tracking-tighter
Tokens
Typography
18 type roles, each a composed font shorthand plus a tracking value. Sizes come from the modular scale, so they change with density; families come from the kit's typeface (here: Inter).
Headings h1–h6 already use their roles (Beam foundations). Everything else opts in with a .u-type-* class — don’t set font-size or font-weight by hand. Choose a role by job: label-* for UI controls and form labels, body-* for reading text, caption and overline for metadata, display-* only for marketing-scale headlines.
Type roles
Light the way
display-xl
- Size Comp / Comf / Spac
- 50px / 76px / 135px
- ms-7
- Line height
- 1
- leading-none
- Weight
- 700
- font-weight.bold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- -0.05em
- tracking-tighter
Light the way forward
display-lg
- Size Comp / Comf / Spac
- 42px / 61px / 101px
- ms-6
- Line height
- 1.25
- leading-tight
- Weight
- 600
- font-weight.semibold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- -0.025em
- tracking-tight
Page title
h1
- Size Comp / Comf / Spac
- 35px / 49px / 76px
- ms-5
- Line height
- 1.25
- leading-tight
- Weight
- 600
- font-weight.semibold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- -0.025em
- tracking-tight
Section heading
h2
- Size Comp / Comf / Spac
- 29px / 39px / 57px
- ms-4
- Line height
- 1.25
- leading-tight
- Weight
- 600
- font-weight.semibold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- -0.025em
- tracking-tight
Subsection heading
h3
- Size Comp / Comf / Spac
- 24px / 31px / 43px
- ms-3
- Line height
- 1.375
- leading-snug
- Weight
- 600
- font-weight.semibold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Card title
h4
- Size Comp / Comf / Spac
- 20px / 25px / 32px
- ms-2
- Line height
- 1.375
- leading-snug
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Group label
h5
- Size Comp / Comf / Spac
- 17px / 20px / 24px
- ms-1
- Line height
- 1.375
- leading-snug
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Minor heading
h6
- Size Comp / Comf / Spac
- 14px / 16px / 18px
- ms-0
- Line height
- 1.5
- leading-normal
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0.025em
- tracking-wide
Lead paragraph for introductions and summaries.
body-lg
- Size Comp / Comf / Spac
- 17px / 20px / 24px
- ms-1
- Line height
- 1.625
- leading-relaxed
- Weight
- 400
- font-weight.regular
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Default body copy for paragraphs and UI text.
body
- Size Comp / Comf / Spac
- 14px / 16px / 18px
- ms-0
- Line height
- 1.625
- leading-relaxed
- Weight
- 400
- font-weight.regular
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Secondary copy, table cells and dense UI.
body-sm
- Size Comp / Comf / Spac
- 12px / 13px / 14px
- ms--1
- Line height
- 1.5
- leading-normal
- Weight
- 400
- font-weight.regular
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Captions, timestamps and metadata.
caption
- Size Comp / Comf / Spac
- 10px / 10px / 10px
- ms--2
- Line height
- 1.5
- leading-normal
- Weight
- 400
- font-weight.regular
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0.025em
- tracking-wide
Overline · eyebrow
overline
- Size Comp / Comf / Spac
- 10px / 10px / 10px
- ms--2
- Line height
- 1.5
- leading-normal
- Weight
- 600
- font-weight.semibold
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0.1em
- tracking-widest
const kit = "abl";
code
- Size Comp / Comf / Spac
- 12px / 13px / 14px
- ms--1
- Line height
- 1.625
- leading-relaxed
- Weight
- 400
- font-weight.regular
- Family (Inter)
- "JetBrains Mono", monospace
- family.mono
- Tracking
- 0em
- tracking-normal
Large button label
label-lg
- Size Comp / Comf / Spac
- 14px / 16px / 18px
- ms-0
- Line height
- 1.5
- leading-normal
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Form label
label
- Size Comp / Comf / Spac
- 12px / 13px / 14px
- ms--1
- Line height
- 1.5
- leading-normal
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0em
- tracking-normal
Badge / small label
label-sm
- Size Comp / Comf / Spac
- 10px / 10px / 10px
- ms--2
- Line height
- 1.5
- leading-normal
- Weight
- 500
- font-weight.medium
- Family (Inter)
- Inter, sans-serif
- family.primary
- Tracking
- 0.025em
- tracking-wide
Each role is font: var(--beam-type-<role>) plus letter-spacing: var(--beam-type-<role>-tracking); the .u-type-* utilities set both. Example: --beam-type-h1: var(--beam-type-h1-weight) var(--beam-type-h1-size)/var(--beam-type-h1-line-height) var(--beam-type-h1-family)
Families
primary is the UI and reading face; secondary is an editorial serif for special cases; mono is code. The kit’s typeface mode chooses all three. Kits load their own font files — if a face isn’t installed or shipped by the kit, the browser uses the generic fallback (sans-serif, serif, monospace).
| Token | Sample | Rubik | Montserrat | Inter | Geist | Roboto | System |
|---|---|---|---|---|---|---|---|
| family.primary | Acuity Experience Design | Rubik, sans-serif | Montserrat, sans-serif | Inter, sans-serif | Geist, sans-serif | Roboto, sans-serif | Inter, sans-serif |
| family.secondary | Acuity Experience Design | "Playfair Display", serif | "Playfair Display", serif | "Playfair Display", serif | "Playfair Display", serif | "Playfair Display", serif | "Playfair Display", serif |
| family.mono | Acuity Experience Design | "JetBrains Mono", monospace | "JetBrains Mono", monospace | "JetBrains Mono", monospace | "Fira Code", monospace | "Fira Code", monospace | "Cascadia Code", monospace |
Weights
| Token | Value |
|---|---|
| font-weight.regular | 400 |
| font-weight.medium | 500 |
| font-weight.semibold | 600 |
| font-weight.bold | 700 |
Leading
| Token | Sample | Value |
|---|---|---|
| leading-none | Two lines of text show the leading between them clearly. | 1 |
| leading-tight | Two lines of text show the leading between them clearly. | 1.25 |
| leading-snug | Two lines of text show the leading between them clearly. | 1.375 |
| leading-normal | Two lines of text show the leading between them clearly. | 1.5 |
| leading-relaxed | Two lines of text show the leading between them clearly. | 1.625 |
| leading-loose | Two lines of text show the leading between them clearly. | 2 |
Tracking
| Token | Sample | Value |
|---|---|---|
| tracking-tighter | Acuity Experience | -0.05em |
| tracking-tight | Acuity Experience | -0.025em |
| tracking-normal | Acuity Experience | 0em |
| tracking-wide | Acuity Experience | 0.025em |
| tracking-wider | Acuity Experience | 0.05em |
| tracking-widest | Acuity Experience | 0.1em |
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81