Design panel

The Design tab in the right sidebar is where you style the selected canvas element. It controls visual CSS such as layout, spacing, typography, colors, borders, shadows, sizing, positioning, and utility classes.

Use Layers first when you need to select an exact Container, Row, Column, Button, Image, or nested child before styling it.

Design follows the current editing context

The Design panel is context-aware. If a responsive breakpoint, dark preview mode, or state such as Hover is active, style changes can be written for that context instead of the default light/mobile style.

The Design panel shows the selected element's classes, editing context, state, and style controls.

Open the Design panel

1. Select an element on the canvas or from the Layers tab.
2. Open the Design tab in the right sidebar.
3. Check the Editing: ribbon near the top of the panel.
4. Adjust the style controls for the selected element.

Expected result

The selected element updates on the canvas, and the applied classes or styles are saved with the project.

If nothing is selected, the Design panel shows an empty state. Select an element first.

Understand the Editing ribbon

The ribbon tells you where the next style change will apply:

Ribbon value	Meaning
Base styles	The default mobile-first style. Free form and Mobile both use it.
Tablet / Laptop / …	A larger breakpoint override. It applies from that size upward.
Dark	A dark-mode override for supported properties.
Hover / Focus / Active	A state override for interactive states.

Contexts can combine. For example, editing while Dark and Laptop are active can create a dark-mode style that only applies from the Laptop breakpoint upward.

Switching Design panel contexts for responsive and state-specific edits

Responsive design edits

Swebsy is mobile-first:

1. Start in Free form or Mobile and make the base layout work.
2. Switch to a larger device from the topbar device selector.
3. Change only the styles that need to differ at that larger size.

For example, set comfortable mobile padding in Mobile, then switch to Laptop and increase section padding or change a column layout.

Read the full workflow in Responsive editing.

The Editing ribbon shows combined contexts, such as Laptop plus Hover.

Dark-mode design edits

Use the topbar dark/light icon beside the responsive selector, or View → Preview Dark Mode, to switch the canvas into dark preview mode. When the Design panel shows Dark, supported style changes are saved as dark-mode overrides.

Dark-mode overrides are most useful for:

• text color
• background color
• border color
• shadow

Spacing and layout usually stay shared between light and dark mode. Use the full Dark mode guide when you need to style a dark version of a page or add a visitor-facing dark/light switch.

State edits

Use the State selector to style interactive states:

• Hover — when a pointer is over the element.
• Focus — when the element receives keyboard focus.
• Active — while the element is being activated.

Use state edits for buttons, links, cards, and other interactive components. Return the selector to Default before continuing normal styling.

Classes and utility mode

The Classes area shows the classes applied to the selected element. You can:

• add utility classes from suggestions
• remove individual class chips
• copy all classes
• switch to text mode to paste or edit space-separated classes
• open Tailwind help from the question icon

Use utility classes when a visual adjustment is not exposed as a form control. For common styling, prefer the visible Design controls first so the selected context stays obvious.

Clear an override

Most modified controls show a clear action. Clearing a value removes the style for the active context.

For example:

• Clearing a Laptop font size removes the Laptop override and lets the value inherit from smaller breakpoints.
• Clearing a Dark color removes the dark override and lets the light/base color apply.
• Clearing a Hover value removes only the hover-state style.

Common issues

I changed desktop but mobile changed too — you were probably editing Base styles. Switch to the larger device first, then make the override.

I changed a style but the wrong element updated — select the exact layer in the Layers panel before using Design controls.

Dark-mode edits changed the normal page — confirm the canvas is in dark preview mode and the Design panel shows the Dark ribbon before changing colors.

Hover styles keep applying to later edits — set State back to Default after styling the hover/focus/active state.