Typography

Field 3

Primitive foundations

Primitive typography tokens define the raw ingredients of the type system: font families, weights, sizes, line heights, letter spacing and reusable text transforms. They are used to build semantic text styles, not as the default component API.

Font families

Foundation font-family tokens keep heading, body and mono roles independent so future font changes do not require rewriting component CSS.

Token

Value

Role

Sample

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Primary heading and display family loaded from the local Serrif Collection trial font file.

Heading family

--font-family-body

"Lato", Arial, sans-serif

Primary body and interface copy family.

Body family

--font-family-mono

var(--font-family-body)

Utility/code role resolving to Lato through the body text family in this project.

Utility 0123

Font sizes

Primitive size tokens separate display and heading references from body reading sizes.

Display and heading sizes

Raw display and heading scale values used by semantic heading styles.

Token

Value

Min (REM)

Max (REM)

Min-max (PX)

Role

Sample

--font-size-display

clamp(
  var(--font-size-display-min),
  calc(
    var(--font-size-display-min) +
    (var(--font-size-display-max) - var(--font-size-display-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-display-max)
)

5rem

10.5rem

80px-168px

Largest primitive size for display-scale typography. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

Display

--font-size-h1

clamp(
  var(--font-size-h1-min),
  calc(
    var(--font-size-h1-min) +
    (var(--font-size-h1-max) - var(--font-size-h1-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h1-max)
)

4rem

9rem

64px-144px

Primitive size for the strongest heading tier. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

--font-size-h2

clamp(
  var(--font-size-h2-min),
  calc(
    var(--font-size-h2-min) +
    (var(--font-size-h2-max) - var(--font-size-h2-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h2-max)
)

3.5rem

7.5rem

56px-120px

Primitive size for major section heading scale. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

--font-size-h3

clamp(
  var(--font-size-h3-min),
  calc(
    var(--font-size-h3-min) +
    (var(--font-size-h3-max) - var(--font-size-h3-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h3-max)
)

3rem

6rem

48px-96px

Primitive size for strong subsection heading scale. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

--font-size-h4

clamp(
  var(--font-size-h4-min),
  calc(
    var(--font-size-h4-min) +
    (var(--font-size-h4-max) - var(--font-size-h4-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h4-max)
)

2.5rem

4.5rem

40px-72px

Primitive size for medium heading scale. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

--font-size-h5

clamp(
  var(--font-size-h5-min),
  calc(
    var(--font-size-h5-min) +
    (var(--font-size-h5-max) - var(--font-size-h5-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h5-max)
)

2rem

2.5rem

32px-40px

Primitive size for compact heading scale. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

--font-size-h6

clamp(
  var(--font-size-h6-min),
  calc(
    var(--font-size-h6-min) +
    (var(--font-size-h6-max) - var(--font-size-h6-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h6-max)
)

1.25rem

1.5rem

20px-24px

Smallest primitive heading size. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max.

Body sizes

Reading and compact interface text sizes.

Token

Value

Min (REM)

Max (REM)

Min-max (PX)

Role

Sample

--font-size-body-large

clamp(
  var(--font-size-body-large-min),
  calc(
    var(--font-size-body-large-min) +
    (var(--font-size-body-large-max) - var(--font-size-body-large-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-large-max)
)

1.125rem

1.25rem

18px-20px

Large lead and prominent paragraph text. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max; identical min/max values keep the size fixed.

Body large

--font-size-body-medium

clamp(
  var(--font-size-body-medium-min),
  calc(
    var(--font-size-body-medium-min) +
    (var(--font-size-body-medium-max) - var(--font-size-body-medium-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-medium-max)
)

1.0625rem

1.125rem

17px-18px

Medium body and supporting copy. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max; identical min/max values keep the size fixed.

Body medium

--font-size-body-base

clamp(
  var(--font-size-body-base-min),
  calc(
    var(--font-size-body-base-min) +
    (var(--font-size-body-base-max) - var(--font-size-body-base-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-base-max)
)

1rem

16px

Default body and interface copy size. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max; identical min/max values keep the size fixed.

Body base

--font-size-body-small

clamp(
  var(--font-size-body-small-min),
  calc(
    var(--font-size-body-small-min) +
    (var(--font-size-body-small-max) - var(--font-size-body-small-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-small-max)
)

0.875rem

14px

Small supporting copy and compact UI text. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max; identical min/max values keep the size fixed.

Body small

--font-size-body-tiny

clamp(
  var(--font-size-body-tiny-min),
  calc(
    var(--font-size-body-tiny-min) +
    (var(--font-size-body-tiny-max) - var(--font-size-body-tiny-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-tiny-max)
)

0.75rem

12px

Tiny metadata, labels and compact utility text. Interpolates between min and max using --fluid-viewport-min and --fluid-viewport-max; identical min/max values keep the size fixed.

Body tiny

Line heights

Reusable vertical rhythm values independent of one specific text style.

Token

Value

Role

Sample

--line-height-none

1

Tight single-line UI, icons and compact controls.

Line none

--line-height-tight

1.1

Large headings and display text.

Line tight

--line-height-compact

1.2

Compact headings, labels and captions.

Line compact

--line-height-normal

1.5

Default readable body copy rhythm.

Line normal

--line-height-relaxed

1.6

Long-form or more open body text rhythm.

Line relaxed

Letter spacing

Reusable tracking values for display, headings, body copy and compact utility text.

Token

Value

Role

Sample

--letter-spacing-none

0

Default tracking without optical tightening.

None spacing

--letter-spacing-tight

-0.01em

Small negative tracking for subtle optical correction.

Tight spacing

--letter-spacing-tighter

-0.02em

Medium negative tracking for compact typography.

Tighter spacing

--letter-spacing-tightest

-0.03em

Large negative tracking for display-oriented typography.

Tightest spacing

--letter-spacing-ultra-tight

-0.04em

Maximum negative tracking in the primitive scale.

Ultra tight spacing

Text wrap

Primitive wrapping tokens expose CSS text wrapping and breaking behavior for semantic text styles, headings and constrained UI.

Text wrap

Values for the CSS text-wrap property.

Token

Value

Role

Sample

--text-wrap-wrap

wrap

Default wrapping behavior for regular text flow.

AI native content system

--text-wrap-nowrap

nowrap

Prevents text from wrapping when a short label must stay on one line.

AI native content system

--text-wrap-balance

balance

Balances short multi-line headings for cleaner visual rhythm.

AI native content system

--text-wrap-pretty

pretty

Improves paragraph wrapping to reduce awkward last lines where supported.

AI native content system

Overflow wrap

Values for breaking long words and strings when text overflows.

Token

Value

Role

Sample

--overflow-wrap-normal

normal

Default overflow wrapping for readable copy.

mpcomengineeringframework

--overflow-wrap-break-word

break-word

Allows long words to break when needed without making every break opportunity aggressive.

mpcomengineeringframework

--overflow-wrap-anywhere

anywhere

Allows aggressive breaks for long strings, URLs and constrained UI.

mpcomengineeringframework

Word break

Values for controlling word-level breaking behavior.

Token

Value

Role

Sample

--word-break-normal

normal

Default word breaking behavior.

AI native framework

--word-break-break-all

break-all

Breaks text aggressively when layout constraints are more important than word integrity.

AI native framework

--word-break-keep-all

keep-all

Prevents word breaks in writing systems where keeping words intact matters.

AI native framework

White space

Values for preserving, collapsing and wrapping whitespace.

Token

Value

Role

Sample

--white-space-normal

normal

Default whitespace collapsing and wrapping.

AI native content

--white-space-nowrap

nowrap

Keeps compact labels, badges and metadata on one line.

AI native content

--white-space-pre-wrap

pre-wrap

Preserves whitespace and line breaks while still allowing wrapping.

AI native content

--white-space-pre-line

pre-line

Preserves line breaks while collapsing repeated spaces.

AI native content

--white-space-break-spaces

break-spaces

Preserves spaces and allows breaks after preserved whitespace.

AI native content

Weights

Role-based font-weight values that can change without renaming semantic text styles.

Token

Value

Role

Sample

--font-weight-light

300

Light weight used by display and heading typography.

Light weight

--font-weight-normal

400

Default reading and regular UI copy.

Normal weight

--font-weight-emphasis

400

Heading and UI emphasis role currently kept at regular weight.

Emphasis weight

--font-weight-strong

700

Bold text for fragments that need stronger emphasis.

Strong weight

Font styles

Reusable font-style values for semantic emphasis and predictable resets.

Token

Value

Role

Sample

--font-style-normal

normal

Default upright text style.

Normal style

--font-style-italic

italic

Italic text style for semantic emphasis and editorial text.

Italic style

Text transforms

Reusable text-transform values for compact utility, labels and metadata text.

Token

Value

Role

Sample

--text-transform-none

none

Explicit reset for text-transform when a style needs predictable casing.

Normal casing

--text-transform-uppercase

uppercase

Reusable uppercase transform for captions and utility metadata.

Uppercase metadata

--text-transform-lowercase

lowercase

Forces lowercase casing when a semantic text style needs quiet, normalized labels.

Lowercase Metadata

--text-transform-capitalize

capitalize

Capitalizes words when a UI label needs title-like casing.

capitalize metadata

--text-transform-full-width

full-width

Maps characters to full-width glyph forms where supported.

Full width 123

--text-transform-full-size-kana

full-size-kana

Maps small Kana characters to full-size Kana where supported.

Kana transform

Semantic typography

Semantic typography styles define global text contracts used through classes. They combine primitive typography values into reusable display, heading and body styles.

Global semantic styles

Use these classes as the public typography interface. Reusable components keep their own local typography styles instead of adding component-based typography tokens.

Name

Display

Class

.display

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-display

clamp(
  var(--font-size-display-min),
  calc(
    var(--font-size-display-min) +
    (var(--font-size-display-max) - var(--font-size-display-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-display-max)
)

Weight

--font-weight-light

300

Line height

--line-height-none

1

Letter spacing

--letter-spacing-tightest

-0.03em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H1

Class

.heading-h1

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h1

clamp(
  var(--font-size-h1-min),
  calc(
    var(--font-size-h1-min) +
    (var(--font-size-h1-max) - var(--font-size-h1-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h1-max)
)

Weight

--font-weight-light

300

Line height

--line-height-tight

1.1

Letter spacing

--letter-spacing-ultra-tight

-0.04em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H2

Class

.heading-h2

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h2

clamp(
  var(--font-size-h2-min),
  calc(
    var(--font-size-h2-min) +
    (var(--font-size-h2-max) - var(--font-size-h2-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h2-max)
)

Weight

--font-weight-light

300

Line height

--line-height-tight

1.1

Letter spacing

--letter-spacing-ultra-tight

-0.04em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H3

Class

.heading-h3

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h3

clamp(
  var(--font-size-h3-min),
  calc(
    var(--font-size-h3-min) +
    (var(--font-size-h3-max) - var(--font-size-h3-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h3-max)
)

Weight

--font-weight-light

300

Line height

--line-height-tight

1.1

Letter spacing

--letter-spacing-ultra-tight

-0.04em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H4

Class

.heading-h4

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h4

clamp(
  var(--font-size-h4-min),
  calc(
    var(--font-size-h4-min) +
    (var(--font-size-h4-max) - var(--font-size-h4-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h4-max)
)

Weight

--font-weight-light

300

Line height

--line-height-compact

1.2

Letter spacing

--letter-spacing-ultra-tight

-0.04em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H5

Class

.heading-h5

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h5

clamp(
  var(--font-size-h5-min),
  calc(
    var(--font-size-h5-min) +
    (var(--font-size-h5-max) - var(--font-size-h5-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h5-max)
)

Weight

--font-weight-light

300

Line height

--line-height-compact

1.2

Letter spacing

--letter-spacing-ultra-tight

-0.04em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

H6

Class

.heading-h6

CSS selector

Font family

--font-family-heading

"Serrif Collection VF Trial", Georgia, serif

Size

--font-size-h6

clamp(
  var(--font-size-h6-min),
  calc(
    var(--font-size-h6-min) +
    (var(--font-size-h6-max) - var(--font-size-h6-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-h6-max)
)

Weight

--font-weight-light

300

Line height

--line-height-compact

1.2

Letter spacing

--letter-spacing-tighter

-0.02em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-balance

balance

Overflow wrap

--overflow-wrap-normal

normal

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

Body large

Class

.body-large

CSS selector

Font family

--font-family-body

"Lato", Arial, sans-serif

Size

--font-size-body-large

clamp(
  var(--font-size-body-large-min),
  calc(
    var(--font-size-body-large-min) +
    (var(--font-size-body-large-max) - var(--font-size-body-large-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-large-max)
)

Weight

--font-weight-normal

400

Line height

--line-height-normal

1.5

Letter spacing

--letter-spacing-tight

-0.01em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-pretty

pretty

Overflow wrap

--overflow-wrap-break-word

break-word

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

Body medium

Class

.body-medium

CSS selector

Font family

--font-family-body

"Lato", Arial, sans-serif

Size

--font-size-body-medium

clamp(
  var(--font-size-body-medium-min),
  calc(
    var(--font-size-body-medium-min) +
    (var(--font-size-body-medium-max) - var(--font-size-body-medium-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-medium-max)
)

Weight

--font-weight-normal

400

Line height

--line-height-normal

1.5

Letter spacing

--letter-spacing-tight

-0.01em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-pretty

pretty

Overflow wrap

--overflow-wrap-break-word

break-word

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

Body base

Class

.body-base

CSS selector

Font family

--font-family-body

"Lato", Arial, sans-serif

Size

--font-size-body-base

clamp(
  var(--font-size-body-base-min),
  calc(
    var(--font-size-body-base-min) +
    (var(--font-size-body-base-max) - var(--font-size-body-base-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-base-max)
)

Weight

--font-weight-normal

400

Line height

--line-height-normal

1.5

Letter spacing

--letter-spacing-tight

-0.01em

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-pretty

pretty

Overflow wrap

--overflow-wrap-break-word

break-word

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

Body small

Class

.body-small

CSS selector

Font family

--font-family-body

"Lato", Arial, sans-serif

Size

--font-size-body-small

clamp(
  var(--font-size-body-small-min),
  calc(
    var(--font-size-body-small-min) +
    (var(--font-size-body-small-max) - var(--font-size-body-small-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-small-max)
)

Weight

--font-weight-normal

400

Line height

--line-height-normal

1.5

Letter spacing

--letter-spacing-none

0

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-pretty

pretty

Overflow wrap

--overflow-wrap-break-word

break-word

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Name

Body tiny

Class

.body-tiny

CSS selector

Font family

--font-family-body

"Lato", Arial, sans-serif

Size

--font-size-body-tiny

clamp(
  var(--font-size-body-tiny-min),
  calc(
    var(--font-size-body-tiny-min) +
    (var(--font-size-body-tiny-max) - var(--font-size-body-tiny-min)) *
    ((100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)))
  ),
  var(--font-size-body-tiny-max)
)

Weight

--font-weight-normal

400

Line height

--line-height-normal

1.5

Letter spacing

--letter-spacing-none

0

Font style

--font-style-normal

normal

Transform

--text-transform-none

none

Text wrap

--text-wrap-pretty

pretty

Overflow wrap

--overflow-wrap-break-word

break-word

Word break

--word-break-normal

normal

White space

--white-space-normal

normal

Sample

AI-native websites shaped by strategy, systems thinking and precise execution for ambitious digital brands.

Styles

Typography styles are the public CSS interface. Global text styles cover display, headings and body text, while utility classes stay limited to casing, font-style and wrapping behavior.

Utility typography styles

Small typography escape hatches for font-style, text-transform and wrapping. Do not use utility classes for font size, heading scale or body text hierarchy.

Class

Property

Token

Value

Role

.u-font-normal

font-style

--font-style-normal

normal

Reset italic text back to the normal font style without changing the text style class.

.u-font-italic

font-style

--font-style-italic

italic

Apply italic emphasis while keeping the active display, heading or body class.

.u-text-transform-none

text-transform

--text-transform-none

none

Reset inherited casing when a local text node must keep its original content casing.

.u-text-uppercase

text-transform

--text-transform-uppercase

uppercase

Apply uppercase metadata casing without creating a new semantic text style.

.u-text-lowercase

text-transform

--text-transform-lowercase

lowercase

Normalize compact labels or metadata to lowercase when needed.

.u-text-capitalize

text-transform

--text-transform-capitalize

capitalize

Apply title-like casing to short labels when content cannot be changed upstream.

.u-text-full-width

text-transform

--text-transform-full-width

full-width

Expose the native full-width transform for rare typographic edge cases.

.u-text-full-size-kana

text-transform

--text-transform-full-size-kana

full-size-kana

Expose the native full-size-kana transform for rare multilingual edge cases.

.u-text-wrap

text-wrap

--text-wrap-wrap

wrap

Return text to normal wrapping behavior.

.u-text-wrap-nowrap

text-wrap

--text-wrap-nowrap

nowrap

Keep a short label on one line when breaking would damage the UI.

.u-text-wrap-balance

text-wrap

--text-wrap-balance

balance

Balance short headings without creating a new heading style.

.u-text-wrap-pretty

text-wrap

--text-wrap-pretty

pretty

Improve paragraph wrapping when a local block needs better last-line behavior.

.u-overflow-wrap-normal

overflow-wrap

--overflow-wrap-normal

normal

Reset overflow wrapping to the browser default.

.u-overflow-wrap-break-word

overflow-wrap

--overflow-wrap-break-word

break-word

Allow long words to break in constrained readable text.

.u-overflow-wrap-anywhere

overflow-wrap

--overflow-wrap-anywhere

anywhere

Force aggressive breaking for URLs, ids and very narrow containers.

.u-word-break-normal

word-break

--word-break-normal

normal

Reset word breaking to the default behavior.

.u-word-break-all

word-break

--word-break-break-all

break-all

Allow aggressive word breaking only when layout constraints are strict.

.u-word-break-keep-all

word-break

--word-break-keep-all

keep-all

Keep words intact in writing systems where breaking them would reduce readability.

.u-white-space-normal

white-space

--white-space-normal

normal

Reset whitespace behavior to normal collapsing and wrapping.

.u-white-space-nowrap

white-space

--white-space-nowrap

nowrap

Keep compact UI text on one line.

.u-white-space-pre-wrap

white-space

--white-space-pre-wrap

pre-wrap

Preserve line breaks and spaces while still allowing wrapping.

.u-white-space-pre-line

white-space

--white-space-pre-line

pre-line

Preserve explicit line breaks while collapsing repeated spaces.

.u-white-space-break-spaces

white-space

--white-space-break-spaces

break-spaces

Preserve spaces and allow breaks after preserved whitespace.

Agentic Rules

Agentic typography rules describe how AI should use typography classes, variables and utilities when generating or editing UI.

Agentic typography rules

Operational rules for class-first typography, semantic variables and controlled utility usage.

Agentic Rule

Classes define visual text style

Use `.display`, `.heading-h1` through `.heading-h6` and `.body-large` through `.body-tiny` as the public typography interface. HTML tags define document semantics, not visual appearance.

Agentic Rule

Semantic styles own the full contract

A typography style class defines font family, size, weight, line height, letter spacing, font style, transform, wrapping and breaking behavior. Do not recreate partial local versions of those properties.

Agentic Rule

HTML headings stay neutral

Do not rely on `h1-h6` browser styles. Pair the correct semantic tag with the needed class, for example `<h2 class="heading-h3">` when document hierarchy and visual scale differ.

Agentic Rule

Utilities are narrow overrides

Use typography utility classes only for font style, casing and wrapping adjustments. Do not create utility classes for font sizes, heading levels, colors or spacing.

Agentic Rule

Reusable components own compact text

Components such as Button, Tag, Label and Eyebrow define their own local typography using primitives. Do not add component-based typography tokens unless a repeated cross-component contract appears.