RAISE STUDIO — WEBFLOW CLASS SYSTEM

Style Guide

A working inventory of Raise Studio’s global typography, layout, spacing, and utility classes.

Structure

Global page padding, centered content widths, and responsive section spacing foundations.

Global padding

u-padding-global

Containers

u-container-sm

u-container-md

u-container-lg

u-container-xl

u-container

Section padding

u-section-padding-sm

u-section-padding-top-sm

u-section-padding-bottom-sm

u-section-padding-md

u-section-padding-top-md

u-section-padding-bottom-md

u-section-padding-lg

u-section-padding-top-lg

u-section-padding-bottom-lg

Headings

HTML heading tags and reusable heading-style classes for visual hierarchy independent of semantic level.

Heading styles

heading-style-h1

Heading

Heading

heading-style-h2

Heading

Heading

heading-style-h3

Heading

Heading

heading-style-h4

Heading

Heading

heading-style-h5

Heading

Heading

heading-style-h6

Heading

Heading

Text Classes

Reusable text size, weight, alignment, style, transform, wrapping, decoration, and truncation utilities.

Text Sizes

text-size-xs

Sample text is being used as a placeholder for real text that is normally present.

text-size-sm

Sample text is being used as a placeholder for real text that is normally present.

text-size-default

Sample text is being used as a placeholder for real text that is normally present.

text-size-lg

Sample text is being used as a placeholder for real text that is normally present.

text-size-xl

Sample text is being used as a placeholder for real text that is normally present.

text-size-xxl

Sample text is being used as a placeholder for real text that is normally present.

text-size-xxxl

Sample text is being used as a placeholder for real text that is normally present.

Weight

u-weight-regular

u-weight-medium

u-weight-semibold

u-weight-bold

Alignment

u-text-left

u-text-center

u-text-right

Style

u-text-normal

u-text-italic

Transform

u-text-uppercase

u-text-lowercase

u-text-capitalize

u-text-none

Wrapping

u-text-wrap

u-text-nowrap

u-text-balance

u-text-pretty

u-break-words

Decoration

u-underline

u-no-underline

Truncation

u-truncate

u-line-clamp-1

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

Colors

Semantic text, background, and border color utilities in one reference section.

Text Colors

u-text-primary

u-text-muted

u-text-inverse

u-text-accent

u-text-success

u-text-error

Background Colors

u-bg-primary

u-bg-surface

u-bg-inverse

u-bg-accent

u-bg-transparent

Border Colors

u-border-primary

u-border-muted

u-border-inverse

u-border-accent

Flexbox

Concrete Tailwind CSS v4.3 flex display, direction, wrapping, alignment, and child utilities approved for Webflow.

Flex Direction Utilities

u-flex-horizontal-wrap

u-flex-vertical-nowrap

u-flex-horizontal-nowrap

u-flex-vertical-wrap

Align Self Utilities

u-align-self-inherit

u-align-self-start

u-align-self-center

u-align-self-end

u-align-self-stretch

Align Items Utilities

u-align-items-inherit

u-align-items-start

u-align-items-center

u-align-items-end

u-align-items-stretch

Justify Content Utilities

u-justify-content-inherit

u-justify-content-start

u-justify-content-center

u-justify-content-end

u-justify-content-between

u-justify-content-around

Flex Basis Utilities

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Concrete Tailwind CSS v4.3 grid display, tracks, flow, alignment, and child-placement utilities approved for Webflow.

Grid Utilities

u-grid-autofit

u-grid-autofill

u-grid-custom

u-grid-subgrid

Column Start Utilities

u-column-start-auto

u-column-start-1

u-column-start-2

u-column-start-3

u-column-start-4

u-column-start-5

u-column-start-6

u-column-start-7

u-column-start-8

u-column-start-9

u-column-start-10

u-column-start-11

u-column-start-12

Column Span Utilities

u-column-span-full

u-column-span-indent

u-column-span-1

u-column-span-2

u-column-span-3

u-column-span-4

u-column-span-5

u-column-span-6

u-column-span-7

u-column-span-8

u-column-span-9

u-column-span-10

u-column-span-11

u-column-span-12

Row Start Utilities

u-row-start-auto

u-row-start-1

u-row-start-2

u-row-start-3

u-row-start-4

u-row-start-5

u-row-start-6

Row Span Utilities

u-row-span-1

u-row-span-2

u-row-span-3

u-row-span-4

u-row-span-5

u-row-span-6

Order Utilities

u-order-first

u-order-last

Gaps

Semantic spacing utilities for both grid and flex layouts, organized by axis.

Both axes

gap-0

gap-2xs

gap-xs

gap-sm

gap-md

gap-lg

gap-xl

gap-2xl

gap-3xl

Horizontal

gap-x-0

gap-x-2xs

gap-x-xs

gap-x-sm

gap-x-md

gap-x-lg

gap-x-xl

gap-x-2xl

gap-x-3xl

Vertical

gap-y-0

gap-y-2xs

gap-y-xs

gap-y-sm

gap-y-md

gap-y-lg

gap-y-xl

gap-y-2xl

gap-y-3xl

Margins

Semantic margin utilities for individual sides, logical axes, and automatic alignment.

All sides

u-margin-0

u-margin-2xs

u-margin-xs

u-margin-sm

u-margin-md

u-margin-lg

u-margin-xl

u-margin-2xl

u-margin-3xl

Top

u-margin-top-0

u-margin-top-2xs

u-margin-top-xs

u-margin-top-sm

u-margin-top-md

u-margin-top-lg

u-margin-top-xl

u-margin-top-2xl

u-margin-top-3xl

Right

u-margin-right-0

u-margin-right-2xs

u-margin-right-xs

u-margin-right-sm

u-margin-right-md

u-margin-right-lg

u-margin-right-xl

u-margin-right-2xl

u-margin-right-3xl

Bottom

u-margin-bottom-0

u-margin-bottom-2xs

u-margin-bottom-xs

u-margin-bottom-sm

u-margin-bottom-md

u-margin-bottom-lg

u-margin-bottom-xl

u-margin-bottom-2xl

u-margin-bottom-3xl

Left

u-margin-left-0

u-margin-left-2xs

u-margin-left-xs

u-margin-left-sm

u-margin-left-md

u-margin-left-lg

u-margin-left-xl

u-margin-left-2xl

u-margin-left-3xl

Horizontal

u-margin-horizontal-0

u-margin-horizontal-2xs

u-margin-horizontal-xs

u-margin-horizontal-sm

u-margin-horizontal-md

u-margin-horizontal-lg

u-margin-horizontal-xl

u-margin-horizontal-2xl

u-margin-horizontal-3xl

Vertical

u-margin-vertical-0

u-margin-vertical-2xs

u-margin-vertical-xs

u-margin-vertical-sm

u-margin-vertical-md

u-margin-vertical-lg

u-margin-vertical-xl

u-margin-vertical-2xl

u-margin-vertical-3xl

Auto

u-margin-auto

u-margin-horizontal-auto

u-margin-left-auto

u-margin-right-auto

Padding

Semantic padding utilities for individual sides and logical axes.

All sides

u-padding-0

u-padding-2xs

u-padding-xs

u-padding-sm

u-padding-md

u-padding-lg

u-padding-xl

u-padding-2xl

u-padding-3xl

Top

u-padding-top-0

u-padding-top-2xs

u-padding-top-xs

u-padding-top-sm

u-padding-top-md

u-padding-top-lg

u-padding-top-xl

u-padding-top-2xl

u-padding-top-3xl

Right

u-padding-right-0

u-padding-right-2xs

u-padding-right-xs

u-padding-right-sm

u-padding-right-md

u-padding-right-lg

u-padding-right-xl

u-padding-right-2xl

u-padding-right-3xl

Bottom

u-padding-bottom-0

u-padding-bottom-2xs

u-padding-bottom-xs

u-padding-bottom-sm

u-padding-bottom-md

u-padding-bottom-lg

u-padding-bottom-xl

u-padding-bottom-2xl

u-padding-bottom-3xl

Left

u-padding-left-0

u-padding-left-2xs

u-padding-left-xs

u-padding-left-sm

u-padding-left-md

u-padding-left-lg

u-padding-left-xl

u-padding-left-2xl

u-padding-left-3xl

Horizontal

u-padding-horizontal-0

u-padding-horizontal-2xs

u-padding-horizontal-xs

u-padding-horizontal-sm

u-padding-horizontal-md

u-padding-horizontal-lg

u-padding-horizontal-xl

u-padding-horizontal-2xl

u-padding-horizontal-3xl

Vertical

u-padding-vertical-0

u-padding-vertical-2xs

u-padding-vertical-xs

u-padding-vertical-sm

u-padding-vertical-md

u-padding-vertical-lg

u-padding-vertical-xl

u-padding-vertical-2xl

u-padding-vertical-3xl

Display and Visibility

General display, responsive visibility, assistive-text, and visibility-property utilities.

Display

u-block

u-inline-block

u-inline

u-contents

u-none

Responsive visibility

u-desktop-only

u-tablet-only

u-mobile-only

u-tablet-hide

u-mobile-hide

Screen-reader content

u-sr-only

u-not-sr-only

Visibility property

u-visible

u-invisible

Sizing

Width, height, constraint, and square icon-size utilities.

Width

u-width-auto

u-width-full

u-width-screen

u-width-min

u-width-max

u-width-fit

Height

u-height-auto

u-height-full

u-height-screen

u-height-min

u-height-max

u-height-fit

Minimum width

u-min-width-0

u-min-width-full

Minimum height

u-min-height-0

u-min-height-full

u-min-height-screen

Maximum width

u-max-width-none

u-max-width-xs

u-max-width-sm

u-max-width-md

u-max-width-lg

u-max-width-xl

u-max-width-prose

u-max-width-full

Maximum height

u-max-height-none

u-max-height-full

u-max-height-screen

Icon sizing

u-icon-xs

u-icon-sm

u-icon-md

u-icon-lg

u-icon-xl

Position and Layer

Position modes, zero insets, centering helpers, and restrained local z-index utilities.

Position

u-position-static

u-position-relative

u-position-absolute

u-position-fixed

u-position-sticky

Inset

u-inset-0

u-top-0

u-right-0

u-bottom-0

u-left-0

u-inset-inline-0

u-inset-block-0

Centering

u-position-center

u-position-center-x

u-position-center-y

Layer

u-z-auto

u-z-0

u-z-1

u-z-10

u-z-100

Overflow

Overflow behavior for both axes and directional control.

Both axes

u-overflow-auto

u-overflow-hidden

u-overflow-clip

u-overflow-visible

u-overflow-scroll

Horizontal

u-overflow-x-auto

u-overflow-x-hidden

u-overflow-x-clip

u-overflow-x-scroll

Vertical

u-overflow-y-auto

u-overflow-y-hidden

u-overflow-y-clip

u-overflow-y-scroll

Borders

Border side and radius utilities, separated from semantic color classes.

Border Sides

u-border

u-border-top

u-border-right

u-border-bottom

u-border-left

u-border-none

Border Radius

u-radius-none

u-radius-sm

u-radius-md

u-radius-lg

u-radius-full

Media and Aspect Ratios

Object fitting and positioning, approved aspect ratios, and image behavior utilities.

Fit

u-object-cover

u-object-contain

u-object-fill

u-object-none

Position

u-object-center

u-object-top

u-object-right

u-object-bottom

u-object-left

Aspect ratio

u-aspect-square

u-aspect-video

u-aspect-portrait

u-aspect-landscape

u-aspect-auto

Image behavior

u-img-full

u-img-cover

u-img-contain

Interaction and Accessibility

Pointer, cursor, selection, and focus-ring utilities for usable interactive states.

Pointer events

u-pointer-events-none

u-pointer-events-auto

Cursor

u-cursor-auto

u-cursor-default

u-cursor-pointer

u-cursor-grab

u-cursor-grabbing

Selection

u-select-none

u-select-text

u-select-all

u-select-auto

Focus

u-focus-ring

u-focus-ring-inverse

Webflow Elements

Native Webflow form and Rich Text elements presented as internal styling references.

Form Elements

Native form elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

Native Rich Text elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample paragraph with a text link for Rich Text styling.

Unordered list item
Unordered list item

Ordered list item
Ordered list item

Sample blockquote for Rich Text styling.