Skip to main content
UDSUrban Design SystemBuild a multi-component HTML demoSITE 2026.06.10.1
Color
Brand
Font
Scale
Density

Text Styles

35 typography utility classes built on semantic font tokens. Each maps 1:1 to a Figma text style and responds to font family, scale, and density changes via the theme bar above.

Headings

Always Bold weight.

Heading H1.uds-text-heading-h1 · 32/44 Bold
Heading H2.uds-text-heading-h2 · 24/32 Bold
Heading H3.uds-text-heading-h3 · 18/26 Bold
Heading H4.uds-text-heading-h4 · 16/24 Bold

Paragraphs

6 sizes x 3 weights = 18 styles.

Paragraph XL.uds-text-paragraph-xl · 20/28 Regular
Paragraph XL Medium.uds-text-paragraph-xl-medium · 20/28 Medium
Paragraph XL Bold.uds-text-paragraph-xl-bold · 20/28 Bold
Paragraph LG.uds-text-paragraph-lg · 18/26 Regular
Paragraph LG Medium.uds-text-paragraph-lg-medium · 18/26 Medium
Paragraph LG Bold.uds-text-paragraph-lg-bold · 18/26 Bold
Paragraph MD.uds-text-paragraph-md · 16/24 Regular
Paragraph MD Medium.uds-text-paragraph-md-medium · 16/24 Medium
Paragraph MD Bold.uds-text-paragraph-md-bold · 16/24 Bold
Paragraph Base.uds-text-paragraph-base · 14/20 Regular
Paragraph Base Medium.uds-text-paragraph-base-medium · 14/20 Medium
Paragraph Base Bold.uds-text-paragraph-base-bold · 14/20 Bold
Paragraph SM.uds-text-paragraph-sm · 12/16 Regular
Paragraph SM Medium.uds-text-paragraph-sm-medium · 12/16 Medium
Paragraph SM Bold.uds-text-paragraph-sm-bold · 12/16 Bold
Paragraph XS.uds-text-paragraph-xs · 10/12 Regular
Paragraph XS Medium.uds-text-paragraph-xs-medium · 10/12 Medium
Paragraph XS Bold.uds-text-paragraph-xs-bold · 10/12 Bold

Labels

2 sizes x 3 weights = 6 styles.

Label Base.uds-text-label-base · 14/20 Regular
Label Base Medium.uds-text-label-base-medium · 14/20 Medium
Label Base Bold.uds-text-label-base-bold · 14/20 Bold
Label SM.uds-text-label-sm · 12/16 Regular
Label SM Medium.uds-text-label-sm-medium · 12/16 Medium
Label SM Bold.uds-text-label-sm-bold · 12/16 Bold

Inputs

Form input text styles.

Input Base.uds-text-input-base · 14/20 Regular
Input Base Medium.uds-text-input-base-medium · 14/20 Medium
Input Base Bold.uds-text-input-base-bold · 14/20 Bold
Input Helper.uds-text-input-helper · 10/12 Regular

Data

Table cell styles.

Data Cell.uds-text-data-cell · 14/20 Regular
Data Cell Medium.uds-text-data-cell-medium · 14/20 Medium
Data Cell Bold.uds-text-data-cell-bold · 14/20 Bold