Fill and Contour Styles
Style any shape with three independent axes — Semantic Class, Outline, and Fill — directly from the top bar.
Every drawn shape carries three independent style axes: the Semantic Class (what the surface represents, such as Lawn or Paving), the Outline (the contour line), and the Fill (the face color, gradient, or photoreal material). When a Semantic Class is set, the Outline and Fill axes default to Semantic class mode — the class registry drives the look everywhere, including photoreal renders. You can override any single axis without touching the others, giving you control over how a shape looks in both the editor and photoreal output.
Open the style controls in the top bar
The three style buttons sit in the top bar, left of center. From left to right they are: Semantic Class, Outline style, and Fill style. Each button shows the current state of that axis as a swatch or label. Clicking any button opens its menu directly below the top bar. You can also access all three axes in the Style accordion inside the Inspector panel when an entity is selected.
Semantic Class — the design intent
The Semantic Class button in the top bar (leftmost of the three style buttons) opens a picker organized by family: Surfaces (lawn, gravel, paving, water…), Plants (tree, shrub, perennial…), Structures (fence, wall, pond, pool, deck…), and more.
Picking a class sets all three axes to 'Semantic class' mode and clears any explicit overrides, so the entity immediately renders the class defaults everywhere. The class also drives:
- Vegetation placement (where grass and wildflowers appear)
- Seasonal and weather effects (lawns green up in spring, water freezes in winter)
- Quantity and cost reporting (areas grouped by class)
- Design rules ('tree must be 1.5 m from water')
- Scripting queries (
garden.surfaceClass.at(…))
Parametric objects (pond, pool, deck, fence) receive their class automatically — you don't set it manually.
Picking 'Undefined' in the class picker removes the class. Each axis then falls back to its last custom value or the style painter's default.
Contour — the outline
The Contour button (middle of the three) controls the outline drawn around the shape's edge. Three modes:
- Semantic class — outline color and weight follow the Semantic Class defaults (same as what the class registry specifies). This is the default when a class is active.
- Custom — set your own color, width, stroke pattern (solid, dashed, dotted, dash-dot…), line cap, line join, and sketch style.
- None — no outline drawn.
The Contour flyout shows the current mode at the top as a radio group, then the custom detail fields when Custom is selected.
Use No contour on filled shapes where an outline would obscure close-tolerance edges, such as pavers that tile edge-to-edge.
Fill — the face color
The Fill button (rightmost of the three) controls the face color of the shape in the editor and in non-photoreal 3D. Four modes:
- Semantic class — fill color follows the class registry color (e.g. sage green for Lawn). Default when a class is active.
- Solid — a single color with optional opacity.
- Gradient — a linear or radial gradient between two stops.
- None — transparent face (outline only).
The Fill flyout has two stacked sub-sections:
Fill colors — the mode selector plus the color/gradient editor. Applies in the editor and in photoreal when Material is 'None'.
Photoreal material — an optional override for photoreal renders only. When set to 'Material', the photoreal engine ignores Fill and renders the admin PBR material you browse. When set to 'Semantic class', the class registry's PBR material is used. When 'None', the Fill color shows in photoreal too.
Photoreal material lives inside the Fill flyout because it is a fill — just for a different render context. The editor never renders the photoreal material.
The Style section in the Inspector
The Style accordion in the Inspector (Properties 2D tab) gives the full per-entity controls:
- Surface row — shows the current class chip and a picker to change it, with the source badge (From preset, Explicit override, From object type, etc.)
- Contour section — the same mode radio group as the flyout, plus all detail fields when Custom is selected
- Fill section — two sub-sections: Fill colors (mode + color) and Photoreal material (mode + browse)
Use the Inspector when you need fine-grained control — sketch style, arrow heads, gradient editor, or material scale and rotation.
Copy style between entities
Use the Style Painter tool (paintbrush icon in the toolbar) to copy all three style axes from one entity to others. Activate the tool, click the source entity to copy its style, then click target entities to apply. Hold Shift to apply to multiple entities without restarting.
The Format Painter button (next to the three style buttons in the top bar) is a shortcut: it pre-loads the style of the currently selected entity and switches to Apply Target mode immediately.
Format Painter copies all three axes together. If you only want to match the fill color, paste the full style and then re-set the Outline or Semantic Class on the target.
Picking a new Semantic Class resets the Outline and Fill axes to Semantic class mode and clears any explicit color or material overrides you have set. This is intentional — the class becomes the new authority. To keep a custom color, apply the class first, then re-open the Fill menu, switch to Custom, and set your chosen color in the Fill sub-section.
The Material sub-section inside the Fill menu (shown under Custom) applies only when rendering in Photoreal or AI render mode. It has no effect on what you see in the 2D editor or standard 3D view. Leave the Fill axis on Semantic class unless you need a specific material that differs from the class default.
Frequently Asked Questions
I applied a Semantic Class but my shape looks the same — why?
Picking a class resets the Outline and Fill axes to Semantic class mode and shows the class registry defaults. If the class color happens to be similar to what was already set, the change may look subtle. Try picking a clearly different class such as Lawn or Paving to confirm the axes have switched.
What does the Material sub-section do and when should I change it?
The Material sub-section (inside the Fill menu's Custom mode) controls how the shape looks in photoreal and AI renders only — it has no effect in the editor. With the Fill axis on Semantic class, the photoreal material configured in the class registry (such as a grass texture for Lawn) is used automatically. Switch to Custom and pick a material when you want a specific photoreal material yourself. Leave the material off to make photoreal renders use the same fill color shown in the editor, which is useful for presentation-style flat renders.
Can I use a custom fill color in the editor but the class material in renders?
Yes. Open the Fill menu, choose Custom, and set your color in the Fill sub-section. In the same menu, pick the class's photoreal material in the Material sub-section. The 2D and 3D editor show your custom color; photoreal renders use the chosen material.
What happens to my custom styles when I pick a new Semantic Class?
Picking any class from the Semantic Class picker resets the Outline and Fill axes to Semantic class mode and erases any explicit color, gradient, or material overrides you had set. The class is now the sole authority. To layer a custom override on top of a class, apply the class first, then re-open the Outline or Fill menu and switch the relevant mode to Custom.
How do Structure classes like Pond, Pool, and Deck differ from Surface classes like Water or Paving?
Structure classes (Pond, Pool, Deck, Fence, and so on) are assigned automatically to parametric wizard objects and represent the entire built assembly — a pool entity includes the water body, coping, and surround as one unit. You do not draw a Surfaces-family class polygon to make a pool. The Water surface class is for hand-drawn water-surface polygons such as a stream, reflecting pool, or water feature you define yourself.
Why does my shape's swatch in the top bar show the class color even though I have not set a fill color?
The Fill swatch in the top bar resolves the displayed color through the same cascade the editor uses when rendering. If a Semantic Class is set and the Fill axis is in Semantic class mode, the swatch shows the class registry color — not a blank or white swatch. This keeps the toolbar in sync with what you see on the canvas.