I've read a lot of personal finance content. Most of it collapses into the same handful of ideas dressed up differently — spend less than you earn, invest the rest, avoid bad debt. The question I've been seeking to answer is: in what order?
Brian Preston and Bo Hanson from The Money Guy Show has a framework called the Financial Order of Operations (FOO). The premise is simple: your next dollar has an optimal destination, and the sequence matters as much as the action. The key takeaway for me is don't do everything at once.
I've been following it
✓ Complete
Step 1 — Deductibles covered. Before anything else, you keep enough cash on hand to cover your highest insurance deductible. This is the floor. The logic is that one car accident or one ER visit shouldn't blow up everything else you're building. Done.
✓ Complete
Step 2 — Employer match. My employer matches retirement contributions (4%), capturing that match is the highest guaranteed return available to you. This is a guaranteed 100% rate of return. There's no investment on earth that competes with that. This comes before paying off debt, before anything else, because the math is math. Done.
✓ Complete
Step 3 — High-interest debt. Once the match is captured, high-interest debt gets paid down aggressively. The line for me is 6%: above that, paying it off beats investing. Credit cards, personal loans, anything in that range. Eliminate it. Done.
✓ Complete
Step 4 — Emergency reserves. Now the full emergency fund: six months of living expenses in liquid cash. The fund exists to absorb job loss or major unexpected expenses without touching investments or going back into debt. Done.
✓ Complete
Step 5 — Roth and HSA. Tax-free growth is the most valuable thing. A Roth IRA grows tax-free and withdrawals in retirement are tax-free. An HSA, if you have a qualifying high-deductible health plan, is triple tax-advantaged — contributions reduce taxable income, growth is tax-free, and withdrawals for medical expenses are tax-free. These accounts get maxed before anything else in the investing sequence. Done.
✓ Complete
Step 6 — Max retirement accounts. After Roth and HSA are maxed, any remaining retirement contributions go here — filling up the 401(k) beyond the match. You're still inside the tax-advantaged wrapper, just with slightly less favorable terms than step 5. The goal is to use every tax-sheltered space available before putting money in a taxable brokerage. Done.
→ In progress
Step 7 — Hyper-accumulation. This is where I am. The target Brian and Bo set is 25% of gross income directed toward wealth-building. That includes everything — 401(k) contributions, Roth, HSA, brokerage investments. Not savings. Not cash sitting in a checking account. Wealth-building. For most people, steps 1 through 6 get you somewhere between 15 and 20%. Step 7 is about pushing through to 25 and holding it there.
I'm working toward the 25% target. Some months I'm there. Some months I'm not. The goal this year is consistency — making 25% the floor, not the occasional ceiling.
→ In progress
Step 8 — Prepaid future expenses. This step runs parallel to step 7. It's about funding future obligations you can see coming: kids education, a known large purchase, a business investment. The vehicle is usually a 529 for college savings. The logic is that you're turning a future lump-sum need into a manageable ongoing contribution, and doing it inside a tax-advantaged wrapper where possible.
This one is early-stage for me. More to say here once it develops.
○ Ahead
Step 9 — Low-interest debt paydown. The final step is eliminating remaining low-interest debt — primarily a mortgage. Brian and Bo's benchmark is no debt by age 50 to 55. The philosophical point is that reaching that age with no obligations transforms your options. You can work because you want to, not because you have to. Every dollar that was going to a mortgage payment becomes deployable.
This is years away. But knowing it's the last step, and that the sequence gets you here naturally, is part of what makes the FOO a useful frame rather than just a checklist.
The FOO gave me something I didn't have before: permission to stop optimizing everything simultaneously. When I finished step 5, I knew exactly where the next dollar went. The sequential structure removes a category of decision fatigue.
I find the FOO framework sound, much more than some of the other experts in the personal finance space.
The progress tracker above is a pure CSS and HTML component — no JavaScript, no library. Here's how it works.
Each step is a circle (a div with border-radius: 50%). The connecting lines between them are just thin divs with flex: 1 so they stretch to fill the available space. The whole track sits in a flexbox row. Three classes — done, active, and ahead — control the visual state of each node and line.
.foo-pipeline {
margin: 2rem 0;
padding: 1.4rem 1.2rem;
border: 1px solid #e7e5e4;
border-radius: 4px;
background-color: #fff;
}
/* The horizontal track */
.foo-track {
display: flex;
align-items: center;
}
/* Each numbered circle */
.foo-node {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 11px;
font-weight: bold;
z-index: 1;
}
/* Node states */
.foo-node.done { background-color: #1c1917; color: #fafaf8; }
.foo-node.active { background-color: #fafaf8; border: 2px solid #1c1917; color: #1c1917; }
.foo-node.ahead { background-color: #e7e5e4; color: #a8a29e; }
/* Connecting lines */
.foo-line { flex: 1; height: 2px; }
.foo-line.done { background-color: #1c1917; }
.foo-line.ahead { background-color: #e7e5e4; }
/* Label row beneath the track */
.foo-labels {
display: flex;
align-items: flex-start;
margin-top: 10px;
}
.foo-label-spacer { flex: 1; }
.foo-label {
width: 26px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 9px;
letter-spacing: 0.04em;
text-align: center;
line-height: 1.3;
text-transform: uppercase;
color: #a8a29e;
}
.foo-label.active-label { color: #1c1917; font-weight: bold; }
/* Legend */
.foo-legend {
display: flex;
gap: 1.2rem;
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid #e7e5e4;
font-size: 10px;
color: #78716c;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.foo-legend-item { display: flex; align-items: center; gap: 6px; }
.foo-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}<div class="foo-pipeline">
<!-- Track: alternating nodes and lines -->
<div class="foo-track">
<div class="foo-node done">1</div>
<div class="foo-line done"></div>
<div class="foo-node done">2</div>
<div class="foo-line done"></div>
<div class="foo-node done">3</div>
<div class="foo-line done"></div>
<div class="foo-node done">4</div>
<div class="foo-line done"></div>
<div class="foo-node done">5</div>
<div class="foo-line done"></div>
<div class="foo-node done">6</div>
<div class="foo-line done"></div>
<div class="foo-node active">7</div>
<div class="foo-line ahead"></div>
<div class="foo-node active">8</div>
<div class="foo-line ahead"></div>
<div class="foo-node ahead">9</div>
</div>
<!-- Labels beneath each node -->
<div class="foo-labels">
<div class="foo-label">Deduct.</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">Match</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">HI Debt</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">E-Fund</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">Roth / HSA</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">Max Ret.</div>
<div class="foo-label-spacer"></div>
<div class="foo-label active-label">Hyper Accum.</div>
<div class="foo-label-spacer"></div>
<div class="foo-label active-label">Future Exp.</div>
<div class="foo-label-spacer"></div>
<div class="foo-label">Low-Int. Debt</div>
</div>
<!-- Legend -->
<div class="foo-legend">
<div class="foo-legend-item">
<div class="foo-legend-dot" style="background-color:#1c1917;"></div>
Complete
</div>
<div class="foo-legend-item">
<div class="foo-legend-dot" style="background-color:#fafaf8; border: 2px solid #1c1917;"></div>
In progress
</div>
<div class="foo-legend-item">
<div class="foo-legend-dot" style="background-color:#e7e5e4;"></div>
Ahead
</div>
</div>
</div>To advance the tracker as stages are completed, change three things: flip the current active nodes to done, move active to the next node, and update the connecting line between them from ahead to done. That's it — no scripting needed.