Rich text heading
Use the text-rich-text wrapper for CMS content. Its children retain the shared heading, paragraph, link and list foundations.
Rich text link- Rich text list item
Typography
HTML defaults and reusable Client-First heading classes are documented separately.
HTML heading tags
HTML H1
Heading 1 — HTML tag
HTML H2
Heading 2 — HTML tag
HTML H3
Heading 3 — HTML tag
HTML H4
Heading 4 — HTML tag
HTML H5
Heading 5 — HTML tag
HTML H6
Heading 6 — HTML tag
Heading style classes
heading-style-h1
Heading style H1 on a Div
heading-style-h2
Heading style H2 on a Div
heading-style-h3
Heading style H3 on a Div
heading-style-h4
Heading style H4 on a Div
heading-style-h5
Heading style H5 on a Div
heading-style-h6
Heading style H6 on a Div
Paragraphs, links, quotes and lists
Body copy keeps a comfortable measure and line height for long-form reading.
Inline text linkGood systems make correct decisions easier to repeat.
- Unordered list item
- Second list item
- Ordered list item
- Second ordered item
Text sizes & weights
Global typography utilities can be combined without creating one-off classes.
Sizes
text-size-large
Large supporting text
text-size-medium
Medium supporting text
text-size-regular
Regular body text
text-size-small
Small helper text
text-size-tiny
Tiny metadata text
Weights
text-weight-light
Light text weight
text-weight-normal
Normal text weight
text-weight-medium
Medium text weight
text-weight-semibold
Semibold text weight
text-weight-bold
Bold text weight
Rich text
Colors & fonts
Swatches and font samples come from the detected Lovable theme, not a fixed template.
Project colors
Font families
Body / Main font handoff
After uploading "Manrope" as a Webflow Custom Font, apply font-family-sans to Webflow Body / All Pages.
Body example — inherited text uses the main font.
font-family-sans
Manrope
Body / Main font
Apply to: Webflow Body / all inherited text.
font-family-sans
The quick brown fox jumps over the lazy dog
Sora
Headings / Display
Apply to: H1–H6 heading elements.
font-family-display
The quick brown fox jumps over the lazy dog
UI elements
Reusable controls demonstrate base classes and modifier classes as separate Webflow styles.
Buttons
Tabs, slider arrows and tags
Tag label
Form elements
Safe visual form primitives are ready to rebuild as native Webflow fields while retaining the generated classes.
Text input
Your name
Select
Choose an option
Textarea
Write your message…
Checks
Checkbox option
Radio option
Icons
The generated guide uses deterministic inline Lucide SVGs with global size utilities.
Radius & effects
Project radius values and reusable elevation levels are visible side by side.
Radius base: 0.5rem
small
medium
large
round
Box shadows
box-shadow-small
box-shadow-medium
box-shadow-large
Structure classes
Canonical Client-First wrappers, containers, spacing, layout and aspect-ratio utilities stay stable in both export modes.
page-wrapper → main-wrapper
Main wrapper
padding-global → container-large
Large container
container-medium
container-small
padding-section-large
padding-section-medium
padding-section-small
grid-2-columns
display-flex-horizontal
display-flex-vertical
aspect-ratio-square
aspect-ratio-landscape
Spacing and visibility utilities
padding-small
padding-medium
padding-large
margin-small
margin-medium
margin-large