Resource

Change the system before the layer.

Use semantic tokens for background, foreground, surface, border, brand, primary, secondary, and accent. Treat color, typography, rounding, forms, gradients, and breakpoints as broad decisions. Do not use status colors as decoration.

Layer tree

Colors
Typography
Radius
Forms
Modes
Theme system
Responsive route
Light and dark mode

Theme tokens

Light and dark together

Change the system, then check both modes before local overrides multiply.

GuideAgent-readableStudio-safe

Change the system before the layer.

Use semantic tokens for background, foreground, surface, border, brand, primary, secondary, and accent. Treat color, typography, rounding, forms, gradients, and breakpoints as broad decisions. Do not use status colors as decoration.

1

Use semantic tokens for background, foreground, surface, border, brand, primary, secondary, and accent.

2

Treat color, typography, rounding, forms, gradients, and breakpoints as broad decisions.

3

Do not use status colors as decoration.

Agent instruction shape

Ask the agent to name the guides it read, the Lucra layer responsibilities it used, and the verification it ran.

Keep the output reviewable. The current guide path improves local work; authenticated Studio writes belong to the Agent API roadmap.

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.