<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deposit Bond Savings Calculator — Deposit Solutions</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--teal: #2A9DB5;
--dark-teal: #0D5C6E;
--light-bg: #E8EFF2;
--mid-teal: #A8D8E2;
--saving-bg: #C5DFE6;
--white: #ffffff;
--text: #1A3D47;
--muted: #5A8494;
--danger: #8B3A3A;
}
body {
font-family: 'DM Sans', sans-serif;
background: #f0f6f8;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0 0 48px;
color: var(--text);
}
header {
width: 100%;
background: var(--dark-teal);
padding: 28px 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
header .logo {
font-family: 'DM Serif Display', serif;
color: white;
font-size: 22px;
letter-spacing: -0.3px;
}
header .tagline {
font-size: 12px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 32px rgba(13,92,110,0.08);
width: 100%;
max-width: 720px;
margin: 0 20px;
overflow: hidden;
}
.card-header {
background: var(--dark-teal);
padding: 28px 36px;
}
.card-header h1 {
font-family: 'DM Serif Display', serif;
color: white;
font-size: 26px;
font-weight: 400;
margin-bottom: 6px;
}
.card-header p {
color: rgba(255,255,255,0.65);
font-size: 13px;
line-height: 1.5;
}
.card-body { padding: 32px 36px; }
.slider-section { margin-bottom: 28px; }
.slider-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.slider-row label {
font-size: 13px;
color: var(--muted);
min-width: 160px;
font-weight: 400;
}
.slider-row input[type=range] {
flex: 1;
-webkit-appearance: none;
height: 4px;
border-radius: 2px;
background: var(--light-bg);
outline: none;
cursor: pointer;
}
.slider-row input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--dark-teal);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(13,92,110,0.3);
transition: transform 0.1s;
}
.slider-row input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.slider-val {
font-size: 14px;
font-weight: 600;
min-width: 110px;
text-align: right;
color: var(--dark-teal);
}
.deposit-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--light-bg);
border-radius: 8px;
padding: 8px 16px;
margin-bottom: 28px;
border-left: 3px solid var(--teal);
}
.deposit-badge span {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.deposit-badge strong {
font-size: 15px;
font-weight: 600;
color: var(--dark-teal);
}
.equation {
display: flex;
align-items: stretch;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(13,92,110,0.1);
margin-bottom: 24px;
}
.eq-block {
flex: 1;
padding: 20px 14px;
text-align: center;
}
.eq-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 8px;
line-height: 1.4;
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.eq-value {
font-size: 20px;
font-weight: 600;
}
.eq-op {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 300;
color: var(--muted);
padding: 0 4px;
background: #f5f9fa;
min-width: 32px;
}
.fee-block { background: var(--light-bg); }
.fee-block .eq-label { color: var(--muted); }
.fee-block .eq-value { color: var(--dark-teal); }
.saving-block { background: var(--mid-teal); }
.saving-block .eq-label { color: #0D5C6E; }
.saving-block .eq-value { color: var(--dark-teal); }
.net-block { background: var(--dark-teal); transition: background 0.3s; }
.net-block .eq-label { color: rgba(255,255,255,0.65); }
.net-block .eq-value { color: white; }
.verdict {
background: #f5f9fa;
border-radius: 10px;
padding: 16px 20px;
font-size: 13px;
color: var(--muted);
line-height: 1.6;
border-left: 3px solid var(--teal);
margin-bottom: 20px;
}
.verdict strong { color: var(--dark-teal); font-weight: 600; }
.disclaimer {
font-size: 11px;
color: #9ab5be;
font-style: italic;
line-height: 1.6;
}
footer {
margin-top: 32px;
text-align: center;
font-size: 12px;
color: var(--muted);
}
footer a { color: var(--teal); text-decoration: none; }
@media (max-width: 600px) {
header { padding: 20px; }
.card-body { padding: 24px 20px; }
.card-header { padding: 22px 20px; }
.slider-row label { min-width: 120px; font-size: 12px; }
.slider-val { min-width: 90px; font-size: 13px; }
.eq-value { font-size: 16px; }
.eq-label { font-size: 9px; }
}
</style>
</head>
<body>
<header>
<div class="logo">Deposit Solutions</div>
<div class="tagline">depositsolutions.com.au</div>
</header>
<div class="card">
<div class="card-header">
<h1>Deposit Bond Savings Calculator</h1>
<p>See how much your client could save by using a deposit bond instead of tying up cash.</p>
</div>
<div class="card-body">
<div class="slider-section">
<div class="slider-row">
<label>Purchase price</label>
<input type="range" min="1000000" max="10000000" step="10000" value="1000000" id="price" oninput="calc()">
<span class="slider-val" id="price-out">$1,000,000</span>
</div>
<div class="slider-row">
<label>Bond term (months)</label>
<input type="range" min="6" max="66" step="3" value="12" id="term" oninput="calc()">
<span class="slider-val" id="term-out">12 months</span>
</div>
</div>
<div class="deposit-badge">
<span>10% deposit required:</span>
<strong id="deposit-out">$100,000</strong>
</div>
<div class="equation">
<div class="eq-block fee-block">
<div class="eq-label">Bond fee</div>
<div class="eq-value" id="fee-val">—</div>
</div>
<div class="eq-op">−</div>
<div class="eq-block saving-block">
<div class="eq-label" id="earned-label">Potential interest earned over 12 months *</div>
<div class="eq-value" id="saving-val">—</div>
</div>
<div class="eq-op">=</div>
<div class="eq-block net-block" id="net-block">
<div class="eq-label">Purchaser net savings</div>
<div class="eq-value" id="net-val">—</div>
</div>
</div>
<div class="verdict" id="verdict"></div>
<div class="disclaimer">* Potential interest earned is indicative only and assumes interest compounds monthly at 5% p.a. Actual returns will vary depending on the financial institution, account type, and prevailing interest rates. This is not financial advice.</div>
</div>
</div>
<footer>
<p>For more information visit <a href="https://www.depositsolutions.com.au" target="_blank">depositsolutions.com.au</a></p>
</footer>
<script>
const BASE_MONTHS = 6;
const STEP_MONTHS = 3;
const BASE_PCT = 1.5;
const STEP_PCT = 0.75;
const INTEREST_RATE = 5.0;
function bondFeePct(months) {
const steps = (months - BASE_MONTHS) / STEP_MONTHS;
return BASE_PCT + steps * STEP_PCT;
}
function bondFee(deposit, months) {
return deposit * (bondFeePct(months) / 100);
}
function compoundInterestEarned(principal, months) {
const r = INTEREST_RATE / 100 / 12;
return principal * (Math.pow(1 + r, months) - 1);
}
function fmt(n) {
return '$' + Math.round(Math.abs(n)).toLocaleString('en-AU');
}
function calc() {
const price = parseInt(document.getElementById('price').value);
const months = parseInt(document.getElementById('term').value);
const deposit = price * 0.10;
const fee = bondFee(deposit, months);
const earned = compoundInterestEarned(deposit, months);
const net = earned - fee;
const positive = net >= 0;
document.getElementById('price-out').textContent = fmt(price);
document.getElementById('term-out').textContent = months + ' months';
document.getElementById('deposit-out').textContent = fmt(deposit);
document.getElementById('fee-val').textContent = fmt(fee);
document.getElementById('saving-val').textContent = fmt(earned);
document.getElementById('net-val').textContent = (positive ? '' : '−') + fmt(net);
document.getElementById('earned-label').textContent = 'Potential interest earned over ' + months + ' months *';
document.getElementById('net-block').style.background = positive ? '#0D5C6E' : '#8B3A3A';
document.getElementById('verdict').innerHTML = positive
? 'By using a deposit bond, your client keeps <strong>' + fmt(deposit) + '</strong> in their savings account. With monthly compounding at <strong>5% p.a.</strong> over <strong>' + months + ' months</strong>, they could earn <strong>' + fmt(earned) + '</strong>* — enough to cover the <strong>' + fmt(fee) + '</strong> bond fee and leave them <strong>' + fmt(net) + ' ahead</strong>.'
: 'At 5% p.a. the bond fee of <strong>' + fmt(fee) + '</strong> outweighs the potential interest earned of <strong>' + fmt(earned) + '</strong>* over ' + months + ' months. Try a longer bond term to see when it becomes worthwhile.';
}
calc();
</script>
</body>
</html>
Explore our range of services designed to help you move forward with confidence, wherever you're headed next.
Interior Design
✳︎
New Construction
✳︎
Renovations
✳︎
Remodels
✳︎
Commercial Design
Interior Design ✳︎ New Construction ✳︎ Renovations ✳︎ Remodels ✳︎ Commercial Design
Popular
2025
New York
The Atlast Project →
“Communication was top-notch and the final outcome was even better than we imagined. A great experience all around.”
Former CustomerGet In Touch
If you're interested in working with us, complete the form with a few details about your project. We'll review your message and get back to you within 48 hours.