Component library

Every page you build in the Pages studio is assembled from a curated component library. The agent never writes HTML or CSS — it arranges these named sections, and each one is individually designed and reskins automatically from your brand. The set is deliberately broad: you can build a marketing site, a company site, or a news/blog site from it without custom components.

Sections

Sections stack top to bottom to make a page. You ask for them in plain language ("add a pricing section", "put testimonials after the features") and the agent places them.

Opening and structure

• hero — the top-of-page opener, the only full-viewport section. Centered or split with an image. Open every page with one.
• logos — a quiet row of partner or customer logos for instant "trusted by" credibility.
• divider — a light separator between sections: a rule, breathing space, or a small centered label.

Telling your story

• content — a prose block paired with an image (or text-only). Alternate the image side as you stack these.
• markdown — a block of long-form body text you author in Markdown (headings, lists, links, bold/italic, blockquotes), rendered with a reading-optimised prose measure. Reach for it when you have free-form formatted copy that no structured section models.
• features — a heading plus a grid of feature cards with icons.
• stats — a row of headline numbers for social proof.
• gallery — a grid of images.
• image — a single standalone image with an optional caption (a figure). Reach for it to place one picture on its own — a screenshot, photo, diagram, or chart — when content (image with text) and gallery (a grid of images) don't fit.
• banner — a short, bold full-width statement band.

Building trust

• testimonials — customer quotes, one strong quote or a grid of several.
• team — the people behind the company, with head-shots, names, and roles.
• faq — frequently-asked questions in an expand-to-read list (plain-text answers).
• accordion — an expand-to-read list whose panels hold rich content (formatted copy, lists, links — and a figure), not just plain text. Each panel can mix Markdown text and a single image. Reach for it for layered detail — documentation, how-tos, spec breakdowns. Set it to open one panel at a time, or allow several at once.

Converting

• pricing — plan tiers side by side, with one tier highlighted.
• newsletter — an email sign-up band.
• cta — a closing call-to-action band. Close every page with one.

Layout

• grid — a bounded grid of equal card tiles. Reach for it only when no named section fits — for example a set of resource links or related items. You set the number of columns and the tiles reflow.

How sections stay consistent

• Tone — every section accepts a tone (default, muted, brand, inverted) that picks its surface colour from your brand. Adjacent sections alternate automatically so a page never blurs together.
• Columns — grids (features, gallery, team, pricing, the grid container) take a column count; the items reflow responsively on smaller screens.
• Variant — some sections offer a named arrangement, such as a centered or split hero, or a left/right image on a content section.
• Inline formatting — longer text fields (a subheading, body copy, a bio, quote, answer, pricing description, or caption) accept light Markdown: links [text](url), **bold**, *italic*, and `code`. Just ask for it ("link Oxford to their site") and the agent writes it in. Short labels (headings, button text, names) stay plain.

Because the palette is curated and every option is a good one, any page the agent composes looks designed — on your brand, every time.