amadalis Apply to Lighthouse

BUILD · THE COMPOSER · SECTIONS AND THEMES

Typed sections. Named values. Your CSS.

Every Praxis page is made from a catalog of typed sections, and every site's look from a theme: a named set of design values that becomes the site's CSS. This is the whole catalog, as of October 2026.

Apply to the Lighthouse program Back to the Composer
Every figure on this page is as of October 2026.
Site, Catalogs, Sections on our own site: the library of 40 section types by group, the Hero type selected with its rendered preview, its Light and Dark switch and its fields.
The Sections library
Site, Catalogs, Themes on our own site: 73 themes in ten families (Executive, Editorial, Warm, Toned down, Happy, Brilliant, Elegant, Tech, Minimal, Brutalist / raw), each card with its type, button and colours, its modes and Review and activate.
Site, Catalogs, Page types: the Home / Marketing page type open, its label, default theme, description, Available to the copilot, and its recipe of sections in order: Hero, Logo cloud, Features and more.
A page type’s recipe
On this pageThe catalog
  1. The catalog
  2. The catalog, in figures
  3. 40 section types, each with its own fields.
  4. Rows and layouts
  5. Embeds
  6. Pre-filled sections and patterns
  7. Page types
  8. Themes
  9. Tokens
  10. How a theme becomes CSS
  11. Contrast
  12. Fonts
  13. What keeps it safe
  14. Common questions

The catalog

The catalog, in figures

40section types, 38 of them yours to insert
12elements inside layouts
196pre-filled sections
132patterns: 76 for sections and 56 whole-page templates
29page types
72themes in 10 families, each in light and dark
43self-hosted font families
29site templates, one of them blank

Counted from the product, as of October 2026, and counted again on the day this page is published.

The sections

40 section types, each with its own fields.

The section's own words, from the catalog, grouped by what it is for.

Openings and statements.

"Hero": a headline with optional buttons and media, in left, centred or split layouts, five tones, a picture, layered pictures or a background video. "Banner": a slim announcement bar. "Call to action": a prompt with one or two buttons. "Footer CTA": the page's final ask. "Rich text": standard long-form content.

What you offer.

"Features": a grid of feature cards in two, three or four columns. "Image & text": an image beside its copy, either side. "Stats": a row of headline figures. "Pricing": plan cards you write by hand. "Comparison table": up to three offerings, feature by feature. "Timeline / steps": a numbered process or a dated timeline.

Proof and people.

"Testimonials": a grid, or one quote in the spotlight. "Logo cloud": a row of logos, or a slow marquee that respects reduced motion. "Team": a grid of people. "Gallery": a set of images. "Video": a video hosted on your own site, played in the page. It carries a captions track, follows the visitor's reduced-motion setting and takes more than one source file. Coming soon. "FAQ": questions and answers that open as visitors need them.

Content that keeps itself current.

"Blog teaser": hand-picked post cards. "Live list": your own content, chosen by a query and drawn fresh every time the page is served.

The experience layer.

"Recommendations": items ranked for each visitor by the affinity engine, with your own fallback order. "Live offer": a quiet slot that an approved, time-boxed offer can reveal while the visitor is on the page.

Forms and selling.

"Form": a native form with stored submissions. "Newsletter signup": an email band backed by a native form. In both, you choose the form by name from a list. Coming soon. "Members-only boundary": where the members-only part of an article starts, or ends. "Shopify product": one product from your Shopify store, sold on this page, with its checkout on Shopify. "Services": services from your business, with their current details and prices, chosen and arranged in the Services editor.

Layout.

"Row (columns)" and "Layout", described below.

For developers and migrations.

"Custom field": a visible slot backed by one of your typed custom fields. "Script & event binding": your own JavaScript on the page, at load or on a listener, publishing with the page. "Embed / preserved HTML": markup carried over from a migrated site, kept as it was and flagged for review; no one can insert it.

Rows and layouts

  • "Row (columns)" is the structural row that migrations arrive in, and it holds nine children: text, heading, image, button, icon, social icons, list, rating and divider.
  • "Layout" is a row of columns you fill with 12 elements: heading, rich text, image, button, icon, icon list, icon box, image box, video, embed, divider and spacer.
  • Columns sit on a 12-unit grid, with separate widths for desktop, tablet and phone.
  • The video element plays YouTube or Vimeo by its id, inside a layout column.
The Composer's tablet view of a Layout section on a draft page of ours: its two columns stacked, the heading, text and button of the first above “Add to the end of column 1”, and the second column below.

Embeds

  • The embed element takes a closed list of ten providers, each in a sandbox: Google Maps, four kinds of Spotify player, posts from X, TikTok, Google Calendar, Instagram and Calendly.
  • Only a person can place one. The copilot never does.

Pre-filled sections and patterns

  • 196 pre-filled sections, each with its settings already filled in, ready to drop onto a page.
  • 132 patterns: 76 section patterns and 56 whole-page templates, among them a changelog page. The templates and four of the section patterns arrange several sections at once.
  • All of them sit in the Composer's insert browser, with real previews, and in the Catalogs' "Pre-filled", "Patterns" and "Page templates" tabs.

Page types

  • 29 page types, each with its recipe, the sections it allows, its intake questions, and whether the copilot may use it: Home / Marketing · Landing page · Product page · Pricing page · Services / Features · Service detail · How it works · Comparison / alternatives · Integrations & partners · Case study · Customer stories / social proof · Portfolio / work · Project detail · Profile / About · Team / people · Careers · Job posting · Contact page · Booking / appointments · Blog / news index · Blog post · Changelog / release notes · FAQ / help · Event / conference · Coming soon / waitlist · Thank you / confirmation · 404 / not found · Legal / policy · Collection index.
  • An Admin can create a page type, or change one, on Site › Catalogs › "Page types".
  • The site's own not-found response uses the page built from the "404 / not found" page type, drawn by the theme when none is built. Coming soon.

Themes

  • 72 themes in ten families: Executive, Editorial, Warm, Toned down, Happy, Brilliant, Elegant, Tech, Minimal, and Brutalist / raw. Every theme comes in light and dark.
  • Each shipped theme is tested for contrast in every mode, and for being distinct from the others.
  • The Theme Studio edits a theme on seven tabs: "Colors", "Typography", "Spacing", "Radius & shadows", "Layout", "Modes" and "Developer". The Developer tab shows the theme's values as JSON. The Studio previews the theme on a specimen page.
  • "Review and activate" shows every value that will change, and its undo restores the previous theme. A theme's values, and its contrast audit, can be exported.
  • Saving or deleting a theme carries an undo too. Coming soon.
Site, Catalogs, Themes on our own site: 73 themes in ten families (Executive, Editorial, Warm, Toned down, Happy, Brilliant, Elegant, Tech, Minimal, Brutalist / raw), each card with its type, button and colours, its modes and Review and activate.

Tokens

67 named values.

29 colour roles; four font roles; seven type sizes; three weights; line heights; heading letter spacing and the type ratio; eight spacing steps; four corner radii; three shadows; and five layout values.

Any colour, exactly.

Any colour value you name is accepted; only unsafe characters are refused.

A standard format.

The theme engine reads values in the W3C design-token format.

Layers, in order.

A theme stacks its base, then a preset, then the mode, then your own overrides.

References that resolve.

A value can point to another, such as {color.primary}, and the engine checks every reference for loops and for the right type.

Nothing unsafe.

Raw CSS that is not safe is refused, and the same theme always produces the same output, sorted by path and name.

How a theme becomes CSS

  • On every request, the site's active theme is resolved and written into the page as CSS variables, in one rule at the root of the page.
  • Headings one to six are sized from the theme's type ratio, and content is held to the theme's maximum width.
  • A visitor can switch the page between the theme's modes with ?themePreset=, for example light and dark.
  • The visitor's light or dark choice is remembered from page to page, with the system preference and no flash. Coming soon.

Contrast

  • Every shipped theme, in every mode, is held to WCAG contrast floors before it ships: 4.5 for body text, and 3.0 for large and secondary text.
  • The Theme Studio runs the same 16 checks live, as chips that warn and never block, so you can see the cost of a choice before you make it.
  • In the Composer, choosing a background suggests the theme's paired text colour.

Fonts

  • 43 families, served from your own site: Archivo · Atkinson Hyperlegible · Barlow · Bitter · Bricolage Grotesque · Chivo · Cormorant Garamond · Crimson Pro · DM Sans · DM Serif Display · EB Garamond · Figtree · Fraunces · Fredoka · IBM Plex Mono · IBM Plex Sans · Instrument Serif · Inter · JetBrains Mono · Jost · Karla · Lato · Libre Baskerville · Libre Franklin · Lora · Manrope · Marcellus · Newsreader · Nunito · Outfit · Playfair Display · Public Sans · Roboto Serif · Rubik · Sora · Source Sans 3 · Source Serif 4 · Space Grotesk · Space Mono · Spectral · Syne · Work Sans · Zilla Slab.
  • Each one is cut to the Latin range, each file is held to at most 90 kilobytes, and its source, licence and checksums are recorded and checked. Each family ships its upright faces, and the browser draws the rare italic.
  • Because they are served from your own site, your pages make no requests to an outside font service.

What keeps it safe

Typed fields only.

Every section and element has declared fields, and styling is one typed field, never a pasted style string.

No raw HTML from anyone.

The preserved-markup section exists for migrated content and cannot be inserted.

Embeds in a sandbox.

Ten providers, placed only by a person.

Unsafe CSS refused.

The theme engine refuses unsafe values and resolves every reference with checks.

A theme change you can see first.

"Review and activate" lists every value that will change, and its undo restores the old theme.

Contrast held before shipping.

Every shipped theme meets the floors in every mode.

Common questions

Can I use my brand's exact colours?

Yes. Any exact colour is accepted in every colour role.

Can I bring my design tokens?

The theme engine reads the W3C design-token format, and the Theme Studio's Developer tab shows each theme's values as JSON.

Are the themes accessible?

Every shipped theme is held to WCAG contrast floors in every mode, and the Theme Studio warns you live when a choice falls below them.

Do the fonts load from Google?

No. All 43 families are served from your own site.

Build with the whole catalog.

As a Lighthouse customer, you build a real site from these sections and themes, and tell us which ones to make next.

Apply to the Lighthouse program Already a customer? Sign in

This site records the pages you visit and how you found it so it can learn what visitors find useful, and uses the pages you read to tailor and test what it shows you.

These buttons need JavaScript, which is not running on this page.