Financial Report Layout

Updated 2 weeks ago

Live preview

masthead

narrow-table

wide-table

section-banner

subtotal-row

total-row

line-gutter

theme-statement

Components · Paper
8 variants Tokens-backed WCAG 2.2 AA target

A print-first (WeasyPrint) proforma / projection dashboard document register — letter-landscape, dense, with tinted semantic-row fills and a single navy section banner. Extracted verbatim from a delivered financial-report deliverable, it lays out multi-period projections at up to eleven columns per table. One of six templates in the Paper document-family register.

Rendered from components/financial-report-layout/recipe.json

What this template is

Financial Report Layout is a print document register, not a screen widget. It describes the page geometry, rule-weight usage, typography, and semantic-row treatment of a real proforma / projection dashboard as it prints through WeasyPrint to a letter-landscape PDF.

It is a sibling of, not a synonym for, Financial Statement (year-end). The two share the Paper pillar's rule-weight ladder and pagination discipline but diverge deliberately on three axes recorded in the recipe:

AxisFinancial Report LayoutFinancial Statement (year-end)
Page geometryLetter landscapePortrait
DensityUp to 11 period columns per wide tableUp to 3
ToneTinted semantic-row fills + navy bannerPure black-on-white

Reach for this template when the deliverable is a forward-looking projection dashboard that must show many periods side by side. For a statutory, compliance-register financial statement, use the year-end sibling instead.

Two internal themes

The register ships two themes. They are not equally final — treat this distinction as load-bearing.

  • dashboard — the delivered, real theme. Tinted total/subtotal/banner rows, a navy section banner, system-ui type, and the on-screen line-number gutter. Every token value here is production-grounded.
  • theme-statement — a PROVISIONAL classic-compliance theme: serif stack, no fills, a single-then-double rule convention. Its token values (*-statement-theme) are gated on not-yet-implemented proforma-engine work (BRIEF-bencal-proforma-engine-recapitalization.md). Do not treat the statement theme as final or commit its values as canonical without re-verifying against the engine once it lands. See Provisional surfaces below.

Variants

The register defines eight variants. Each is a real structural element of the delivered document — never invent a ninth.

VariantRole
mastheadH1 + draft-status line + BCSC-compliance footer scaffold.
narrow-tableInput / summary-metric tables — few columns.
wide-tableMulti-period fixed-layout table — up to 11 data columns; label column 25% (dashboard) / 22% (statement-theme bundle, provisional).
section-bannerFull-width navy-ink section header row (row-banner-bg fill, row-banner-ink text — the only colored text in the family).
subtotal-rowSubtotal row — tinted fill + top hairline rule.
total-rowTotal row — stronger tint + top standard rule.
line-gutterJS-injected line-number gutter, Courier New, 32px — dashboard / screen only; absent from the print (WeasyPrint) output and from the statement theme entirely.
theme-statementPROVISIONAL classic-compliance theme — serif stack, no fills, single-then-double rule convention. Gated; not equally final to dashboard.

Page geometry

The dashboard theme prints letter-landscape with margins driven by two tokens:

  • {paper.semantic.financial-report-layout.page-margin-inline} — inline (left / right) margin.
  • {paper.semantic.financial-report-layout.page-margin-block} — block (top / bottom) margin.

In the Paper pillar's document-families table, this register's margin is recorded as 2cm inline, 1.5cm block — a landscape geometry distinct from the year-end sibling's portrait page.

Page numbers run @bottom-right as a standard running counter. This is a deliberate divergence from the year-end register's @bottom-center, Notes-only convention — both are correct for their own family and are not drift to reconcile (recipe oq-2).

Rule-weight ladder usage

Financial Report Layout draws from the Paper pillar's four-step rule-weight ladder — hairline 0.5pt · light 0.75pt · standard 1pt · emphasis 1.5pt — rather than defining its own weights. Its row treatments map onto that ladder as follows:

  • subtotal-row — tinted fill plus a top hairline rule ({paper.semantic.financial-report-layout.row-subtotal-rule}, dashboard theme).
  • total-row — a stronger tint plus a top standard rule ({paper.semantic.financial-report-layout.row-total-rule}, dashboard theme).
  • The shared hairline-rule token ({paper.semantic.financial-report-layout.hairline-rule}) carries key-line borders throughout.

The statement theme replaces these with its own single-then-double rule convention through three provisional tokens — subtotal-rule-statement-theme, total-rule-statement-theme, and total-rule-bottom-statement-theme — whose values are gated (see below).

Typography per section

SectionFaceNotes
Body (dashboard theme)system-uiThe register's default reading face; see the Paper families table.
section-banner textNavy banner ink{...row-banner-ink} — the only colored text anywhere in the family.
line-gutterCourier New, 32pxMonospaced line numbers; screen-only, aria-hidden.
Body (statement theme)Serif stack — PROVISIONALExact stack is gated on the proforma engine (oq-1).

Semantic-row fills and inks

The dashboard theme's colour is confined to a small, deliberate set of tokens. Every fill is paired with a weight or rule treatment so colour is never the sole signal (see Accessibility):

TokenApplies to
{...row-total-bg}Total-row fill (stronger tint).
{...row-subtotal-bg}Subtotal-row fill (lighter tint).
{...row-banner-bg}Section-banner fill (navy).
{...row-banner-ink}Section-banner text — the family's only colored text.
{...ink-primary}Primary body ink.
{...ink-secondary}Secondary / supporting ink.
{...ink-hairline}Hairline-rule ink.
{...ink-gutter}Line-number gutter ink (screen only).
{...column-label-width}Label column width — 25% dashboard / 22% statement (provisional).

Full token detail for all seventeen leaf tokens: Tokens — Paper tier.

Accessibility

Because this is a print artifact, accessibility here means tagged-PDF structure and print contrast, not keyboard or focus behaviour. The recipe carries real aria and wcag guidance:

  • Table semantics. Wide tables use <table><caption> naming the reporting period range, so a screen reader reading the tagged PDF announces the span a table covers. Section-banner rows use <th scope="colgroup"> where they span the full table width.
  • Presentational gutter. The line-number gutter is aria-hidden — it is decorative and carries no data relationship, so it is excluded from the accessibility tree.
  • WCAG 2.2 AA target. The recipe records a 2.2 AA target with the note that the dashboard theme's tinted semantic rows (total / subtotal / banner) are never colour-only differentiators — each also carries a distinct font-weight and rule treatment, so the total / subtotal / banner distinction survives greyscale printing and colour-vision differences.

Print output and motion

This is a print-first static document. The dashboard theme also renders on-screen, where the line-gutter feature appears; there are no interactive states beyond that. The gutter is the one element that exists on screen but not in the WeasyPrint PDF — everything else is identical between the two surfaces.

Provisional surfaces and open questions

Two items from the recipe must travel with anyone consuming this register:

  • oq-1 — statement theme is provisional. The statement theme's serif font stack and exact column split (22% + 10 × 7.8%) are wcp.finance.* bundle values gated on unfinished proforma-engine Rust work. Do not commit these as final without re-verifying against the engine once it lands.
  • oq-2 — page-number placement is intentional. @bottom-right here vs. @bottom-center in the year-end register is a deliberate, correct divergence per family — not drift to reconcile.

Related

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.