Elements

The Base System includes essential, ready-to-use UI elements designed to help you build quickly while maintaining flexibility and consistency.

Buttons

The Base System offers multiple button sizes and style variants to suit different use cases. Rather than relying heavily on combo classes—which can become restrictive and hard to manage—we use unique, clearly named classes for each button type. These are powered by variables, making it easy to update styles and maintain design consistency across your site.

Adding Icons to Buttons

All buttons use display: flex with a predefined gap, allowing you to easily insert icons alongside text. To fine-tune spacing for better visual balance, you can apply a combo class like Icon Left or Icon Right to remove padding on one side of the button.

---

Form Elements

Form-related utility classes all begin with the prefix Form, making them easy to find and manage. This naming structure ensures all inputs, text areas, checkboxes, and more stay organized and consistent throughout your project.

---

Icons

Icon classes can be applied to both images and code embeds. Wherever possible, we recommend using inline SVGs, which offer smaller file sizes and allow you to control styling (such as color and hover effects) directly within the Webflow Designer.

---

Optional Classes

Avatars

Used to display user profile images—ideal for testimonials, blog authors, or team members.

Badges

Perfect for highlighting key info, labeling categories, or indicating status (e.g. "New", "Featured", or "Sold Out").

---

Buttons

Base Classes	Property
Button Primary	Main call to action button
Button Secondary	Secondary call to action button
Button Outline	Button with a border
Button Ghost	Button with no background or border
Button Link	Text Link

Form

Class Name	Property
Form Field Label	Default <label> style
Form Input	Default <input> style
Form Text Area	Variant of <input> for <textarea>
Form Select	Variant of <input> for <select>
Form Checkbox	Default <input type="checkbox">
Form Radio	Default <input type="radio">
Form Success Message
Form Error Message

Icons

Class Name	Size
Icon X Large	32x32(px)
Icon Large	28x28(px)
Icon Regular	24x24(px)
Icon Small	20x20(px)
Icon X Small	16x16(px)
Icon	No fixed size, used to center icon.

Badges

Name	Text & Line Size	Padding Top & Bottom	Padding Right & Left
Badge Large	16px / 24px	4px	10px
Badge Regular	14px / 16px	4px	8px
Badge Small	12px / 16px	4px	8px

Avatars

Class Name	Size (px)	Border Radius
Avatar X Large	64px	100%
Avatar Large	52px	100%
Avatar Regular	42px	100%
Avatar Small	32px	100%
Avatar X Small	24px	100%