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, clip shapes, 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.

Choose colors

Color fields use one shared swatch picker across Design properties, gradient stops, and pattern colors. Open a color field, then choose between:

• Theme — semantic colors arranged in predictable pairs: Primary and Secondary, Info and Warning, Success and Danger, Background and Text, then Border and Neutral. Each family runs from lighter to darker; Neutral holds the two standalone roles, Neutral and Inverse.
• Palette — exact shades grouped by hue, with the full 50–950 scale kept on one row.

Type in the color field to search both tabs at once. Hover a swatch to see its plain-language name, such as Primary Light or Amber 300. The footer keeps the actions available for that field—such as Unset, Transparent, or Custom—separate from the color choices.

Theme colors are grouped by purpose and ordered from lighter to darker; Palette keeps exact hue scales together.

Use the gear button in the lower-left corner to open Settings → Theme when the palette itself needs to change. Use Custom only for a one-off color that should not follow the site theme.

Browsing semantic Theme colors and exact Palette shades, then opening Theme settings from the picker

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.

Shape and decoration controls

Open Decorations to style the selected element’s visible surface:

• Background combines a solid color with ordered Gradient, Pattern, or Image layers. See the complete Backgrounds guide.
• Border Radius rounds corners. Use the split-cells icon to open advanced corner controls.
• Box Shadow adds one or more shadow layers.
• Clip Shape trims the element into a visual shape, such as a slanted or skewed background.

Use Clip Shape when you want a section, card, or banner background to have a custom silhouette without writing CSS. Choose a preset from the dropdown, then drag the handles in the preview to adjust the polygon.

For precise edits, click the advanced point-control icon beside Clip Shape. This opens the X/Y percentage values for each polygon point. The point controls are advanced because they are the exact values generated by dragging the preview handles.

Clip Shape supports safe visual polygons

The visual Clip Shape editor supports four-point percentage polygons. More complex clip-path CSS, such as circle(), inset(), or path(), remains available through Advanced CSS and is preserved until you choose a visual preset or clear the value.

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.