FAQ pillars

A three-column architectural layout organizing questions by topic into vertical pillars. An introductory header band leads into three balanced domain columns (Architecture, Compliance, and Commercial). Each pillar is anchored by a 2px top border rule, an uppercase pillar label, a one-line orientation note, and three compact disclosure rows separated by hairlines.

Rather than a single flat list or broad horizontal bands, this pattern partitions inquiries into three equal-width columnar zones. Each column is distinguished by a top-anchored rule in currentColor, followed by an uppercase tracked category marker and a large pillar heading. Beneath each pillar heading, three concise core/details questions provide compact on-demand reading without dominating the vertical scroll height of the page.

• Night pillars. The colour inversion axis: contrast ground, base text, and all top rules and internal hairlines following in currentColor.

1. The pillar categories. Edit the three category titles (e.g. Architecture, Compliance, Commercial) to fit your product or service lines.
2. The questions. Three disclosure questions per pillar. Keep question copy concise so summary lines remain uncluttered.
3. The header. Tailor the section title and intro paragraph to your documentation scope.

• Typeface. Heading and body font families from your theme.
• Palette. base and contrast token fallback chains.
• Spacing presets. Standard spacing tokens (spacing|80, spacing|70, spacing|50, spacing|40, spacing|30, spacing|20).

• The three-pillar structure. Equal 33.33% column distribution.
• Pillar hierarchy. 2px top rule accent, tracked category eyebrow, large preset heading, and compact details rows.

All summary headings and body copy pass WCAG 2.1 AA contrast requirements against their respective backgrounds in both base and night variations.

• Three-column grid. Built with core/columns holding three 33.33% basis columns. Reflows responsively across desktop, tablet, and mobile views.
• Top border anchor. The pillar header uses a group with border-top-width: 2px and border-top-color: currentColor. It stays sharp and visible across both light and inverted dark modes without hardcoded hex values.
• Compact disclosures. Uses native core/details blocks with single-line summary questions and tight body typography, ensuring dense information density within each column track.