Skip to content

The Design panel

Select an element and the Design panel (right side) gives you everything to style it, grouped into sections.

DesignSIZEWFillHAutoLAYOUTgap 16FILLBlue / 700RADIUSEFFECTSShadow · BlurSize — Fixed · Fill · Fit content · %Layout — Stack / Grid · gap · paddingFill — a colour token, or a one-off hexRadius · opacity · borderEffects — shadow & blur
Every element's styling, grouped into collapsible sections — Size · Layout · Fill · Radius · Effects and more.
  • PositionNone (in flow) or Absolute, with Framer-style constraints (pin to edges / center / scale) when absolute.
  • Size — Width and Height as Fixed, Fill, Fit content or %, plus Min / Max and the container width cap.

For containers: Stack (flex) or Grid, direction, gap, padding, margin, alignment, and wrap. Grid adds columns/rows and per-child span.

Fill (solid / gradient / image), border, radius, opacity, visibility. Colours open a themed picker — reference an Assets colour token instead of a one-off value so your whole design stays consistent.

Shadows and blur (Effects), 2D/3D transform, cursor, and scroll behaviour — each behind its own section so the panel stays compact.

See Responsive design for per-breakpoint overrides.