Conventions

Guidelines for naming components, classes, and tokens to maintain clarity and consistency.

Naming Convention

BEM

To keep your layouts predictable and easy to maintain, all classes follow the BEM naming structure: Block → Element → Modifier. This helps your team understand what a class does, where it belongs, and how it relates to other parts of the component.

Block: The main component (e.g., card, button, navbar)
Element: A child part of the block (e.g., card_image, button_icon)
Modifier: A variant or state (e.g., button--primary, card--highlighted)

Use BEM to avoid ambiguous class names and reduce overlapping styles across projects. It also makes it easier to scale your component library over time, since every class clearly communicates its purpose and role inside the component structure.

1<div class="contact-form">
2	<div class="contact-form__row contact-form__row--warning">
3    	<!-- -->
4    </div>
5</div>

Components & Props

TitleCase

Components and their props follow TitleCase naming to keep them clean, readable, and consistent—whether used in Webflow or exported via Devlink.

Components should be named using descriptive, singular nouns (e.g., Button, Card, Avatar).
Props should reflect what they modify or control (e.g., Size, Variant, Icon, IsActive).

This naming pattern ensures clarity when browsing components, updating variants, or handing off work between designers and developers. It also mirrors naming conventions used in modern component libraries and frontend frameworks, making your system easier to adopt and maintain.

1<FormInput
2  text="Hello"
3  textVisibility={false}
4</>

Spacing

Home