Site Design Overview

Site Design is the shared system behind every Luna Sites page. Theme colors and fonts establish the foundation; typed Default Theme treatments and named presets make it reusable; local Style overrides handle genuine exceptions; sections, responsive previews, the global Navbar and Footer, and workflow controls carry that system into layout and release.

Inspect the complete Site Design surface

Open Site Design and scan the palette, fonts, presets, spacing, scroll, and advanced areas. Notice that these controls set responsibilities for the whole project before any one page receives a local exception.

How the system fits together

Work from the broadest responsibility to the narrowest exception. Each layer should answer a different question.

Theme colors

Seven named roles—Background, Light 1, Light 2, Primary, Accent, Dark 1, and Dark 2—give sections, blocks, and presets a coordinated palette.

Fonts and typography

Global families and responsive base sizes establish the reading system. Content-type overrides refine that baseline only where a distinct editorial scale is needed.

Default Theme, presets, and local Style

The non-deletable typed Default Theme is the block-type baseline. Named presets are reusable variants for one block type. A local Style Panel value sits on top and should remain a composition-specific exception.

Sections and responsive previews

Sections own the grid, gaps, surface, child membership, and layer order. Desktop, Tablet, and Mobile previews reveal whether the composition preserves reading order, density, and usable controls.

Navbar, Footer, and publishing

The Navbar and Footer are global design surfaces. Page edits, global design changes, and workflow state are separate draft concerns; choose page publication or a coordinated full-site release only after the connected scope is ready.

A practical build order

1. Define the seven color roles. 2. Choose font families and responsive base sizes. 3. Review each typed Default Theme. 4. Add named presets for patterns that repeat. 5. Compose sections on Desktop. 6. Review Tablet and Mobile. 7. Add only necessary local overrides. 8. Verify Navbar, Footer, workflow state, and release scope.

Responsive and accessibility checks

Test contrast on the effective surface, semantic heading order, readable line length, keyboard focus, touch targets, hover alternatives, media crops, and navigation at all three breakpoints. A healthy system reduces one-off fixes instead of multiplying them.

Next steps

Continue with Theme & Color System and Fonts & Typography, then define Style Presets. Use The Style Panel only after those shared decisions are stable, and finish with Responsive Design before reviewing publishing workflow.