Theme

Set the visual system before local styling.

Theme is where broad visual decisions belong. It gives pages a shared system for color, type, radius, forms, gradients, breakpoints, and color modes.

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.

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

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.

Theme

Page

Theme system

Model

Theme and layers

System

Set semantic colors before repeating local color choices.

Pair typography, rounding, forms, icons, and gradients with the visual system.

Check light and dark together before shipping a new site direction.

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.