Type Scale

acss-kit generates a nine-step type scale as CSS custom properties. Each token maps to a fixed rem value derived from a 16px base.

--font-size-xs —

The quick brown fox

--font-size-sm —

The quick brown fox

--font-size-base —

The quick brown fox

--font-size-md —

The quick brown fox

--font-size-lg —

The quick brown fox

--font-size-xl —

The quick brown fox

--font-size-2xl —

The quick brown fox

--font-size-3xl —

The quick brown fox

--font-size-4xl —

The quick brown fox

Using the scale

Reference tokens directly in CSS or via the type utility family:

/* Direct token */
font-size: var(--font-size-lg);

/* Via utility class */
.text-sm {
  font-size: var(--font-size-sm);
}
.text-lg {
  font-size: var(--font-size-lg);
}

Run /utility-list type in a Claude Code session to see the full type family with all generated classes.