Line length tokens

Line length tokens define the maximum width of body text to ensure readability and consistency. They map directly to body typography styles. Designers should pair the correct body style with its corresponding line length token, and developers should apply tokens as max-width values.

---

For designers

• Figma typography styles do not include line length. When designing, pair the correct body style with its mapped line length token.
  • Use $vacds-line-length-body-sm-text with body-xs or body-sm.
  • Use $vacds-line-length-body-text with body-base or body-md.
  • Use $vacds-line-length-body-lg-text with body-lg.
• Default to the body-base/body-md + body-text token pairing unless your layout calls for something more compact or expansive.
• Avoid custom overrides, as this breaks alignment between design and implementation.

Why this matters

• Readability: Optimal line lengths reduce eye strain and support quick scanning.
• Clinical context: Consistent application prevents overly short or long lines that could slow comprehension in time-sensitive workflows.
• Consistency: Ties typography styles directly to defined widths, avoiding guesswork.

---

For developers

Always pair typography and line length tokens to ensure fidelity with design.

Learn how to get started

Source file location: ./dist/core/tokens/line-length

Import as follows in your Sass file @use '@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/line-length ' as line-length;

---

Semantic tokens names and values

We provide three semantic tokens that map directly to our body typography styles:

Token	Value
$vacds-line-length-body-sm-text	44ex
$vacds-line-length-body-text	60ex
$vacds-line-length-body-lg-text	72ex
$vacds-line-length-none	inherit