Blueprint Schema Reference

Top-Level Structure

{
  "version": 2,
  "theme": { ... },
  "kit": null,
  "generatedAssets": {},
  "sections": [ ... ]
}

Field	Type	Description
`version`	number	Schema version (currently `2`)
`theme`	object	Visual tokens for the entire page
`kit`	object \| null	Reserved for future use
`generatedAssets`	object	AI-generated images/assets
`sections`	array	Ordered list of page sections

Theme Object

All visual tokens for the page. Set once, affects all sections.

{
  "palette": {
    "bg": "#FFFFFF",
    "surface": "#F5F5FF",
    "accent": "#5B5BD6",
    "text": "#1A1A2E",
    "highlight": "#EEF0FF",
    "border": "#E5E5F0"
  },
  "fonts": {
    "display": "Inter",
    "body": "Inter, system-ui, sans-serif"
  },
  "borderRadius": "md",
  "spacing": "relaxed",
  "button": { "bg": "#5B5BD6", "text": "#FFFFFF", "radius": "full" },
  "typography": {
    "sectionHeadingSize": "clamp(1.6rem, 3vw, 2.25rem)",
    "sectionHeadingWeight": "600",
    "sectionHeadingTracking": "-0.01em",
    "bodySize": "0.9375rem"
  }
}

Palette

Token	Purpose
`bg`	Page background color
`surface`	Card/elevated surface color
`accent`	Brand accent, CTAs, links
`text`	Primary text color
`highlight`	Subtle highlight backgrounds
`border`	Border and divider color

Border Radius

Value	Effect
`none`	Sharp corners
`sm`	Subtle rounding
`md`	Moderate rounding (default)
`lg`	Pronounced rounding
`full`	Pill/circle shapes

Spacing

Value	Effect
`tight`	Compact layout
`normal`	Standard spacing
`relaxed`	Generous whitespace
`generous`	Maximum breathing room

Typography

Controls all headings and body text page-wide:

sectionHeadingSize — CSS clamp value for responsive sizing
sectionHeadingWeight — Font weight (400-900)
sectionHeadingTracking — Letter spacing
bodySize — Base body text size

Section Object

{
  "id": "hero",
  "type": "lx_hero",
  "variant": "editorial_minimal",
  "content": { ... },
  "settings": { ... },
  "tokens": { ... },
  "element_styles": { ... }
}

Fields

Field	Purpose
`id`	Unique identifier within the page
`type`	Component type (`lx_hero`, `lx_stats`, etc.)
`variant`	Visual variant of the component
`content`	Component-specific data (headlines, images, items)
`settings`	Structural config: height, background, spacing, anchor
`tokens`	Per-section CSS variable overrides
`element_styles`	Per-element inline CSS overrides

Customization Precedence (lowest to highest)

theme — page-wide defaults
tokens — CSS variable overrides for one section
settings — spacing, background, visibility, anchor
element_styles — per-element inline CSS
settings.customCss — arbitrary CSS, scoped to section

Settings Object

{
  "min_height": "90vh",
  "background": { "type": "animated", "animated": "blurry_gradient" },
  "spacing": { "top": "120px", "bottom": "80px" },
  "anchor": "hero",
  "customCss": "[data-lx-field='headline'] { letter-spacing: -0.04em; }"
}

Background Types

Type	Description
`solid`	Single color background
`gradient`	CSS gradient
`image`	Background image URL
`animated`	Dynamic animated background

Animated Backgrounds

Available values: blurry_gradient, aurora, particles, wave, mesh, noise, spotlight, ripple

Validation

Always validate blueprints before publishing. Validation checks:

All type values are registered components
All variant values exist for their type
Required content fields are present
Icon fields use valid lucide:name format

Available Component Types

Type	Description
`lx_navbar`	Navigation bar
`lx_hero`	Hero/banner section
`lx_stats`	Statistics/metrics display
`lx_value_props`	Value propositions grid
`lx_reviews`	Customer reviews/testimonials
`lx_cta`	Call-to-action section
`lx_footer`	Page footer
`lx_pdp`	Product detail page
`lx_product_accordion`	Expandable product details
`lx_product_carousel`	Product image carousel
`lx_guarantee`	Guarantee/trust badges
`lx_buy_box`	Purchase/add-to-cart widget

Blueprint Schema Reference

On this page