The Complete Style Guide: Every Way We Tell a Money Story

This opening paragraph is the lede. It should read a little larger and softer than the rest of the body, setting the tone before the article truly begins. Good saving — like good writing — is mostly about rhythm, and this guide exists to make sure every rhythm we use renders beautifully.

Below the lede, regular body paragraphs take over. They carry the bulk of the argument and should sit at a comfortable reading measure with generous line height. You can emphasize ideas with bold text for weight, italic text for tone, and combine them as both at once when a point really matters. Inline references to a figure like $1,200 or a function name like calculateBudget() use inline code styling so they stand apart from prose.

You can also link to another page inside a sentence, and the link should be obvious without shouting. Links are the connective tissue of an editorial site, so they need to feel deliberate.

Heading level two: the workhorse

Most sections of an article open with an H2. It needs clear air above it to separate sections, and just enough space below so the first paragraph feels attached to its heading rather than floating away. This paragraph tests exactly that relationship.

Heading level three: a subsection

When a section needs internal structure, H3 steps in. It should read as clearly subordinate to H2 — smaller, but still confident. The paragraph beneath it continues the thought without a jarring jump in scale.

Heading level four: the fine grain

H4 is the deepest level we use. It’s for labelling small clusters of detail inside a subsection, and it should feel like a strong label rather than a true heading.

Unordered lists

Bulleted lists are for items where order doesn’t matter. Each marker should pick up the category accent color:

• Track every recurring subscription, even the small ones
• Separate fixed costs from variable ones before cutting anything
• Keep a buffer category for the genuinely unpredictable months
• Automate the transfer so the decision only has to be made once

Numbered lists

When sequence matters, numbered lists carry the reader step by step:

1. Write down your take-home pay for the month
2. Subtract fixed obligations like rent, loans, and insurance
3. Assign every remaining dollar a job — saving counts as a job
4. Review the plan once a week and adjust without guilt

Lists can also nest, which is where most typography quietly falls apart:

1. Build the emergency fund first
   • Start with a $1,000 starter buffer
   • Grow it toward one full month of expenses
2. Then attack high-interest debt
   • List debts from highest APR to lowest
   • Throw every spare dollar at the top of the list
3. Finally, automate long-term investing

Pull quotes

When a single idea deserves to stop the reader, we pull it out:

A budget that ignores reality will always feel like failure. The goal is not perfection — it’s a plan boring enough to actually repeat.

Back to regular body copy immediately after, so the quote reads as a beat rather than a break in the argument.

Images and captions

Standalone images should fill the reading column with a soft radius and breathe with space above and below.

When an image needs context, we use a figure with a caption:

Data tables

Numbers are easier to trust when they line up. Tables should be clean, readable, and scroll gracefully on small screens.

Category	Budgeted	Spent	Difference
Housing	$1,400	$1,400	$0
Groceries	$500	$612	−$112
Transportation	$250	$198	+$52
Savings	$600	$600	$0
Fun money	$200	$245	−$45

Code blocks

Occasionally a money article gets technical — a spreadsheet formula or a quick script. Block code keeps it legible:

function monthlySavings(income, fixed, variable) {
  const leftover = income - fixed - variable;
  // Pay yourself first, then let the rest flex
  return Math.max(leftover * 0.2, 0);
}

monthlySavings(4200, 2100, 1300); // → 160

A horizontal break

Sometimes a section ends and the next begins with a clean break rather than a heading.

---

After the rule, the article resumes. This final stretch exists to confirm that paragraph spacing, link styling, and the overall vertical rhythm hold together from top to bottom.

Good saving is boring in the best way. It removes friction, repeats easily, and leaves space for being human.

And that’s the whole kit — every element an article might need, in one place, so the CSS only has to be right once.