Styling and responsive design

The right panel has two modes: properties and styles for a selected element, or Project Theme when nothing is selected. Start with the theme for shared design choices, then use element styles for local adjustments.

Open the properties panelCopy Anchor Link

1. Select an element on the canvas or in Outline.
2. Use Show properties panel in the header if the panel is closed.
3. Check the breadcrumb to confirm which element you selected.
4. Edit its content or behavior fields at the top.
5. Scroll down to Style Scope and the available style sections.

The panel only shows style groups supported by that component. A missing Typography or Background section is not necessarily an error: select the relevant child element or container.

Screenshot placeholder

Choose where a style appliesCopy Anchor Link

Style Scope determines which version of the element's styling you edit.

Non-Base styles override Base when their condition applies. Scopes with existing overrides show an indicator.

Choosing a viewport does not choose a style scope. Mobile in the bottom toolbar changes the canvas width; it does not automatically make your next edit mobile-only. Likewise, choosing dark in Style Scope edits the dark-mode override, rather than switching the whole preview into dark mode.

The scope applies to the style sections below it, not to the component's content fields above it. Editing a button label is not a breakpoint-specific copy change.

What the style sections controlCopy Anchor Link

Layout & PresetsCopy Anchor Link

Use quick presets for Block, Row, Column, Grid 2, Grid 3, Grid 4, or Container. These apply several layout settings together, so inspect the result after choosing one.

Detailed controls include:

• Display mode.
• Flex direction, wrapping, alignment, justification, and gap.
• Grid columns, rows, alignment, gap, and flow.
• Child column and row spans and self-placement.
• Position, z-index, overflow, and aspect ratio.

Use layout controls on a container when arranging several children. Use child placement on an item inside a flex or grid layout.

Spacing (Box Model)Copy Anchor Link

Use Box Model, Padding, or Margin views to adjust space around the selection.

• Padding creates room inside an element's boundary.
• Margin creates room outside it.
• Reset clears the selected scope's margin and padding overrides.

For example, increase section padding to separate its content from its background edges. Increase a heading's bottom margin to separate it from the paragraph below.

Size & DimensionsCopy Anchor Link

Adjust Width, Height, Min Width, Min Height, Max Width, and Max Height from the available choices.

Prefer flexible widths for text and content containers. Fixed dimensions can cause overflow or awkward wrapping at smaller viewport widths.

TypographyCopy Anchor Link

Supported text elements expose Font Family, Font Size, Font Weight, Line Height, Text Align, and Text Color.

Select the heading or paragraph itself when you want to change only that text. Check long headings on Mobile after changing font size or line height.

BackgroundCopy Anchor Link

Choose one of the available modes:

• Theme to remove the explicit background override and use the component's default background.
• Color for a solid background.
• Gradient for a linear gradient.
• Image for a background image, its display options, and an optional overlay.
• 3D Motion for an animated gradient.

Switching modes clears incompatible settings. If you move from an image background to a solid color, do not assume the image settings will remain available for a later switch back.

Borders & OutlineCopy Anchor Link

Adjust border width, radius, style, and color. Outline controls provide a separate width, style, and color.

Effects, Motion, SVG, and FiltersCopy Anchor Link

When supported, these sections expose:

Use effects sparingly around body copy and controls. A visible effect is not a substitute for a readable text/background combination.

Make a layout responsiveCopy Anchor Link

The bottom toolbar provides Desktop, Tablet (768px), and Mobile (375px) views. Desktop fills the available canvas width. Tablet and Mobile constrain the page to the labeled widths.

Example: stack cards on phones, use columns on larger screensCopy Anchor Link

1. Select the container that holds the cards.
2. Choose Base in Style Scope.
3. In Layout, use a single-column grid for the small-screen layout.
4. Choose md and set the grid to two columns.
5. If needed, choose lg and set three columns.
6. Switch to Mobile in the bottom toolbar and inspect the single-column result.
7. Switch to Tablet and inspect the two-column result.
8. Return to Desktop and check the layout at a wide browser size.
9. Return Style Scope to Base before unrelated general edits.

Screenshot placeholder

Breakpoints are minimum widths, not device names. The md override also applies at larger widths unless a later applicable override replaces it.

The three canvas sizes are review aids, not a complete device test. Check the saved page in a browser at intermediate widths too. Resizing a side panel is not the same as selecting a responsive breakpoint.

Edit the page's themeCopy Anchor Link

Click Page in the properties breadcrumb or deselect by clicking blank canvas space. The panel shows Project Theme with five tabs.

FlavorsCopy Anchor Link

Choose a coordinated design flavor as a starting point. A flavor can change several theme settings together. Choose it before fine-tuning colors and fonts, or review those choices again afterward.

ColorsCopy Anchor Link

Edit Light Mode and Dark Mode palettes separately. Available choices include background and foreground, card colors, primary and secondary colors and their foregrounds, accent, muted colors, border, input border, and focus ring.

The Light Mode and Dark Mode tabs choose which palette you edit. They do not themselves toggle the application's visible color mode.

Review foreground/background pairs together. A primary button needs a readable primary foreground in both modes; changing only the primary background can make its label hard to read.

RadiusCopy Anchor Link

Choose a corner-radius preset, from sharp to pill, or enter a custom base CSS value. Components that inherit the theme radius use that shared scale; local radius settings can override it.

FontsCopy Anchor Link

Choose heading, body/UI, serif, and monospace font families from the available font list. The Font Scale Multiplier ranges from 0.85× to 1.25×.

ElevationCopy Anchor Link

Choose a shared shadow preset, border width, and motion timing. Motion presets include Instant, Snappy, Smooth, and Gentle.

Screenshot placeholder

Understand shared theme changesCopy Anchor Link

Theme edits are part of the canvas document until saved. Saving a page also synchronizes its theme to the website's shared theme settings, which are used for public rendering.

Treat a theme change as potentially website-wide, not as an isolated change to one page. Review other pages after saving. Local element overrides can still take precedence, so a heading with its own font or color may not visibly follow a new shared choice.

TroubleshootingCopy Anchor Link

• A change affects more than expected: check the selected parent and Style Scope.
• A responsive change has no visible effect: check that the canvas or browser width reaches that scope's minimum width.
• The panel looks different: different components expose different fields and style groups.
• The color palette changed but one element did not: check its local color settings, including light and dark scopes.
• A layout clips on Mobile: inspect fixed widths, minimum widths, overflow, and the selected container's grid or flex settings.
• The separate Preview differs from the canvas: save first and confirm publication status. That preview reads saved public content.

Finish with the checks in Pages, settings, and publishing.