Style Guide

The page title above is the H1 specimen. Use one H1 per page, then ordered section headings. Headings, paragraphs, lists and links have shared tag defaults. Figure and caption specimens demonstrate semantic structure and inherit the surrounding typography; section classes can supply a purposeful local type scale.

Keep ordinary page content centered within a 1440px outer container, including 40px desktop or 24px tablet and phone gutters. Limit normal body paragraphs to about 60ch and article or documentation prose to 65ch. Never stretch paragraphs or FAQ answers across a whole page. Keep FAQ introductions beside a bounded question list on desktop and stack them on smaller screens. Images may fill their own visual frame while text keeps its reading measure. Every subpage uses one top-aligned, equal two-column hero. Keep the orange 12px monospace pre-heading and H1 together on the left; place supporting copy, actions and dates on the right. Use Archivo at clamp(48px, 5.5vw, 88px), weight 900 and 100% line height for H1, with a 40px phone size. Keep 24px between pre-heading and title, 64px between desktop columns, and stack left before right on phones. Hero content begins at 160px on desktop, 128px on tablet and 112px on phones. When a hero includes a photograph, place it below both text columns and span the full width of the centered content container. Keep the existing caption or route strip with its image. Use a 2:1 crop on desktop, 16:9 on tablet, 3:2 on mobile landscape and 4:3 on mobile portrait. Leave 64px between desktop text and media, and 40px on smaller screens. Image-free pages use the same text header without an empty media row. Preserve the established animation targets and motion settings. Subpage section headings retain their 40–64px desktop scale, 48px tablet, 40px mobile landscape and 36px mobile portrait. Body Size stays 18px, Label Size 12px and Card Size 40px. Reuse shared native variables and scoped layout roles when extending the site.