The Style Panel

The Style Panel refines the selected block or section after the theme and assigned preset have supplied the shared baseline. Work deliberately: confirm the selected element, preset, Style Area, breakpoint, and state before writing a local override.

Default state

Select a Text block and inspect the panel from top to bottom: the selected block, assigned preset, Style Area, Desktop/Tablet/Mobile breakpoint, then Default. Expand Spacing, Background, Borders, Typography, and Effects only as needed for the normal state.

Read Default in order

The header answers what is being styled; the controls below answer where and in which state.

Selected block, preset, and Style Area

Confirm the selected Text block first. The assigned preset supplies reusable values, while Style Area targets the whole block or a supported part. A local value overrides only that selected target.

Breakpoint

Start on Desktop. Inspect Tablet and Mobile before adding overrides; write breakpoint-specific spacing, sizing, or alignment only when the smaller composition needs it.

Spacing, Background, Borders, Typography, and Effects

Use padding for inset inside a bounded surface and margin for inline separation. Background defines the surface, Borders clarify its edge, Typography handles supported text values, and Effects provides restrained depth. Use section gaps and grid positions for layout spacing rather than oversized block frames.

On Hover state

Switch to On Hover only after Default is complete. Inspect the hover Typography, Effects, Transform, and Transition controls, and compare any available background or border change with the normal state before authoring motion.

Build one coherent hover signal

Use one clear change—a small color shift, border change, shadow, or lift—rather than stacking every available effect. Transform can translate or scale the target; Transition Duration and Timing control how the difference settles. Keep the target stable and easy to click.

Keep overrides disciplined

If the same treatment appears repeatedly, move it into a named preset. If it belongs to every block of that type, update the typed Default Theme. Keep a local override only when this composition genuinely needs the exception.

Responsive and accessibility checks

Hover is unavailable on some touch devices, so never hide meaning or the only affordance in On Hover. Verify keyboard focus separately, retain sufficient contrast, preserve safe padding at all breakpoints, and respect reduced-motion preferences.

Common mistakes

Styling the wrong block or Style Area; duplicating desktop values without a responsive reason; using margin or frame height as section whitespace; overwriting a useful preset locally; and adding transform without a restrained transition.

Quick check

Selected block confirmed. Assigned preset understood. Correct Style Area chosen. Default completed first. Tablet and Mobile inspected. Hover remains optional and accessible. Repeated values promoted to a preset. Real View tested.

Next steps

Apply these controls to one representative block, remove an unnecessary local override, then review Sections, Grid & Layers and Responsive Design to confirm that styling supports the complete composition.