Section
The fundamental vertical division unit for page content. .section shares the same full width (--content-max: 1640px) as the header and footer, and each section boundary is marked by a 1px top hairline plus 80px of padding.
Default
Container max-width var(--content-max) = 1640px. Sections are separated by padding-top: 80px + a 1px top hairline. .section-title is 27px / 800 / ink-deep; lead text is 18px / 400 / body.
Section Title
Summarize the key message of this section in one or two lines. Natural line-wrapping within 70ch.
Subsection
Use this to divide content within the same section into sub-groups. .subsection-title — 21px / 800 / ink-deep, 1px outline box (transparent background). From the second instance onward, a 56px top margin lets the card itself act as a visual divider.
Main Section Title
Subsection A
Body text for subsection A.
Subsection B
Body text for subsection B.
Rules
Horizontal edge padding must be identical across the header, content, and footer. Do not define custom horizontal padding per page.
var(--content-max) = 1640px — matches the header and footer full width. Shared across all app pages.
padding-top: 80px + 1px top hairline (var(--c-line-soft)).
--chrome-pad: clamp(24px, 3vw, 48px) — the header, content container, and footer share the same horizontal margin so vertical alignment lines up perfectly.
Fixed 36px (≤640px). The header logo, content, and footer left-edges align precisely.
27px / 800 / var(--c-ink-deep). Color is always ink-deep — never primary.
18px / 400 / body, line-height: 1.7, max-width: 70ch. Never use <br> for lead line-breaks — let the container width wrap naturally.
21px / 800 / ink-deep, 1px outline box (transparent background), padding 18px 24px, radius 12px. From the second instance onward, margin-top: 56px.
Follows global tokens automatically — [data-theme="dark"] overrides handle everything. Do not re-paint colors component-by-component.