Introduction

The Underscore Design System (UDS) uses a “building blocks” approach, offering components and class styling to streamline team workflows and ensure cohesive landing pages. UDS follows the Client-First naming convention with a clear component hierarchy.
Styled Classes Combination
Throughout the site, various elements use styled classes to build the design, preventing CSS overload and enhancing class reusability. Here’s how you can use them effectively.
heading-style-h4
This is a <h1> tag with a h4

Heading 1 in h4

padding-left
padding-medium
background-color-black
text-color-white
The container is wrapped in the first row of class while the text applied a "text-color-white"
This is some text inside of a div block.

Typography

Native HTML Styling

This styling, marked by the pink tag, represents native Webflow HTML styling. Changing it will apply the style to all text elements on the page that don’t have a specific styled class (in blue).
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings (Not in use)
Heading 5
All H6 Headings (Not in use)
Heading 6
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links

Styled Heading Classes

These classes allows you to change out the styling of the text regardless of it's HTML tag. Eg. You can apply a 'heading-style-h2' to a HTML tag <h4>.
heading-style-display

Heading Style Display

heading-style-h1

Heading Style H1

heading-style-h2

Heading style h2

heading-style-h3

Heading style h3

heading-style-h4

Heading style h4

Text Sizes

These classes let you change text styling regardless of its HTML tag, allowing you to adjust text size easily.
text-size-xlarge

"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and the shore doctor--"

text-size-large

"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and the shore doctor--"

text-size-regular

"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and the shore doctor--"

text-size-small

"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and the shore doctor--"

text-size-tiny

"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and the shore doctor--"

Text Weight

Adjust the text weight without altering other styles.
text-weight-bold
text-weight-bold (700)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)

Line Clamp

Line clamp creates an automatic ellipsis when text exceeds the set line limit.
u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Styles

Apply stylistic changes to the text as needed.
text-style-italic
text-style-italic
text-style-allcaps
text-style-allcaps
text-style-link

Text Alignment

The text-align property sets the horizontal alignment of text, allowing it to be left, right, centered, or justified.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Text Utility

The text utility is ideal for adjusting paragraphs or titles. Use “text-u-balance” for headings or subheadings and “text-u-pretty” for paragraphs or body text.
text-u-balance
This is a heading for the display of text-u-balance
text-u-pretty
"No," she said. And then: "Don't do that, dear. No, I was thinking. As a matter of fact," she said, "one of the passengers died last night - a man. That's what held us up. We brought him in - I mean, he wasn't buried at sea. So, of course, the ship's doctor and

rich text

Rich text can be hard to edit when linked to specific content. Access rich text editing through this section.
rich-text_article

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
rich-text_case-study

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
rich-text_job

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
rich-text_text-only

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Colors

Text Color

Text color usually requires minimal variation, so UDS includes only a few pre-set options. Use the provided class naming template to create additional colors as needed.
text-color-subtle
text-color-subtle
text-color-brand
text-color-brand
text-color-secondary
text-color-secondary
text-color-tertiary
text-color-tertiary
text-color-inherit
text-color-inherit

Background Color

Background color usually requires minimal variation, so UDS includes only a few pre-set options. Use the provided class naming template to create additional colors as needed.
background-color-primary
background-color-secondary
background-color-tertiary
background-color-alternate

Effects

Box Shadows

Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-small
shadow-medium

Structural class

Containers

This sets the content size within a given limit, preventing overflow on very large or small devices.
container-small
container-medium
container-large
padding-global

Sections

Use this class to set spacing between the top and bottom sections.
padding-section-small
padding-section-medium
padding-section-large

Max Width

Use max-width to limit inner content, preventing awkward layouts within the container.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

flexbox

Horizontal Flexbox

Flexbox is a one-dimensional layout model that aligns items along a single axis (horizontal or vertical), perfect for components like navigation bars or form controls in simple, single-row or single-column layouts.
u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-left-stretch
u-hflex-center-stretch
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex

Flexbox is a one-dimensional layout model that aligns items along a single axis (horizontal or vertical), perfect for components like navigation bars or form controls in simple, single-row or single-column layouts.
u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-left-between
u-vflex-center-between
u-vflex-right-between
u-vflex-stretch-between

Grid

Grids are a good alternative to Flexbox and are ideal for controlling rows and columns simultaneously, especially in complex layouts or grid-based designs.
u-grid-desktop
u-grid-tablet
u-grid-column-2
u-grid-column-3
u-grid-column-4

Spacing

Gaps

Gaps are commonly used with Grid or Flexbox to adjust spacing, allowing for larger or smaller gaps than the default.
u-gap-none
u-gap-main
u-gap-xsmall
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large
u-gap-xlarge

Padding Direction

Use Padding Direction to apply a padding to a specific side. Always pair it with Padding Direction
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Padding Sizing

Use Padding Sizing with Padding Direction to set specific margin sizes for your element.
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

Margin Direction

Use Margin Direction to apply a margin to a specific side. Always pair it with Margin Sizing
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
margin-auto

Margin Sizing

Use Margin Sizing with Margin Direction to set specific margin sizes for your element.
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge

utility

Hide

This utility class hides content based on the device type, following design requirements.
hide
This element is hidden
hide-desktop-only
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape