Design System: Variables & Classes

Overview

Flowmo's design system gives you centralized control over your project's visual identity. Instead of hardcoding colors, sizes, and spacing on individual elements, you define CSS variables and classes that propagate everywhere they're used. Change a variable once and every element referencing it updates instantly. Apply a class to multiple elements and edit all of them in one place.

This keeps your designs consistent, makes sweeping changes effortless, and mirrors how professional design systems work in production code.

---

Prerequisites

• A Flowmo project open in the designer
• Basic familiarity with the designer interface (left sidebar, right sidebar, canvas)
• No coding experience required -- Flowmo handles the underlying CSS for you

---

The Left Sidebar: Pages & Canvas Tabs

The left sidebar has two tabs at the top: Pages and Canvas.

• Pages -- Shows your page list and layer tree, with a row of design system quick-access buttons at the top.
• Canvas -- Activates design system focus mode, showing all non-page elements on your canvas. The same row of quick-access buttons appears here too.

The quick-access buttons across the top of both tabs give you one-click access to:

Button	Tooltip	What it opens
Variable icon	Variables	The Variables panel (draggable modal)
Palette icon	Colors	The Colors panel for managing color presets
Component icon	Components	The Components panel listing all your reusable components
Layout icon	Templates	The Templates panel
Folder icon	Assets	The Assets browser for images, videos, and other media

Each button opens a draggable, resizable modal so you can position the panel wherever is most convenient while you work.

---

CSS Variables

Variables are custom CSS properties (like --primary-color, --heading-size, or --spacing-lg) that store a single value you can reuse across your entire project.

Variable Types

Flowmo supports five types of variables:

Type	Icon	Use case	Example
Number	Binary icon	Unitless values, opacity, z-index	--border-radius: 8
Color	Paint bucket icon	Brand colors, backgrounds, borders	--primary-color: #3B82F6
Primitive Color	Palette icon	Raw RGB triplets for color spaces	--brand-rgb: 26 27 49
String	Text icon	Font families, content strings	--font-heading: Inter
Variable	Link icon	References to other variables	var(--primary-color)

Two Places Variables Live

Flowmo has two layers of variables that work together:

1. Root variables -- CSS custom properties defined on the :root scope. These appear in the Variables collapsible section on the right sidebar when nothing is selected (root mode). They are auto-detected and grouped by type: Colors, Numbers, Strings, Images, and Multi-part.

1. Design system variables -- A richer variable system with groups and modes, managed through the Variables panel in the left sidebar. These support multiple values per variable (one per mode), enabling things like light/dark theme switching.

Opening the Variables Panel

1. Click the Variable icon button at the top of the left sidebar (either the Pages or Canvas tab).
2. A draggable modal titled "Variables" opens, showing your root-level variables organized in a collapsible section.

Root Variables (Right Sidebar)

When no element is selected, the right sidebar shows root-mode design properties. Here you'll find a Variables collapsible section that lists all CSS custom properties defined on :root.

• Variables are auto-grouped by detected type: Colors, Numbers, Strings, Images, Multi-part.
• Use the type filter dropdown to narrow the view (e.g., show only Colors).
• Click the + button (via the AddPropertyPopover) to add a new variable with a name, type, and value.
• Each variable shows an inline editor appropriate to its type -- color swatches for colors, text inputs for strings, etc.
• Right-click or use the context menu on any variable to rename or remove it.

Design System Variables (Left Sidebar Panel)

The Variables panel opened from the left sidebar provides the full design system variable management:

• Groups -- Organize variables into logical groups (e.g., "Colors", "Typography", "Spacing"). A Default group always exists. Click Add Group to create new groups.
• Modes -- Each group has one or more modes (the default mode is "Default" with CSS class :root). Add modes for things like dark theme, compact layout, etc. Each mode gets its own CSS class.
• Variables within groups -- Each variable stores a separate value for each mode in its group. This lets you define --primary-color as #3B82F6 in the Default mode and #1E3A5F in a Dark mode.

Creating a Variable in the Panel

1. Open the Variables panel from the left sidebar.
2. Expand or select the group where you want to add the variable.
3. Click the + button next to that group.
4. A new variable is created with a unique auto-generated name (e.g., "variable-1"). Click the name to rename it.
5. Set the type and value for each mode.

Managing Groups

• Click the folder + icon to add a new group. It gets a unique name like "Group 1" that you can rename immediately.
• Groups can be deleted (except the Default group). Deleting a group also deletes all variables inside it.
• Duplicate group names are blocked -- you'll see an error toast.

Managing Modes

• Click Add Mode within a group to create a new mode. Each mode gets a CSS class auto-generated from its name.
• Rename modes by clicking on the mode name.
• Delete modes (as long as at least one mode remains).
• Mode CSS classes are used to switch between variable values at runtime.

Bulk Import

The Variables panel supports JSON bulk import for quickly populating your design system. Click the import button, paste your JSON data, and Flowmo will create the groups, modes, and variables automatically.

Using a Variable in a Property Field

You can reference a variable in any compatible property field (color pickers, size inputs, spacing fields):

1. Click into the property field you want to set.
2. Type var(-- to trigger the variable autocomplete.
3. Select the variable you want from the dropdown.

When a variable is active on a field, you'll see a colored indicator showing the value source.

Editing a Variable

1. Navigate to the Variables panel (left sidebar) or the Variables collapsible (right sidebar, root mode).
2. Find your variable and change its value.
3. Every element referencing that variable updates across your entire project instantly.

---

Colors Panel

The Colors panel (opened via the palette icon in the left sidebar) manages your project's color presets -- a curated palette of saved colors.

• Each color appears as a swatch with its value.
• Hover over a color to reveal Edit and Delete buttons.
• Click Edit to open a color picker modal where you can adjust the color.
• Colors are stored in your project's design system settings and are available throughout color pickers in the designer.

---

Classes (ClassManagerV2)

Classes are reusable bundles of CSS styles you can apply to multiple elements. When you update a class, every element using it reflects the change automatically. The class system lives in the right sidebar and activates when you select an element.

How Classes Work

When you select an element, the ClassManagerV2 at the top of the right sidebar shows:

• The active class as a highlighted blue badge -- this is the class you're currently editing.
• Any combo classes as additional badges.
• Context segments (amber-colored) showing ancestor class scoping.
• State badges (purple) for pseudo-states like hover or focus.

Styling Modes

Flowmo offers three styling modes, toggled via the ClassManagerV2:

• Auto -- Flowmo automatically manages class assignments.
• Manual -- You explicitly choose which class to edit.
• Individual -- Each element gets a unique eid- class for element-specific styling.

Creating a Class

1. Select an element on the canvas.
2. In the right sidebar, locate the class area at the top.
3. Click into the class input field and type the name for your new class (e.g., card, btn-primary, section-heading).
4. Press Enter. The class is created globally and applied to the selected element.
5. The class name is automatically cleaned -- lowercase, with special characters replaced by hyphens.

Applying an Existing Class

1. Select the element you want to style.
2. Click into the class input field in the right sidebar.
3. A dropdown shows all existing classes in your project. Search by typing, then select the class you want.
4. The element inherits all the styles defined in that class.

Combo Classes

Combo classes let you build compound selectors (e.g., .card.featured):

1. With an active class already set on your element, switch the intent to combo.
2. Add additional class names. They appear as blue badges alongside the active class.
3. Styles defined on the combo selector only apply when the element has all the combined classes.

Contextual Selectors

You can scope styles based on an element's ancestors:

1. Expand the ancestor classes section in the ClassManagerV2.
2. Toggle ancestor classes on/off with checkboxes.
3. Add pseudo-states (hover, focus, active, disabled, first-child, last-child) to ancestor contexts using the state dropdown.

This lets you build selectors like .navbar .link:hover without writing CSS by hand.

Class Actions

Click on the active class badge to open a popover with:

• Edit Class -- Navigate to the class for editing.
• Rename -- Change the class name globally (a sub-popover with an input field appears).
• Remove -- Delete the class from the element.

Protected classes (like page, text, rect, frame, image, video, svg, group, fmo-master, fmo-variant) display a lock icon and cannot be renamed or deleted.

Editing a Class

When you select an element and modify styles in the right sidebar, you're editing the active class -- not just that one element. All elements sharing that class will update to match.

---

Property Source Indicators

When you select an element, the right sidebar shows colored indicators next to each property so you always know where a value comes from:

• Blue -- The value is a direct (local) override on this element.
• Orange -- The value is inherited from a parent or higher-level class.
• Yellow -- The value comes from mixed or query-specific sources.

These indicators help you understand your style hierarchy and quickly spot overrides.

---

Smart Property Inputs (DynamicField)

Property fields in Flowmo are more powerful than they look. Every input supports:

• Math expressions -- Type 100% - 20px and Flowmo calculates it for you.
• Unit conversion -- Switch between px, %, rem, vh, and more. Units are auto-appended for relevant properties (top, gap, padding, etc.).
• Variable references -- Use var(--your-variable) directly in any field. Raw identifiers are automatically wrapped in var(--...).

---

Tips

• Define your color palette as variables first. Before you start designing, set up your brand colors as variables. This saves time and ensures consistency from the start.
• Use variables for spacing too. Create a spacing scale (--spacing-sm, --spacing-md, --spacing-lg) for consistent layouts across your project.
• Name classes semantically. Use names like card, btn-primary, or section-hero -- not visual names like blue-big-text. Semantic names stay meaningful even when your design evolves.
• Use modes for theming. Set up a "Dark" mode on your color variable group to define dark-theme color values alongside your defaults.
• Leverage bulk import. If you're migrating from another tool or have a predefined token set, paste the JSON directly into the bulk import dialog to bootstrap your design system instantly.

---

Common Issues

"My variable change didn't update everywhere."

Make sure the elements in question are actually referencing the variable with var(--name). If a value was hardcoded (typed directly), it won't respond to variable changes. Check for colored source indicators to confirm a variable is in use.

"I edited a class but some elements didn't change."

Those elements likely have overriding inline styles. Check the property source indicators -- a blue indicator means a direct style is overriding the class value. Remove the inline override to let the class take effect.

"I can't add a class to my element."

You cannot add classes to component instances or variants. If you see an "Action blocked" toast, you're likely trying to modify an instance. Edit the master component instead.

"I can't find my variable."

Variables in the right sidebar (root mode) are auto-grouped by type. Use the type filter dropdown to narrow the list. Variables in the left sidebar panel are organized by groups -- check that the right group is expanded.

"I see a duplicate name error."

Both variable and group names must be unique within their scope. Choose a different name or rename the existing one first.

---

Related Articles

• Components and Instances
• Auto Layout (Flexbox)
• Interactions & States