Typography
SCUI uses Inter for product interfaces and Times New Roman for marketing display type. Use these utilities instead of hand-setting font size, line height, or letter spacing.
Sans Scale
type-sans-xs
0.75rem / 1.2
Aa
type-sans-sm
0.875rem / 1.2
Aa
type-sans-base
1rem / 1.2rem
Aa
type-sans-lg
1.125rem / 1.2
Aa
type-sans-xl
1.25rem / 1.2
Aa
type-sans-2xl
1.5rem / 1.2
Aa
type-sans-3xl
1.875rem / 1.1
Aa
type-sans-4xl
2.25rem / 1.1
Aa
type-sans-5xl
3rem / 1.1
Aa
type-sans-6xl
3.75rem / 1.1
Aa
type-sans-7xl
4.5rem / 1
Aa
type-sans-8xl
6rem / 1
Aa
type-sans-9xl
8rem / 1
Aa
Serif Scale
type-serif-xs
0.75rem / 1.2 / -0.01em
Aa
type-serif-sm
0.875rem / 1.2 / -0.02em
Aa
type-serif-base
1rem / 1.2 / -0.02em
Aa
type-serif-lg
1.125rem / 1.2 / -0.02em
Aa
type-serif-xl
1.25rem / 1.1 / -0.03em
Aa
type-serif-2xl
1.5rem / 1 / -0.04em
Aa
type-serif-3xl
1.875rem / 1 / -0.04em
Aa
type-serif-4xl
2.25rem / 1 / -0.05em
Aa
type-serif-5xl
3rem / 0.9 / -0.055em
Aa
type-serif-6xl
3.75rem / 0.9 / -0.06em
Aa
type-serif-7xl
clamp(3.5rem, 10vw, 5rem) / 0.85 / -0.065em
Aa
type-serif-8xl
6rem / 0.85 / -0.07em
Aa
type-serif-9xl
8rem / 0.8 / -0.075em
Aa
Interface Roles
Page title
Component registry
Section title
Installation
Subsection title
Preview
Panel title
Account details
Body
Use normal interface copy for labels, instructions, and table rows.
Description
Secondary copy should clarify without becoming a second heading.
Helper
Short supporting text for dense controls.
Use the Label primitive for form labels, section labels, and compact eyebrow text when the interface actually needs it.
Usage
Keep most product UI in the xs to lg range. Reserve larger type for page titles, display moments, and empty states with enough room to support it.
Serif utilities are for marketing pages and brand-led display moments. Do not use serif type in product chrome, navigation, controls, forms, tables, or other repeated operational UI.
Use uppercase sparingly. When eyebrow or section text is useful, prefer the Label primitive with compact sans type and muted color.