Utilities

Text utilities

Type size, weight and colour classes generated from the tokens.

Type size, weight and colour classes are generated from the type ramp and the colours.

Example

ct-text-title ct-weight-bold

ct-color-muted

27 classes from platforms/web/utilities/generated.css.

Class	Declarations
`.ct-text-display`	`font-size:var(--fs-display);letter-spacing:var(--ls-display)`
`.ct-text-title`	`font-size:var(--fs-title);letter-spacing:var(--ls-title)`
`.ct-text-body`	`font-size:var(--fs-body);letter-spacing:var(--ls-body)`
`.ct-text-sub`	`font-size:var(--fs-sub);letter-spacing:var(--ls-sub)`
`.ct-text-cap`	`font-size:var(--fs-cap);letter-spacing:var(--ls-cap)`
`.ct-weight-regular`	`font-weight:var(--weight-regular)`
`.ct-weight-medium`	`font-weight:var(--weight-medium)`
`.ct-weight-semibold`	`font-weight:var(--weight-semibold)`
`.ct-weight-bold`	`font-weight:var(--weight-bold)`
`.ct-weight-heavy`	`font-weight:var(--weight-heavy)`
`.ct-color-paper`	`color:var(--paper)`
`.ct-color-card`	`color:var(--card)`
`.ct-color-card2`	`color:var(--card-2)`
`.ct-color-line`	`color:var(--line)`
`.ct-color-inactive`	`color:var(--inactive)`
`.ct-color-ink`	`color:var(--ink)`
`.ct-color-muted`	`color:var(--muted)`
`.ct-color-accent`	`color:var(--accent)`
`.ct-color-accent-ink`	`color:var(--accent-ink)`
`.ct-color-accent-tint`	`color:var(--accent-tint)`
`.ct-color-good`	`color:var(--good)`
`.ct-color-warn`	`color:var(--warn)`
`.ct-color-alert`	`color:var(--alert)`
`.ct-color-favorite`	`color:var(--favorite)`
`.ct-color-scrim`	`color:var(--scrim)`
`.ct-color-live-bg`	`color:var(--live-bg)`
`.ct-color-live-ink`	`color:var(--live-ink)`