Typography

Our design system provides a comprehensive set of typography styles and color utilities to ensure consistency and readability across all applications. You can apply these styles using predefined CSS classes or by directly leveraging the underlying CSS custom properties (variables) for more granular control.

Core Typography Styles

We offer a range of typography presets, each designed for specific use-cases, from large display headings to fine print helper text. These presets define font-family, font-size, font-weight, line-height, and letter-spacing.

Applying Core Styles

There are two primary ways to apply these core typography styles:

1. Using CSS Helper Classes: Apply the relevant lmn-typography-* class directly to your HTML element.
2. Using CSS Custom Properties (Variables): For custom components or more complex scenarios, you can use the underlying CSS variables to construct your own styles.

Below is a detailed list of available core styles:

Display Styles

Used for prominent, attention-grabbing text, typically at the top of a page or section.

CSS Variables for Display Styles:

For each preset (e.g., display-1), the following CSS variables are available:

• --lmn-global-typography-display-1-family
• --lmn-global-typography-display-1-size
• --lmn-global-typography-display-1-weight
• --lmn-global-typography-display-1-line-height
• --lmn-global-typography-display-1-letter-spacing

(Replace display-1 with display-2, display-3, etc., for other display styles)

Example Usage (Variables):

.my-custom-hero-heading {
  font-family: var(--lmn-global-typography-display-1-family);
  font-size: var(--lmn-global-typography-display-1-size);
  font-weight: var(--lmn-global-typography-display-1-weight);
  line-height: var(--lmn-global-typography-display-1-line-height);
  letter-spacing: var(--lmn-global-typography-display-1-letter-spacing);
  /* Optionally, add a color */
  color: var(--lmn-global-typography-color-brand-core);
}

Title Styles

Used for page titles and main section headings.

CSS Variables for Title Styles:

For each preset (e.g., title-1), the following CSS variables are available:

• --lmn-global-typography-title-1-family
• --lmn-global-typography-title-1-size
• --lmn-global-typography-title-1-weight
• --lmn-global-typography-title-1-line-height
• --lmn-global-typography-title-1-letter-spacing

(Replace title-1 with title-2, etc., for other title styles)

Example Usage (Variables):

.my-section-title {
  font-family: var(--lmn-global-typography-title-2-family);
  font-size: var(--lmn-global-typography-title-2-size);
  font-weight: var(--lmn-global-typography-title-2-weight);
  line-height: var(--lmn-global-typography-title-2-line-height);
  letter-spacing: var(--lmn-global-typography-title-2-letter-spacing);
  color: var(--lmn-global-typography-color-neutral-primary);
}

Subtitle Styles

Used for subheadings, captions, and ancillary text that supports titles or body content.

CSS Variables for Subtitle Styles:

For each preset (e.g., subtitle-1), the following CSS variables are available:

• --lmn-global-typography-subtitle-1-family
• --lmn-global-typography-subtitle-1-size
• --lmn-global-typography-subtitle-1-weight
• --lmn-global-typography-subtitle-1-line-height
• --lmn-global-typography-subtitle-1-letter-spacing

(Replace subtitle-1 with subtitle-2, etc., for other subtitle styles)

Example Usage (Variables):

.my-image-caption {
  font-family: var(--lmn-global-typography-subtitle-5-family);
  font-size: var(--lmn-global-typography-subtitle-5-size);
  font-weight: var(--lmn-global-typography-subtitle-5-weight);
  line-height: var(--lmn-global-typography-subtitle-5-line-height);
  letter-spacing: var(--lmn-global-typography-subtitle-5-letter-spacing);
  color: var(--lmn-global-typography-color-neutral-secondary);
}

Body Styles

Used for primary content, such as articles, descriptions, and long-form text.

CSS Variables for Body Styles:

For each preset (e.g., body-editorial), the following CSS variables are available:

• --lmn-global-typography-body-editorial-family
• --lmn-global-typography-body-editorial-size
• --lmn-global-typography-body-editorial-weight
• --lmn-global-typography-body-editorial-line-height
• --lmn-global-typography-body-editorial-letter-spacing

(Replace body-editorial with body-comfortable or body-compact for other body styles)

Example Usage (Variables):

.my-article-content p { /* Assuming styling is applied to paragraphs within this class */
  font-family: var(--lmn-global-typography-body-comfortable-family);
  font-size: var(--lmn-global-typography-body-comfortable-size);
  font-weight: var(--lmn-global-typography-body-comfortable-weight);
  line-height: var(--lmn-global-typography-body-comfortable-line-height);
  letter-spacing: var(--lmn-global-typography-body-comfortable-letter-spacing);
  color: var(--lmn-global-typography-color-neutral-primary);
  margin-bottom: var(--lmn-global-typography-paragraph-spacing-below); /* For paragraph spacing */
}

Special Note on Paragraphs: When lmn-typography-body-* classes are applied to a <p> tag, or to a container element that has <p> tag descendants, a bottom margin is automatically applied to each paragraph. This margin is controlled by the CSS variable --lmn-global-typography-paragraph-spacing-below.

Example (input_file_3.ts structure):

<div class="lmn-typography-body-editorial">
  <p>First paragraph content...</p>
  <p>Second paragraph content...</p>
</div>

Or:

<p class="lmn-typography-body-comfortable">
  Single paragraph content...
</p>

Support Styles

Used for UI elements like labels, buttons, code snippets, and helper text.

CSS Variables for Support Styles:

Each support style (e.g., label-1, button-1, code, helper) has its own set of 5 CSS variables, following the pattern: --lmn-global-typography-{presetName}-family --lmn-global-typography-{presetName}-size ...and so on.

For example, for code:

• --lmn-global-typography-code-family
• --lmn-global-typography-code-size
• --lmn-global-typography-code-weight
• --lmn-global-typography-code-line-height
• --lmn-global-typography-code-letter-spacing

Example Usage (Variables):

.my-custom-button-text {
  font-family: var(--lmn-global-typography-button-1-family);
  font-size: var(--lmn-global-typography-button-1-size);
  font-weight: var(--lmn-global-typography-button-1-weight);
  line-height: var(--lmn-global-typography-button-1-line-height);
  letter-spacing: var(--lmn-global-typography-button-1-letter-spacing);
  /* Usually combined with other button styling (padding, background, etc.) */
}

.my-form-field-label {
  font-family: var(--lmn-global-typography-label-2-family);
  font-size: var(--lmn-global-typography-label-2-size);
  font-weight: var(--lmn-global-typography-label-2-weight);
  line-height: var(--lmn-global-typography-label-2-line-height);
  letter-spacing: var(--lmn-global-typography-label-2-letter-spacing);
  color: var(--lmn-global-typography-color-neutral-secondary);
}

.my-inline-code-snippet {
  font-family: var(--lmn-global-typography-code-family);
  font-size: var(--lmn-global-typography-code-size);
  font-weight: var(--lmn-global-typography-code-weight);
  line-height: var(--lmn-global-typography-code-line-height);
  letter-spacing: var(--lmn-global-typography-code-letter-spacing);
  background-color: #f0f0f0; /* Example background for code */
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

Typography Colors

We provide a palette of text colors to be used in conjunction with the core typography styles.

Applying Colors

1. Using CSS Helper Classes: Add the lmn-typography-color-* class to an element that also has a core typography style class applied (e.g., lmn-typography-title-1).
2. Using CSS Custom Properties (Variables): Apply the color directly using the color CSS property and the relevant CSS variable.

Available Colors:

"Negative" variants are typically designed for use on dark backgrounds.

Example Usage (Class):

<h1 class="lmn-typography-title-1 lmn-typography-color-brand-core">
  Brand Core Title
</h1>
<p class="lmn-typography-body-comfortable lmn-typography-color-neutral-secondary">
  Secondary neutral text.
</p>

Example Usage (Variable):

.my-custom-text-with-danger-color {
  /* Assumes a core typography style is also applied or defined */
  color: var(--lmn-global-typography-color-danger);
}

.my-component-on-dark-background .title {
  font-family: var(--lmn-global-typography-title-2-family);
  /* ... other font properties ... */
  color: var(--lmn-global-typography-color-neutral-primary-negative);
}

Utility Classes

Uppercase Text

To transform text to uppercase, use the .lmn-typography-uppercase class.

CSS Class: .lmn-typography-uppercase CSS Property: text-transform: uppercase;

Example Usage:

<div class="lmn-typography-label-1 lmn-typography-uppercase">
  This label is uppercase
</div>