Shared patterns for Solace AGI pages. This page is the live reference for splash images, buttons, cards, copy blocks, and visual tokens.
Canonical hero image container: <section class="splash-image"><picture class="splash-image__asset">...</picture></section>
Canonical media/text split for product explanation sections. On mobile, the image stacks above the copy and expands to the full card width.
Framework Pattern
Use this for sections where the artwork explains the concept, but the copy still carries the detailed meaning. The image column stays visually anchored on desktop and becomes a full-width stacked row on mobile.
Pricing
Plan cards, comparison table, and public-friendly purchase framing.
Papers
Public rewrites, local source files, and linked source provenance.
Analytics
Headline metrics, DataTables-backed grids, and amCharts visuals.
Use for core product benefits, capability descriptions, and conceptual sections.
Pricing Card
$8/month
Managed LLM routing with cloud sync and evidence retention.
Highlight Box: Use for TL;DR legal callouts, strong notices, and compact emphasis copy.
| Surface | Library | Mode |
|---|---|---|
| Analytics | amCharts | Chart |
| Papers | DataTables | Catalog |
| Pricing | DataTables | Comparison |
Content text is the base long-form reading style for product and technical explanation.
Section intro is for broader summaries that need more presence than body copy but less weight than a heading.
Hero subtitle is reserved for first-fold value framing under the main heading.
