Shape & Vector Layers

Shapes are the quiet workhorses of most designs — backgrounds, dividers, accent blocks, buttons, badges. They're rarely the first thing anyone notices, but they're usually doing the structural work that makes a layout hold together. In Lega, shapes are ordinary vector layers: precise, resizable, and restylable, not baked into a flattened image.

Available shape tools

The bottom toolbar (data-testid="bottom-tool-rect", bottom-tool-circle", bottom-tool-polygon", bottom-tool-path", bottom-tool-line") gives you five shape primitives — depending on screen space, some may sit in a flyout menu rather than the main bar:

• Rectangle — the most common shape layer; used constantly for backgrounds, color blocks, and buttons. Supports independent corner radius for rounded variants.
• Circle — full circles or ellipses depending on how you drag; common for avatars, badges, and decorative accents.
• Polygon — configurable-sided shapes (triangles, pentagons, hexagons, and beyond) for geometric accents.
• Path — freeform vector paths for custom outlines that the built-in primitives don't cover.
• Line — straight or multi-point lines, useful for dividers, underlines, and connecting elements.

Select a tool, then click or drag on the canvas to place the shape. Like every other layer type, shapes land in the layers panel and can be renamed, reordered, hidden, or locked from there.

Styling shapes

With a shape layer selected, the Properties panel exposes:

• Fill — the data-testid="fill-color-picker" control supports solid colors and gradients.
• Stroke — the data-testid="stroke-color-picker" control sets an outline color, with adjustable width, independent of fill.
• Corner radius (rectangles) — from sharp corners to fully rounded, applied per-corner or uniformly.
• Opacity — standard transparency control, useful for layering tinted shapes over images or other shapes.

Because shapes are vector, none of this styling is destructive — you can restyle a shape any number of times without any loss of quality, unlike adjusting a rasterized element.

Resizing and transforming

Shapes resize from their selection handles the same way any other layer does, and support rotation. Polygon and path layers additionally let you adjust their underlying point geometry for more specific custom outlines, rather than being limited to a bounding-box resize.

Shapes as structural layout tools

A lot of what makes a layout feel "designed" rather than just "text on a background" comes down to shape work that's easy to overlook:

• A subtle rectangle behind a headline to guarantee contrast against a busy background.
• A thin line to separate sections without adding a hard visual break.
• A colored circle or polygon as a background accent that gives an otherwise flat composition some depth.

When Lega generates a layout via AI, it's making exactly these kinds of structural shape decisions as part of the composition — they're not an afterthought layered on top, they're part of how the layout gets built in the first place.

Shapes vs. decorative layers

Shapes are precise, editable geometry that you place and size deliberately. Lega also has a separate layer type — decorative layers — for procedurally generated ornamental patterns like sunbursts, halftones, and scatter effects. The distinction is worth knowing: reach for a shape when you need exact control over a specific piece of geometry (a button background, a divider at a precise position), and reach for decor when you want a generated pattern or texture that would be tedious to build by hand with individual shapes.

Grouping shapes

Shapes that function as a single visual unit — a badge made of a circle plus a border ring, for instance — are good candidates for grouping so they move, resize, and restyle together. See Layer Groups for how group-relative positioning works once shapes are combined this way.