Skip to content

Work / Trunk / Wiki / Surfaces

images-new

Surfacedraftverified 2026-10-21

SURFACE.WEB.STYLES.IMAGES-NEW

Summary

Draw a new image in Styles › Images: a free-size artboard with shapes, text and icons from Styles, coloured from the product's own Colors, saved to the draft as SVG.

Raw wireframe

  • .context/designs/web/styles/images-new.html

Why it is drawn this way

The icon editor's layout, not its grid — icons-editor. The artboard in the middle, the tools in the bottom toolbar, the name and settings in the inspector, Cancel and Save to draft at its foot. An image has no 24 px grid and no keylines: it has a size.

Size is a preset or Custom. 1200 × 630 (a social card), 1080 × 1080, 1440 × 900, or any width and height. The artboard is drawn at the zoom that fits, shown in the toolbar.

The tools: Move, Rectangle, Ellipse, Line, Pen, Text, and Place, which puts an icon or a logo from Styles on the artboard. The drawn example is a social card for chitragupt.ai: the Wordmark, the landing's headline and line, and a card with chart-pie and "New regime saves ₹12,400".

Each shape has its own fill and stroke, picked from the product's Colors; a custom hex is last, as everywhere in Edit. The background is a colour too. The picked shape shows its place, size and radius (from Radius) beside them.

Layers sit under the Styles groups, front first, as on a page in Edit — pages-layers.

Download gives SVG, or PNG at 1× or 2×. Save to draft puts it in Images as SVG, beside what was captured and uploaded; its inspector says From: drawn.

Only the screen itself is drawn. Nothing loads (the drawing is local until it is saved), a failed save is the editor's usual error, and Can view never sees New image, so there is no empty, loading, error or locked state.

Related

Sources

  • .context/designs/web/styles/images-new.html
  • The owner's instructions in the session of 2026-10-21.