Display classes
D0 puts the Display mode on an h1. D1 to D6 restate what the heading tags already do.
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Native heading tags
No classes. h1 to h6 bind the same five variables through their tag styles.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text styles
One class per Typography Styles mode. Each binds the same five variables and differs only by mode.
Body L
Body M
Body S
Colour
Four brand colours and their tint steps. Components bind semantic roles, never these directly.
Spacing utilities
Standalone classes, not combos. Stack them on any element in any combination. The dashed outline shows the padding they remove.
Button
One component. Theme variant sets the three styles, the Classes prop takes is-large, and the icon is a boolean toggle.
Spacing and radius
Every step is em, sized so 1em equals 16px at the 1440 frame. Bars show a representative range of the Spacing scale.
Stylesheet utilities
These classes carry no Webflow styles. Their CSS lives in styles.css, so do not style them in the Designer.
data-truncate="2" clamps this paragraph to two lines no matter how long the copy runs, which is what makes it useful inside cards where the summary length is set by an editor rather than a designer.
data-readmore="text" clamps to two lines until the JS toggle adds is-expanded, at which point the full copy shows.
Links and forms
Text Link for inline links. Form Field wraps a label and an input, with focus on the border rather than an outline.
Muted utilities
Two namespaces over the same variables: t-muted for text colour, b-muted for backgrounds. Both mix currentColor with transparent, so they inherit their tint from the surrounding text colour.
Utilities
Typography utilities
One class per variable. Size classes carry a matching line height so they can be used alone; weight, tracking, leading and family each set a single property.
Weight Thin 100
Weight Extra Light 200
Weight Light 300
Weight Regular 400
Weight Medium 500
Weight Semi Bold 600
Weight Bold 700
Weight Extra Bold 800
Weight Black 900
Tracking Display
Tracking Tight
Tracking Normal
Tracking Wide
Tracking Wider
Tracking Label
Tracking Eyebrow
Leading Flat 100 sets solid lines that sit tight against one another
Leading Display 108 for large headlines across two or three lines
Leading Tight 110 for statement headings that still need air
Leading Snug 124 for section headings and card titles
Leading Normal 132 for short paragraphs and standfirsts
Leading Relaxed 150 for running copy at intermediate sizes
Leading Body 164 for sustained body copy at small sizes
Size 11
Size 12
Size 13
Size 14
Size 15
Size 16
Size 17
Size 18
Size 20
Size 22
Size 24
Size 28
Size 32
Size 40
Size 48
Size 52
Size 60
Size 76
Family Heading Playfair Display
Family Body Inter
Gimmicks
Hosted Video
Class-based themes
Theme Base and Theme Dark each set the semantic variable mode and the inherited text colour. Put one on any wrapper and everything inside resolves to the right colour without its own binding.
Body copy inherits Text Primary from the wrapper. The panel background and border come from Background Page and Border Subtle.
Same markup, same classes inside. Only the wrapper changed, and every colour below it followed.