Design a site with sections and themes

Most sites don't need hand-written HTML. Instead, a site can be described as site.json - a small file listing which theme to use and which sections go on each page. The assistant can build one for you, or you can hand it a site.json directly.

Themes

Six built-in themes, each a complete, accessible visual style - colors, type, spacing, and small touches per section:

Every theme meets accessibility contrast guidelines for body text and supports keyboard navigation and reduced-motion preferences out of the box.

Sections

A page is a list of sections, each with its own purpose:

• Hero - the top banner: headline, subhead, and a call to action.
• Features - a grid of feature cards.
• Pricing - a row of plan cards.
• Testimonials - a row of quote cards.
• FAQ - a collapsible list of questions and answers.
• Contact - a form that becomes a lead, same as any other site form.
• Cta - a full-width call-to-action banner.
• Gallery - a grid of images.
• Team - a grid of team member cards.
• Stats - a row of big numbers.
• Richtext - free-form copy, written in a small set of Markdown formatting.
• Blog index and Blog post - together, these turn a folder of Markdown posts into a blog with a listing page and one page per post.

Each section keeps its own copy and images - ask the assistant to change a headline, add a plan, or reorder sections, and only that piece changes.

Building one

Tell the assistant what kind of site you want ("build me a site for my bakery" or "give my SaaS product a pricing page"). It picks a theme that fits, chooses sections, and writes the copy from what you've told it about your business. You can also start from a theme yourself in Settings › Sites, on a site that doesn't have a design yet.

Raw HTML files stay fully supported alongside a site.json - anything a site.json doesn't cover (an extra page, an asset, a script) publishes exactly as written.

Blogging

Put Markdown posts in a content/blog folder inside the site (one file per post, with a title, date, and short description at the top). Add a blog listing section to whichever page should show the blog, and a blog post section to the page that should become each post's layout. Publishing turns that folder into a listing page and one page per post automatically - draft posts are skipped until you're ready.

Example

A minimal one-page site, in the shape the assistant writes:

{
  "version": 1,
  "theme": "ledger",
  "brand": { "name": "Acme Co", "tagline": "Software that just works" },
  "nav": [{ "label": "Home", "path": "/" }, { "label": "Contact", "path": "/#contact" }],
  "pages": [
    {
      "path": "/",
      "title": "Acme Co",
      "sections": [
        { "id": "hero", "type": "hero", "headline": "Do great work, faster", "primaryCta": { "label": "Get started", "href": "/#contact" } },
        { "id": "features", "type": "features", "headline": "Everything you need", "items": [{ "title": "Fast", "body": "Built for speed." }] },
        { "id": "contact", "type": "contact", "headline": "Get in touch", "fields": ["name", "email", "message"] }
      ]
    }
  ],
  "footer": { "text": "© 2026 Acme Co" }
}