Use primitives the user can inspect.
Lucra layers are not decoration names. They are responsibilities an editor, agent, or teammate can inspect: frame the section, align the content, arrange the children, or create the visible plane.
Layer tree
Wrapper owns frame
Clear responsibility keeps the page tree easier to inspect and edit.
Container owns width
Clear responsibility keeps the page tree easier to inspect and edit.
Flex and Grid own layout
Clear responsibility keeps the page tree easier to inspect and edit.
Show the feature as a working surface.
A Lucra feature page should present the product model with enough detail to feel usable: panels, states, layer choices, and the tradeoffs a builder would understand.
Layer tree
Wrapper owns frame
Clear responsibility keeps the page tree easier to inspect and edit.
Container owns width
Clear responsibility keeps the page tree easier to inspect and edit.
Flex and Grid own layout
Clear responsibility keeps the page tree easier to inspect and edit.
Layers
Page
Layer model
Model
Theme and layers
System
Wrapper frames the band; Container owns readable width.
Flex handles one-axis rhythm; Grid handles peer layout and responsive columns.
Surface creates the visible plane for cards, panels, frames, and grouped content.
Theme, layers, and agent guidance belong together.
Lucra's edge is strongest when the visual system, page structure, and local agent instructions all point to the same build model.
Theme
Set the system for color, type, rounding, forms, and color modes.
Layers
Keep each section readable as Wrapper, Container, Flex, Grid, Surface, and content.
Agents
Let local tools learn the public contract before API-backed Studio writes exist.
Plan a Lucra site review.
This form uses native validation for the local marketing test. It keeps the form pattern visible without pretending a backend has been wired here.