Design system
The smallest building blocks. Each element is one HTML tag with one utility class, a Text or Label prop, and colour variants. Elements carry no layout of their own; the component or section around them decides alignment and spacing.
Seven tag-true text components. Each has one Text prop and three variants: Default, Muted and Accent. Colour is never set on an instance; it comes from the variant or from the section's theme.
Heading H1. Tag h1. Class heading-style-h1.
Heading H2. Tag h2. Class heading-style-h2.
Heading H3. Tag h3. Class heading-style-h3.
Heading H4. Tag h4. Class heading-style-h4.
Text Body. Tag p. Class text-style-body.
Default. The quick brown fox jumps over the lazy dog near the riverbank.
Muted. The quick brown fox jumps over the lazy dog near the riverbank.
Accent. The quick brown fox jumps over the lazy dog near the riverbank.
Text Small. Tag p. Class text-style-small.
Default. Small text for captions and meta.
Muted. Small text for captions and meta.
Accent. Small text for captions and meta.
Eyebrow. Tag p. Class text-style-eyebrow.
Default eyebrow
Muted eyebrow
Accent eyebrow
Text Caption. Tag p. Class text-style-caption. 12px. Dates, meta, fine print.
Caption text
Muted caption
Accent caption
Stat Number. Tag p. Class text-style-stat. Montserrat 600, 22px, tabular numerals. Tickers and stat cards.
10,000
7,500
One Button component. Props: Label, Link. Variants: White (default), Reverse, Accent, Text Link Left, Text Link Right, Text Link Center. Fill and text colours come from the Button tokens so the same variant works on both themes.
Fill variants
Text link variants
Two image elements. Image is a ratio decision: it fills its parent and the variant sets the crop. Avatar is a size decision: fixed, always circular, used wherever a person appears. Both expose Image and Alt props, and both accept CMS bindings.
Image. Tag img. Class image. Props: Image, Alt. Variants: Default, Landscape 16:9, Square, Portrait 4:5.
Default, natural ratio
Landscape 16:9
Square 1:1
Portrait 4:5
Avatar. Tag img. Class avatar. Props: Image, Alt. Variants: Small 40px, Medium 56px, Large 80px.
Rules
Every image carries alt text through its Alt prop. Photos come from the asset library or a CMS field, never pasted as a background style. Icons are not images: they are inline SVG so they can take the theme colour, and get their own element next.
Plain inline text links. Muted by default, primary on hover. Not to be confused with the Button element's Text Link variants, which carry an arrow and act as calls to action.
Link. Tag a. Class link. Props: Text, URL. Variants: Small 14px (default), Body 16px, Nav (uppercase, current-page state).
A logo is a height decision. The element fixes the height to Size/Logo Height and lets the width follow, so any logo file lines up on a baseline. Used for the brand mark in the navbar and for partner logos in strips.
Logo. Tag img. Class logo. Props: Image, Alt. Variants: Default 28px, Partner 40px muted.
Cherry
Newsletter
Inline SVG so every icon takes the current text colour and flips with the theme. Webflow cannot swap an SVG through a prop, so each glyph is its own small component in the Icons group. Size variants only.
Icon. Tag div.icon wrapping an inline svg. Variants: Small 16px, Medium 24px (default), Large 32px.
Form controls. Inputs must sit inside a Webflow Form block to publish, so the samples below are wrapped in one. Label, Textarea and Select are added when a page needs them.
Form Input. Tag input. Class form-input. Placeholder, name and type are set per instance in the settings panel. Variants: Default, On Dark (translucent, for hero and CTA bands).