Opening paragraphs (lead-in)

An article opens with two or three plain paragraphs that frame the question. The first paragraph names the decision the reader has to make. The second one sketches the structure of the answer so the reader knows what is coming. Inline strong and emphasis have their own treatment: strong uses navy and weight 700, emphasis stays italic.

Cross-links inside paragraphs underline in amber-deep at 1px and hover navy. For example, a paragraph about payroll naturally points to the payroll service or to the payroll cost calculator. Two cross-links per paragraph is fine; more starts to feel like a sales page.

Principle callout

When a paragraph is doing the work of a thesis statement, lift it into a callout. The callout has an amber left border, the label in uppercase amber, and the body in weight 500 navy. Use it sparingly. Two per long article, one per short one.

Principle
The callout body reads like a maxim. Short, declarative, no qualifiers. If it needs two sentences, the second one supports the first without softening it.

Key stats (single + grid of three)

When a single number anchors the argument, lift it into a <KeyStat>. The value sits in big amber Spectral with a label in uppercase below. Optional context paragraph for the one-line "why it matters". Three side by side use <div class="key-stat-grid">; one inline does not need the grid.

Three at once reads like an Economist factbox row. Use for an introduction to a section that contrasts multiple jurisdictions or scenarios:

Pull quotes (editorial highlight)

Pull quotes lift a sentence out of the prose for the scanning reader. Spectral italic at 1.25-1.625rem, amber bar on the left. Use one per long article, max two. Optional attribution renders below in uppercase.

The cost of poor visibility shows up late, usually at the worst moment: a bank meeting, an investor proposal, a CRA review.

With attribution, the pull quote can be used to cite an external source verbatim:

Monthly cash flow projections, monthly comparison of actuals against forecast, and ongoing monitoring of financial indicators are the foundations of better business decisions.
BDC, Financial Management Toolkit

Typography: H2, H3, prose

H2 is Spectral 600, clamp 1.5-1.875rem, navy, with 3rem of breathing room above. H2 also gets scroll-margin-top: 96px so anchor jumps from the TOC clear the fixed nav.

H3 is the section divider

H3 is smaller (1.25rem), still Spectral 600, and sits 2.25rem below the previous block. Use H3 to break up long H2 sections, not as a substitute for H2.

Paragraphs hold the weight

Body paragraphs are 1.0625rem with 1.7 line-height. Wide enough to read comfortably, tight enough to scan. The body max-width is 720px, set on the wrapper div, not on the article element.

Lists: bulleted and numbered

Both list types get amber markers and 0.5rem between items:

  • Bulleted lists are for parallel items with no order between them.
  • Each item can carry inline strong or a link without breaking the rhythm.
  • Keep items to one or two lines; if you need a paragraph, you need a sub-heading instead.

Numbered lists are for sequenced steps:

  1. The amber number is the marker, set bold.
  2. Each step describes one action the reader can take.
  3. If a step needs a sentence of context, write it as one line, not as a paragraph block.

Charts (Economist-style frame)

Charts live inside <ChartFrame>, which standardises the eyebrow, title, subtitle, unit and source line around any SVG. Inside, drop a chart component (HBarChart, StackedBarChart, LineChart) or any inline SVG you author. Numbers come from src/lib/tax-data/; the source line below the chart names the authority.

Compare the clocks
Quarterly bookkeeping falls behind nearly every other recurring obligation
Window of each obligation in days. The shorter the compliance clock, the harder it is to run bookkeeping on a 90-day cycle without rework.
Days per cycle (shorter bar = tighter clock)
Payroll mensal (regular remitter) CRA: dia 15 do mês seguinte 30 days GST/HST mensal obrigatório acima de $6M 30 days PST B.C. mensal acima de $12k de PST/ano 30 days Corporate tax (T2) pagamento até 2 meses após year-end 60 days GST/HST trimestral default para receita média 90 days Bookkeeping mensal acompanha todos os relógios 30 days Bookkeeping trimestral mais lento que vários ciclos 90 days 0 days 25 days 50 days 75 days 100 days
CRA: payroll remitter types, GST/HST filing frequencies. B.C. Ministry of Finance: PST reporting periods. Databooks tax-data 2026.

The highlighted bar (amber) is monthly bookkeeping. It fits inside every other obligation. The quarterly bar (bottom) overshoots monthly payroll, monthly GST/HST, and BC PST. The frame is identical for line charts and stacked bars; only the inner SVG changes.

Tables with badges

Wrap tables in <div class="table-wrap"> for the rounded border and horizontal scroll on mobile. Headers use the alt background, body cells get a 0.5px divider, badges live inside cells:

Profile Signal Recommendation Why
Single-owner corporation, no payroll Quarterly transactions in the dozens, predictable cash Quarterly Frequency matches the lowest of your real obligations.
Operating company with payroll Monthly remittances, AR/AP, employees in two provinces Monthly Your fastest clock is monthly, so the books need to keep up.
PST-collecting business in BC PST collectable above the monthly threshold Monthly Coding errors compound; period-end cleanup gets expensive.

The two badge variants are badge-amber (filled amber, navy text) and badge-soft (alt background, secondary text, 0.5px border). Use amber for the recommended path, soft for the alternative.

Decision list (amber counters)

For decision frameworks, use <ol class="decision-list">. Each item gets a 01, 02, 03 counter in amber and supports a <strong> heading line plus a <span> body:

  1. Ask the framing question first. The lead question changes the whole answer. Start there, even if the rest is harder.
  2. Map the constraints before the options. If the budget, the deadline, or the team are fixed, half the options drop out automatically.
  3. Pick the option that survives the cheapest test. The right answer is often the one you can validate next week, not the one with the highest ceiling next year.

Articles should cross-link freely to the services and tools they touch. The link styling is the same as inline prose links: amber-deep underline 1px, hover navy. For example, an article that mentions GST/HST should naturally cross-link to the GST/HST service the first time the topic comes up, and to the GST/HST threshold tracker when the article discusses thresholds.

At the end of the body, drop a small <aside class="related-card"> with the services and tools the article uses heaviest. This is a small navigation aid for readers who want to act, not a marketing card. Render below the disclaimer? No, render above it: the disclaimer always closes the body.

Closing and disclaimer

The final paragraph should restate the decision and the reason, not the steps. Anyone who skimmed the article should be able to read one paragraph and walk away with the headline.

Then close with the disclaimer paragraph (border-top, smaller, cinza-tertiary):

This article reflects general patterns of Canadian accounting practice and does not constitute tax advice. Application depends on CRA rules, provincial variations, and your specific situation.