/
You
make an infographic to explain a savings account system in a bank
You
make this into dark mode using sage and black
You
Can you change the font to that of a typewriter
You
everything is not fitting in a page, fit it. $10000 is almost overlapping Illustrative. I am In India everything in Rupees
You
Give me 1 more option using neon green and ivory. Place both options side by side for me to compare
Assistant
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Savings Account Infographic — Theme Comparison</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
--paper:#050605;
--ink:#f6f1df;
--accent:#39ff14;
--rule:rgba(246,241,223,.22);
--radius:4px;
}
*{box-sizing:border-box}
html{background:#050605;color:#f6f1df}
body{
margin:0;
font-family:"IBM Plex Mono","Courier New",Courier,monospace;
font-size:12px;
line-height:1.42;
background:#050605;
color:#f6f1df;
font-variant-numeric:tabular-nums;
}
.page{
max-width:960px;
margin:0 auto;
padding:24px 18px 28px;
}
.compare-lockup{
border-bottom:1px solid rgba(246,241,223,.22);
padding-bottom:16px;
margin-bottom:18px;
}
.compare-kicker{
color:#39ff14;
text-transform:uppercase;
letter-spacing:.16em;
font-size:11px;
font-weight:600;
margin-bottom:8px;
}
.compare-lockup h1{
margin:0 0 8px;
font-size:clamp(26px,4.8vw,44px);
line-height:1.03;
letter-spacing:-.06em;
font-weight:500;
}
.compare-lockup p{
max-width:760px;
margin:0;
color:rgba(246,241,223,.86);
font-size:13px;
}
.comparison{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
align-items:start;
}
.option{
--panel-paper:#050605;
--panel-ink:#d8e1d4;
--panel-accent:#9caf88;
--panel-rule:rgba(216,225,212,.18);
--on-accent:#050605;
background:var(--panel-paper);
color:var(--panel-ink);
border:1px solid var(--panel-rule);
border-radius:var(--radius);
padding:16px 14px 18px;
min-width:0;
overflow:hidden;
}
.option.neon{
--panel-paper:#fffbea;
--panel-ink:#050605;
--panel-accent:#39ff14;
--panel-rule:rgba(5,6,5,.18);
--on-accent:#050605;
}
.theme-tag{
display:flex;
justify-content:space-between;
gap:10px;
align-items:baseline;
border-bottom:1px solid var(--panel-rule);
padding-bottom:10px;
margin-bottom:14px;
}
.theme-tag strong{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--panel-accent);
white-space:nowrap;
}
.theme-tag span{
font-size:10px;
text-align:right;
opacity:.78;
}
.kicker{
color:var(--panel-accent);
text-transform:uppercase;
letter-spacing:.14em;
font-size:10px;
font-weight:600;
margin-bottom:8px;
}
h2{
margin:0 0 8px;
font-size:clamp(24px,3.8vw,38px);
line-height:1.02;
letter-spacing:-.07em;
font-weight:500;
color:var(--panel-ink);
}
.deck{
margin:0 0 12px;
font-size:12px;
line-height:1.42;
color:var(--panel-ink);
}
.facts{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:6px;
border-top:1px solid var(--panel-rule);
border-bottom:1px solid var(--panel-rule);
padding:10px 0;
margin-bottom:14px;
}
.fact{
min-width:0;
border-right:1px solid var(--panel-rule);
padding-right:6px;
}
.fact:last-child{border-right:0}
.fact b{
display:block;
color:var(--panel-accent);
font-size:14px;
line-height:1.1;
font-weight:500;
white-space:nowrap;
letter-spacing:-.04em;
}
.fact span{
display:block;
margin-top:4px;
font-size:9.5px;
line-height:1.25;
opacity:.9;
}
.section{
border-bottom:1px solid var(--panel-rule);
padding:14px 0 16px;
}
.section:first-of-type{padding-top:0}
.section-head{
display:grid;
grid-template-columns:34px 1fr;
gap:10px;
align-items:start;
margin-bottom:8px;
}
.num{
color:var(--panel-accent);
font-size:28px;
line-height:.9;
letter-spacing:-.08em;
font-weight:500;
}
h3{
margin:0;
font-size:18px;
line-height:1.1;
letter-spacing:-.055em;
font-weight:500;
color:var(--panel-ink);
}
.lede{
margin:0 0 10px;
font-size:10.8px;
line-height:1.45;
color:var(--panel-ink);
}
.chart-title{
margin:0 0 4px;
font-weight:600;
font-size:10.5px;
color:var(--panel-ink);
}
svg{
display:block;
width:100%;
height:auto;
overflow:visible;
}
.grid{
stroke:var(--panel-rule);
stroke-width:1;
shape-rendering:crispEdges;
}
.axis{
stroke:var(--panel-ink);
stroke-width:1;
shape-rendering:crispEdges;
}
.line{
fill:none;
stroke:var(--panel-ink);
stroke-width:2;
stroke-linejoin:round;
}
.accent-fill{fill:var(--panel-accent)}
.paper-fill{fill:var(--panel-paper)}
.ink-stroke{stroke:var(--panel-ink)}
.rule-stroke{stroke:var(--panel-rule)}
.ink-fill{fill:var(--panel-ink)}
.on-accent{fill:var(--on-accent)}
.label,.small-label,.takeaway{
font-family:"IBM Plex Mono","Courier New",Courier,monospace;
fill:var(--panel-ink);
}
.label{font-size:10px}
.small-label{font-size:8.5px}
.takeaway{
font-size:9.5px;
font-weight:600;
fill:var(--panel-accent);
}
.note{
margin:5px 0 0;
font-size:9.5px;
line-height:1.35;
opacity:.82;
}
.quote{
border-bottom:1px solid var(--panel-rule);
padding:16px 0;
margin-bottom:12px;
}
blockquote{
margin:0;
font-size:20px;
line-height:1.12;
letter-spacing:-.06em;
font-weight:500;
color:var(--panel-ink);
}
blockquote span{color:var(--panel-accent)}
.quote-credit{
margin-top:7px;
font-size:10px;
opacity:.85;
}
.source{
font-size:8.8px;
line-height:1.35;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:600;
opacity:.82;
}
@media (max-width:820px){
.comparison{grid-template-columns:1fr}
.option{padding:18px 16px}
.facts{grid-template-columns:1fr}
.fact{
border-right:0;
border-bottom:1px solid var(--panel-rule);
padding:0 0 8px;
}
.fact:last-child{border-bottom:0;padding-bottom:0}
}
</style>
</head>
<body>
<main class="page">
<header class="compare-lockup">
<div class="compare-kicker">Theme comparison</div>
<h1>Two visual directions for the same Indian savings account infographic</h1>
<p>Left keeps the existing black-and-sage dark mode. Right shows a second option using neon green with ivory paper, while preserving the same rupee-based content and compact typewriter layout.</p>
</header>
<section class="comparison" aria-label="Two infographic theme options shown side by side">
<article class="option sage" aria-label="Option A, sage and black">
<div class="theme-tag">
<strong>Option A</strong>
<span>Sage / black</span>
</div>
<div class="kicker">Indian banking mechanics</div>
<h2>What happens after rupees enter a savings account</h2>
<p class="deck">A savings account looks simple: deposit money, earn interest, withdraw when needed. Inside an Indian bank, it is a daily ledger that records your balance, credits interest, and protects eligible deposits up to a defined insurance limit.</p>
<div class="facts">
<div class="fact"><b>₹10,000</b><span>Opening balance used below.</span></div>
<div class="fact"><b>4.00%</b><span>Example annual savings rate.</span></div>
<div class="fact"><b>₹5 lakh</b><span>DICGC cover per depositor per insured bank.</span></div>
</div>
<section class="section">
<div class="section-head">
<div class="num">1</div>
<h3>The balance is a running ledger</h3>
</div>
<p class="lede">A savings account changes whenever money moves in or out. Salary credit raises the available balance after the bank posts it; UPI, ATM, NEFT, IMPS or debit-card payments reduce it when processed. Banks may show pending and available amounts differently. This example starts with ₹10,000, adds two credits, pays one expense, and ends higher because deposits exceeded withdrawals.</p>
<p class="chart-title">Posted balance after each event</p>
<svg viewBox="0 0 390 205" role="img" aria-label="Line chart showing savings balance in rupees over one month.">
<line class="grid" x1="50" y1="155" x2="365" y2="155"/>
<line class="grid" x1="50" y1="115" x2="365" y2="115"/>
<line class="grid" x1="50" y1="75" x2="365" y2="75"/>
<line class="axis" x1="50" y1="165" x2="365" y2="165"/>
<line class="axis" x1="50" y1="45" x2="50" y2="165"/>
<text class="small-label" x="42" y="168" text-anchor="end">₹8k</text>
<text class="small-label" x="42" y="118" text-anchor="end">₹10k</text>
<text class="small-label" x="42" y="78" text-anchor="end">₹12k</text>
<text class="small-label" x="50" y="184" text-anchor="middle">D1</text>
<text class="small-label" x="150" y="184" text-anchor="middle">D8</text>
<text class="small-label" x="250" y="184" text-anchor="middle">D22</text>
<text class="small-label" x="365" y="184" text-anchor="middle">D30</text>
<text class="label" x="208" y="201" text-anchor="middle">Day of month</text>
<text class="label" transform="translate(12 110) rotate(-90)" text-anchor="middle">Balance, rupees</text>
<polyline class="line" points="50,115 115,115 115,55 190,55 190,95 270,95 270,65 350,65"/>
<circle class="accent-fill" cx="115" cy="55" r="3.5"/>
<circle class="ink-fill" cx="190" cy="95" r="3.5"/>
<circle class="accent-fill" cx="270" cy="65" r="3.5"/>
<text class="small-label" x="115" y="38" text-anchor="middle">+₹5k</text>
<text class="small-label" x="190" y="112" text-anchor="middle">−₹3k</text>
<text class="takeaway" x="205" y="34">Takeaway: events move the balance.</text>
</svg>
<p class="note">Illustrative entries only; actual posting order depends on bank systems and payment rails.</p>
</section>
<section class="section">
<div class="section-head">
<div class="num">2</div>
<h3>Interest is paid for steady funds</h3>
</div>
<p class="lede">Banks can use savings deposits to support lending, securities and liquidity needs, so they pay interest. In India, savings interest is usually quoted per annum and credited monthly, quarterly or at another interval chosen by the bank. For a small saver, the first-year amount is modest but visible: on a constant ₹10,000 balance, a 4 percent annual rate gives roughly ₹400 before tax effects.</p>
<p class="chart-title">Annual interest on ₹10,000</p>
<svg viewBox="0 0 390 205" role="img" aria-label="Bar chart comparing annual interest on ten thousand rupees at different rates.">
<line class="grid" x1="52" y1="155" x2="365" y2="155"/>
<line class="grid" x1="52" y1="115" x2="365" y2="115"/>
<line class="grid" x1="52" y1="75" x2="365" y2="75"/>
<line class="axis" x1="52" y1="165" x2="365" y2="165"/>
<line class="axis" x1="52" y1="45" x2="52" y2="165"/>
<text class="small-label" x="44" y="168" text-anchor="end">₹0</text>
<text class="small-label" x="44" y="118" text-anchor="end">₹400</text>
<text class="small-label" x="44" y="78" text-anchor="end">₹800</text>
<rect class="accent-fill" x="78" y="135" width="38" height="30"/>
<rect class="accent-fill" x="140" y="120" width="38" height="45"/>
<rect class="accent-fill" x="202" y="105" width="38" height="60"/>
<rect class="accent-fill" x="264" y="90" width="38" height="75"/>
<rect class="accent-fill" x="326" y="60" width="38" height="105"/>
<text class="small-label" x="97" y="184" text-anchor="middle">2%</text>
<text class="small-label" x="159" y="184" text-anchor="middle">3%</text>
<text class="small-label" x="221" y="184" text-anchor="middle">4%</text>
<text class="small-label" x="283" y="184" text-anchor="middle">5%</text>
<text class="small-label" x="345" y="184" text-anchor="middle">7%</text>
<text class="label" x="209" y="201" text-anchor="middle">Rate, per annum</text>
<text class="label" transform="translate(12 110) rotate(-90)" text-anchor="middle">Interest, rupees</text>
<text class="takeaway" x="150" y="34">Takeaway: rate matters when money stays put.</text>
</svg>
<p class="note">Rounded simple illustration; actual interest depends on daily balance method, credit frequency, tax rules and bank terms.</p>
</section>
<section class="quote">
<blockquote>A savings account is <span>liquid safety with modest yield</span> — not a cash box, and not a market investment.</blockquote>
<div class="quote-credit">The design trade-off is access first, return second.</div>
</section>
<section class="section">
<div class="section-head">
<div class="num">3</div>
<h3>Safety is strong, with a limit</h3>
</div>
<p class="lede">Indian savings accounts are protected by regulation and by deposit insurance through the Deposit Insurance and Credit Guarantee Corporation. The standard cover is up to ₹5,00,000 for each depositor in each insured bank, across principal and interest. That boundary matters once balances grow: ₹75,000 is fully covered, while ₹6,00,000 at one insured bank has ₹1,00,000 above the standard insurance limit.</p>
<p class="chart-title">India’s ₹5 lakh deposit insurance limit</p>
<svg viewBox="0 0 390 205" role="img" aria-label="Horizontal bar chart showing insured and above-limit savings balances in India.">
<line class="grid" x1="70" y1="150" x2="360" y2="150"/>
<line class="grid" x1="70" y1="55" x2="70" y2="158"/>
<line class="grid" x1="215" y1="55" x2="215" y2="158"/>
<line class="grid" x1="360" y1="55" x2="360" y2="158"/>
<line class="axis" x1="70" y1="158" x2="360" y2="158"/>
<text class="small-label" x="70" y="177" text-anchor="middle">₹0</text>
<text class="small-label" x="215" y="177" text-anchor="middle">₹4L</text>
<text class="small-label" x="360" y="177" text-anchor="middle">₹8L</text>
<text class="label" x="215" y="198" text-anchor="middle">Balance, rupees</text>
<text class="small-label" x="58" y="82" text-anchor="end">₹75k</text>
<text class="small-label" x="58" y="118" text-anchor="end">₹5L</text>
<text class="small-label" x="58" y="150" text-anchor="end">₹6L</text>
<rect class="accent-fill" x="70" y="68" width="27" height="20"/>
<rect class="accent-fill" x="70" y="104" width="181" height="20"/>
<rect class="accent-fill" x="70" y="136" width="181" height="20"/>
<rect class="paper-fill ink-stroke" x="251" y="136" width="36" height="20" stroke-width="1"/>
<line class="ink-stroke" x1="251" y1="48" x2="251" y2="160" stroke-width="1" stroke-dasharray="4 4"/>
<text class="small-label" x="251" y="39" text-anchor="middle">₹5L limit</text>
<text class="takeaway" x="176" y="26">Takeaway: cover is per depositor per insured bank.</text>
</svg>
<p class="note">Insurance treatment can vary with ownership and accounts at the same bank.</p>
</section>
<footer class="source">Sources: RBI consumer banking material; DICGC deposit insurance guidance; illustrative calculations by Aishwin Design.</footer>
</article>
<article class="option neon" aria-label="Option B, neon green and ivory">
<div class="theme-tag">
<strong>Option B</strong>
<span>Neon green / ivory</span>
</div>
<div class="kicker">Indian banking mechanics</div>
<h2>What happens after rupees enter a savings account</h2>
<p class="deck">A savings account looks simple: deposit money, earn interest, withdraw when needed. Inside an Indian bank, it is a daily ledger that records your balance, credits interest, and protects eligible deposits up to a defined insurance limit.</p>
<div class="facts">
<div class="fact"><b>₹10,000</b><span>Opening balance used below.</span></div>
<div class="fact"><b>4.00%</b><span>Example annual savings rate.</span></div>
<div class="fact"><b>₹5 lakh</b><span>DICGC cover per depositor per insured bank.</span></div>
</div>
<section class="section">
<div class="section-head">
<div class="num">1</div>
<h3>The balance is a running ledger</h3>
</div>
<p class="lede">A savings account changes whenever money moves in or out. Salary credit raises the available balance after the bank posts it; UPI, ATM, NEFT, IMPS or debit-card payments reduce it when processed. Banks may show pending and available amounts differently. This example starts with ₹10,000, adds two credits, pays one expense, and ends higher because deposits exceeded withdrawals.</p>
<p class="chart-title">Posted balance after each event</p>
<svg viewBox="0 0 390 205" role="img" aria-label="Line chart showing savings balance in rupees over one month.">
<line class="grid" x1="50" y1="155" x2="365" y2="155"/>
<line class="grid" x1="50" y1="115" x2="365" y2="115"/>
<line class="grid" x1="50" y1="75" x2="365" y2="75"/>
<line class="axis" x1="50" y1="165" x2="365" y2="165"/>
<line class="axis" x1="50" y1="45" x2="50" y2="165"/>
<text class="small-label" x="42" y="168" text-anchor="end">₹8k</text>
<text class="small-label" x="42" y="118" text-anchor="end">₹10k</text>
<text class="small-label" x="42" y="78" text-anchor="end">₹12k</text>
<text class="small-label" x="50" y="184" text-anchor="middle">D1</text>
<text class="small-label" x="150" y="184" text-anchor="middle">D8</text>
<text class="small-label" x="250" y="184" text-anchor="middle">D22</text>
<text class="small-label" x="365" y="184" text-anchor="middle">D30</text>
<text class="label" x="208" y="201" text-anchor="middle">Day of month</text>
<text class="label" transform="translate(12 110) rotate(-90)" text-anchor="middle">Balance, rupees</text>
<polyline class="line" points="50,115 115,115 115,55 190,55 190,95 270,95 270,65 350,65"/>
<circle class="accent-fill" cx="115" cy="55" r="3.5"/>
<circle class="ink-fill" cx="190" cy="95" r="3.5"/>
<circle class="accent-fill" cx="270" cy="65" r="3.5"/>
<text class="small-label" x="115" y="38" text-anchor="middle">+₹5k</text>
<text class="small-label" x="190" y="112" text-anchor="middle">−₹3k</text>
<text class="takeaway" x="205" y="34">Takeaway: events move the balance.</text>
</svg>
<p class="note">Illustrative entries only; actual posting order depends on bank systems and payment rails.</p>
</section>
<section class="section">
<div class="section-head">
<div class="num">2</div>
<h3>Interest is paid for steady funds</h3>
</div>
<p class="lede">Banks can use savings deposits to support lending, securities and liquidity needs, so they pay interest. In India, savings interest is usually quoted per annum and credited monthly, quarterly or at another interval chosen by the bank. For a small saver, the first-year amount is modest but visible: on a constant ₹10,000 balance, a 4 percent annual rate gives roughly ₹400 before tax effects.</p>
<p class="chart-title">Annual interest on ₹10,000</p>
<svg viewBox="0 0 390 205" role="img" aria-label="Bar chart comparing annual interest on ten thousand rupees at different rates.">
<line class="grid" x1="52" y1="155" x2="365" y2="155"/>
<line class="grid" x1="52" y1="115" x2="365" y2="115"/>
<line class="grid" x1="52" y1="75" x2="365" y2="75"/>
<line class="axis" x1="52" y1="165" x2="365" y2="165"/>
<line class="axis" x1="52" y1="45" x2="52" y2="165"/>
<text class="small-label" x="44" y="168" text-anchor="end">₹0</text>
<text class="small-label" x="44" y="118" text-anchor="end">₹400</text>
<text class="small-label" x="44" y="78" text-anchor="end">₹800</text>
<rect class="accent-fill" x="78" y="135" width="38" height="30"/>
<rect class="accent-fill" x="140" y="120" width="38" height="45"/>
<rect class="accent-fill" x="202" y="105" width="38" height="60"/>
<rect class="accent-fill" x="264" y="90" width="38" height="75"/>
<rect class="accent-fill" x="326" y="60" width="38" height="105"/>
<text class="small-label" x="97" y="184" text-anchor="middle">2%</text>
<text class="small-label" x="159" y="184" text-anchor="middle">3%</text>
<text class="small-label" x="221" y="184" text-anchor="middle">4%</text>
<text class="small-label" x="283" y="184" text-anchor="middle">5%</text>
<text class="small-label" x="345" y="184" text-anchor="middle">7%</text>
<text class="label" x="209" y="201" text-anchor="middle">Rate, per annum</text>
<text class="label" transform="translate(12 110) rotate(-90)" text-anchor="middle">Interest, rupees</text>
<text class="takeaway" x="150" y="34">Takeaway: rate matters when money stays put.</text>
</svg>
<p class="note">Rounded simple illustration; actual interest depends on daily balance method, credit frequency, tax rules and bank terms.</p>
</section>
<section class="quote">
<blockquote>A savings account is <span>liquid safety with modest yield</span> — not a cash box, and not a market investment.</blockquote>
<div class="quote-credit">The design trade-off is access first, return second.</div>
</section>
<section class="section">
<div class="section-head">
<div class="num">3</div>
<h3>Safety is strong, with a limit</h3>
</div>
<p class="lede">Indian savings accounts are protected by regulation and by deposit insurance through the Deposit Insurance and Credit Guarantee Corporation. The standard cover is up to ₹5,00,000 for each depositor in each insured bank, across principal and interest. That boundary matters once balances grow: ₹75,000 is fully covered, while ₹6,00,000 at one insured bank has ₹1,00,000 above
You
Give me another option using water colour orange and ivory. Show both options side by side
Assistant
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Savings Account Infographic — Neon and Watercolour Orange Options</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*{box-sizing:border-box}
body{
margin:0;
font-family:"IBM Plex Mono","Courier New",Courier,monospace;
font-variant-numeric:tabular-nums;
}
.comparison-wrap{
min-height:100vh;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
gap:16px;
padding:16px;
box-sizing:border-box;
background:#f0f0f0;
}
.variant-card{
border:1px solid #d6d3d1;
border-radius:4px;
overflow:hidden;
background:#ffffff;
min-height:1118px;
}
.variant-label{
height:34px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:0 12px;
border-bottom:1px solid #d6d3d1;
background:#ffffff;
color:#1c1917;
font-size:11px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
}
.variant-label span{
font-weight:400;
letter-spacing:0;
text-transform:none;
color:#57534e;
}
.variant-stage{
width:281px;
height:1084px;
margin:0 auto;
overflow:hidden;
position:relative;
}
.design{
width:390px;
transform:scale(.72);
transform-origin:top left;
min-height:1500px;
padding:24px 18px 26px;
position:relative;
color:var(--ink);
background:var(--paper);
}
.neon{
--paper:#fffbea;
--ink:#050605;
--accent:#39ff14;
--rule:rgba(5,6,5,.18);
--on-accent:#050605;
}
.orange{
--paper:#fff8e7;
--ink:#17110b;
--accent:#d9822b;
--rule:rgba(23,17,11,.18);
--on-accent:#fff8e7;
}
.orange::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 80% 4%, rgba(217,130,43,.15), transparent 24%),
radial-gradient(circle at 12% 38%, rgba(217,130,43,.08), transparent 22%),
radial-gradient(circle at 76% 72%, rgba(217,130,43,.10), transparent 24%);
}
.content{position:relative; z-index:1}
.kicker{
color:var(--accent);
text-transform:uppercase;
letter-spacing:.16em;
font-size:10px;
font-weight:600;
margin-bottom:10px;
}
h1{
margin:0 0 10px;
color:var(--ink);
font-size:34px;
line-height:1.02;
letter-spacing:-.07em;
font-weight:500;
}
.deck{
margin:0 0 14px;
font-size:12px;
line-height:1.42;
color:var(--ink);
}
.facts{
display:grid;
grid-template-columns:1fr;
gap:0;
border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);
margin:0 0 16px;
}
.fact{
display:grid;
grid-template-columns:92px 1fr;
gap:10px;
padding:9px 0;
border-bottom:1px solid var(--rule);
}
.fact:last-child{border-bottom:0}
.fact b{
color:var(--accent);
font-size:18px;
line-height:1;
letter-spacing:-.055em;
font-weight:500;
white-space:nowrap;
}
.fact span{
font-size:10px;
line-height:1.25;
}
.section{
padding:17px 0 19px;
border-bottom:1px solid var(--rule);
}
.section-head{
display:grid;
grid-template-columns:34px 1fr;
gap:10px;
align-items:start;
margin-bottom:8px;
}
.num{
color:var(--accent);
font-size:30px;
line-height:.9;
letter-spacing:-.08em;
font-weight:500;
}
h2{
margin:0;
color:var(--ink);
font-size:21px;
line-height:1.08;
letter-spacing:-.06em;
font-weight:500;
}
.lede{
margin:0 0 12px;
color:var(--ink);
font-size:10.7px;
line-height:1.42;
}
.chart-title{
margin:0 0 5px;
color:var(--ink);
font-size:10.5px;
font-weight:600;
}
.note{
margin:5px 0 0;
color:var(--ink);
font-size:9px;
line-height:1.35;
opacity:.82;
}
svg{
display:block;
width:100%;
height:auto;
overflow:visible;
}
.grid{
stroke:var(--rule);
stroke-width:1;
shape-rendering:crispEdges;
}
.axis{
stroke:var(--ink);
stroke-width:1;
shape-rendering:crispEdges;
}
.line{
fill:none;
stroke:var(--ink);
stroke-width:2;
stroke-linejoin:round;
}
.accent-fill{fill:var(--accent)}
.paper-fill{fill:var(--paper)}
.ink-fill{fill:var(--ink)}
.ink-stroke{stroke:var(--ink)}
.label,
.small-label,
.takeaway{
font-family:"IBM Plex Mono","Courier New",Courier,monospace;
fill:var(--ink);
}
.label{font-size:9.5px}
.small-label{font-size:8px}
.takeaway{
font-size:9.2px;
font-weight:600;
fill:var(--accent);
}
.quote{
padding:18px 0;
border-bottom:1px solid var(--rule);
}
blockquote{
margin:0;
color:var(--ink);
font-size:21px;
line-height:1.12;
letter-spacing:-.06em;
font-weight:500;
}
blockquote span{color:var(--accent)}
.quote-credit{
margin-top:7px;
color:var(--ink);
font-size:9.8px;
line-height:1.35;
opacity:.86;
}
.source{
padding-top:14px;
color:var(--ink);
font-size:8.5px;
line-height:1.35;
letter-spacing:.1em;
text-transform:uppercase;
font-weight:600;
opacity:.82;
}
</style>
</head>
<body>
<main class="comparison-wrap" aria-label="Two savings account infographic options side by side">
<article class="variant-card">
<div class="variant-label">Option A <span>Neon green / ivory</span></div>
<div class="variant-stage">
<div class="design neon">
<div class="content">
<div class="kicker">Indian banking mechanics</div>
<h1>What happens after rupees enter a savings account</h1>
<p class="deck">A savings account looks simple: deposit money, earn interest, withdraw when needed. Inside an Indian bank, it is a daily ledger that records your balance, credits interest, and protects eligible deposits up to a defined insurance limit.</p>
<div class="facts" aria-label="Key figures">
<div class="fact"><b>₹10,000</b><span>Opening balance used in the examples below.</span></div>
<div class="fact"><b>4.00%</b><span>Example annual savings interest rate.</span></div>
<div class="fact"><b>₹5 lakh</b><span>DICGC cover per depositor per insured bank.</span></div>
</div>
<section class="section">
<div class="section-head">
<div class="num">1</div>
<h2>The balance is a running ledger</h2>
</div>
<p class="lede">A savings account changes whenever money moves in or out. Salary credit raises the available balance after the bank posts it; UPI, ATM, NEFT, IMPS or debit-card payments reduce it when processed. Banks may show pending and available amounts differently. This example starts with ₹10,000, adds two credits, pays one expense, and ends higher because deposits exceeded withdrawals.</p>
<p class="chart-title">Posted balance after each event</p>
<svg viewBox="0 0 354 190" role="img" aria-label="Line chart showing a savings account balance in rupees over one month.">
<line class="grid" x1="50" y1="145" x2="335" y2="145"/>
<line class="grid" x1="50" y1="108" x2="335" y2="108"/>
<line class="grid" x1="50" y1="71" x2="335" y2="71"/>
<line class="axis" x1="50" y1="154" x2="335" y2="154"/>
<line class="axis" x1="50" y1="42" x2="50" y2="154"/>
<text class="small-label" x="43" y="157" text-anchor="end">₹8k</text>
<text class="small-label" x="43" y="111" text-anchor="end">₹10k</text>
<text class="small-label" x="43" y="74" text-anchor="end">₹12k</text>
<text class="small-label" x="50" y="172" text-anchor="middle">D1</text>
<text class="small-label" x="137" y="172" text-anchor="middle">D8</text>
<text class="small-label" x="224" y="172" text-anchor="middle">D22</text>
<text class="small-label" x="335" y="172" text-anchor="middle">D30</text>
<text class="label" x="194" y="187" text-anchor="middle">Day of month</text>
<text class="label" transform="translate(13 101) rotate(-90)" text-anchor="middle">Balance, rupees</text>
<polyline class="line" points="50,108 110,108 110,52 178,52 178,90 252,90 252,61 322,61"/>
<circle class="accent-fill" cx="110" cy="52" r="3.5"/>
<circle class="ink-fill" cx="178" cy="90" r="3.5"/>
<circle class="accent-fill" cx="252" cy="61" r="3.5"/>
<text class="small-label" x="110" y="35" text-anchor="middle">+₹5k</text>
<text class="small-label" x="178" y="106" text-anchor="middle">−₹3k</text>
<text class="takeaway" x="178" y="27">Takeaway: events move the balance.</text>
</svg>
<p class="note">Illustrative entries only; actual posting order depends on bank systems and payment rails.</p>
</section>
<section class="section">
<div class="section-head">
<div class="num">2</div>
<h2>Interest is paid for steady funds</h2>
</div>
<p class="lede">Banks can use savings deposits to support lending, securities and liquidity needs, so they pay interest. In India, savings interest is usually quoted per annum and credited monthly, quarterly or at another interval chosen by the bank. For a small saver, the first-year amount is modest but visible: on a constant ₹10,000 balance, a 4 percent annual rate gives roughly ₹400 before tax effects.</p>
<p class="chart-title">Annual interest on ₹10,000</p>
<svg viewBox="0 0 354 190" role="img" aria-label="Bar chart comparing annual interest earned on ten thousand rupees at different rates.">
<line class="grid" x1="52" y1="145" x2="335" y2="145"/>
<line class="grid" x1="52" y1="108" x2="335" y2="108"/>
<line class="grid" x1="52" y1="71" x2="335" y2="71"/>
<line class="axis" x1="52" y1="154" x2="335" y2="154"/>
<line class="axis" x1="52" y1="42" x2="52" y2="154"/>
<text class="small-label" x="44" y="157" text-anchor="end">₹0</text>
<text class="small-label" x="44" y="111" text-anchor="end">₹400</text>
<text class="small-label" x="44" y="74" text-anchor="end">₹800</text>
<rect class="accent-fill" x="75" y="126" width="34" height="28"/>
<rect class="accent-fill" x="128" y="112" width="34" height="42"/>
<rect class="accent-fill" x="181" y="98" width="34" height="56"/>
<rect class="accent-fill" x="234" y="84" width="34" height="70"/>
<rect class="accent-fill" x="287" y="56" width="34" height="98"/>
<text class="small-label" x="92" y="172" text-anchor="middle">2%</text>
<text class="small-label" x="145" y="172" text-anchor="middle">3%</text>
<text class="small-label" x="198" y="172" text-anchor="middle">4%</text>
<text class="small-label" x="251" y="172" text-anchor="middle">5%</text>
<text class="small-label" x="304" y="172" text-anchor="middle">7%</text>
<text class="label" x="194" y="187" text-anchor="middle">Rate, per annum</text>
<text class="label" transform="translate(13 101) rotate(-90)" text-anchor="middle">Interest, rupees</text>
<text class="takeaway" x="136" y="27">Takeaway: rate matters when money stays put.</text>
</svg>
<p class="note">Rounded illustration; actual interest depends on daily balance method, credit frequency, tax rules and bank terms.</p>
</section>
<section class="quote">
<blockquote>A savings account is <span>liquid safety with modest yield</span> — not a cash box, and not a market investment.</blockquote>
<div class="quote-credit">The design trade-off is access first, return second.</div>
</section>
<section class="section">
<div class="section-head">
<div class="num">3</div>
<h2>Safety is strong, with a limit</h2>
</div>
<p class="lede">Indian savings accounts are protected by regulation and by deposit insurance through the Deposit Insurance and Credit Guarantee Corporation. The standard cover is up to ₹5,00,000 for each depositor in each insured bank, across principal and interest. That boundary matters once balances grow: ₹75,000 is fully covered, while ₹6,00,000 at one insured bank has ₹1,00,000 above the standard insurance limit.</p>
<p class="chart-title">India’s ₹5 lakh deposit insurance limit</p>
<svg viewBox="0 0 354 190" role="img" aria-label="Horizontal bar chart showing insured and above-limit savings balances in India.">
<line class="grid" x1="66" y1="142" x2="330" y2="142"/>
<line class="grid" x1="66" y1="50" x2="66" y2="150"/>
<line class="grid" x1="198" y1="50" x2="198" y2="150"/>
<line class="grid" x1="330" y1="50" x2="330" y2="150"/>
<line class="axis" x1="66" y1="150" x2="330" y2="150"/>
<text class="small-label" x="66" y="168" text-anchor="middle">₹0</text>
<text class="small-label" x="198" y="168" text-anchor="middle">₹4L</text>
<text class="small-label" x="330" y="168" text-anchor="middle">₹8L</text>
<text class="label" x="198" y="185" text-anchor="middle">Balance, rupees</text>
<text class="small-label" x="56" y="77" text-anchor="end">₹75k</text>
<text class="small-label" x="56" y="112" text-anchor="end">₹5L</text>
<text class="small-label" x="56" y="144" text-anchor="end">₹6L</text>
<rect class="accent-fill" x="66" y="64" width="25" height="20"/>
<rect class="accent-fill" x="66" y="99" width="165" height="20"/>
<rect class="accent-fill" x="66" y="131" width="165" height="20"/>
<rect class="paper-fill ink-stroke" x="231" y="131" width="33" height="20" stroke-width="1"/>
<line class="ink-stroke" x1="231" y1="42" x2="231" y2="152" stroke-width="1" stroke-dasharray="4 4"/>
<text class="small-label" x="231" y="34" text-anchor="middle">₹5L limit</text>
<text class="takeaway" x="142" y="22">Takeaway: cover is per depositor per insured bank.</text>
</svg>
<p class="note">Insurance treatment can vary with ownership and accounts at the same bank.</p>
</section>
<footer class="source">Sources: RBI consumer banking material; DICGC deposit insurance guidance; illustrative calculations by Aishwin Design.</footer>
</div>
</div>
</div>
</article>
<article class="variant-card">
<div class="variant-label">Option B <span>Watercolour orange / ivory</span></div>
<div class="variant-stage">
<div class="design orange">
<div class="content">
<div class="kicker">Indian banking mechanics</div>
<h1>What happens after rupees enter a savings account</h1>
<p class="deck">A savings account looks simple: deposit money, earn interest, withdraw when needed. Inside an Indian bank, it is a daily ledger that records your balance, credits interest, and protects eligible deposits up to a defined insurance limit.</p>
<div class="facts" aria-label="Key figures">
<div class="fact"><b>₹10,000</b><span>Opening balance used in the examples below.</span></div>
<div class="fact"><b>4.00%</b><span>Example annual savings interest rate.</span></div>
<div class="fact"><b>₹5 lakh</b><span>DICGC cover per depositor per insured bank.</span></div>
</div>
<section class="section">
<div class="section-head">
<div class="num">1</div>
<h2>The balance is a running ledger</h2>
</div>
<p class="lede">A savings account changes whenever money moves in or out. Salary credit raises the available balance after the bank posts it; UPI, ATM, NEFT, IMPS or debit-card payments reduce it when processed. Banks may show pending and available amounts differently. This example starts with ₹10,000, adds two credits, pays one expense, and ends higher because deposits exceeded withdrawals.</p>
<p class="chart-title">Posted balance after each event</p>
<svg viewBox="0 0 354 190" role="img" aria-label="Line chart showing a savings account balance in rupees over one month.">
<line class="grid" x1="50" y1="145" x2="335" y2="145"/>
<line class="grid" x1="50" y1="108" x2="335" y2="108"/>
<line class="grid" x1="50" y1="71" x2="335" y2="71"/>
<line class="axis" x1="50" y1="154" x2="335" y2="154"/>
<line class="axis" x1="50" y1="42" x2="50" y2="154"/>
<text class="small-label" x="43" y="157" text-anchor="end">₹8k</text>
<text class="small-label" x="43" y="111" text-anchor="end">₹10k</text>
<text class="small-label" x="43" y="74" text-anchor="end">₹12k</text>
<text class="small-label" x="50" y="172" text-anchor="middle">D1</text>
<text class="small-label" x="137" y="172" text-anchor="middle">D8</text>
<text class="small-label" x="224" y="172" text-anchor="middle">D22</text>
<text class="small-label" x="335" y="172" text-anchor="middle">D30</text>
<text class="label" x="194" y="187" text-anchor="middle">Day of month</text>
<text class="label" transform="translate(13 101) rotate(-90)" text-anchor="middle">Balance, rupees</text>
<polyline class="line" points="50,108 110,108 110,52 178,52 178,90 252,90 252,61 322,61"/>
<circle class="accent-fill" cx="110" cy="52" r="3.5"/>
<circle class="ink-fill" cx="178" cy="90" r="3.5"/>
<circle class="accent-fill" cx="252" cy="61" r="3.5"/>
<text class="small-label" x="110" y="35" text-anchor="middle">+₹5k</text>
<text class="small-label" x="178" y="106" text-anchor="middle">−₹3k</text>
<text class="takeaway" x="178" y="27">Takeaway: events move the balance.</text>
</svg>
<p class="note">Illustrative entries only; actual posting order depends on bank systems and payment rails.</p>
</section>
<section class="section">
<div class="section-head">
<div class="num">2</div>
<h2>Interest is paid for steady funds</h2>
</div>
<p class="lede">Banks can use savings deposits to support lending, securities and liquidity needs, so they pay interest. In India, savings interest is usually quoted per annum and credited monthly, quarterly or at another interval chosen by the bank. For a small saver, the first-year amount is modest but visible: on a constant ₹10,000 balance, a 4 percent annual rate gives roughly ₹400 before tax effects.</p>
<p class="chart-title">Annual interest on ₹10,000</p>
<svg viewBox="0 0 354 190" role="img" aria-label="Bar chart comparing annual interest earned on ten thousand rupees at different rates.">
<line class="grid" x1="52" y1="145" x2="335" y2="145"/>
<line class="grid" x1="52" y1="108" x2="335" y2="108"/>
<line class="grid" x1="52" y1="71" x2="335" y2="71"/>
<line class="axis" x1="52" y1="154" x2="335" y2="154"/>
<line class="axis" x1="52" y1="42" x2="52" y2="154"/>
<text class="small-label" x="44" y="157" text-anchor="end">₹0</text>
<text class="small-label" x="44" y="111" text-anchor="end">₹400</text>
<text class="small-label" x="44" y="74" text-anchor="end">₹800</text>
<rect class="accent-fill" x="75" y="126" width="34" height="28"/>
<rect class="accent-fill" x="128" y="112" width="34" height="42"/>
<rect class="accent-fill" x="181" y="98" width="34" height="56"/>
<rect class="accent-fill" x="234" y="84" width="34" height="70"/>
<rect class="accent-fill" x="287" y="56" width="34" height="98"/>
<text class="small-label" x="92" y="172" text-anchor="middle">2%</text>
<text class="small-label" x="145" y="172" text-anchor="middle">3%</text>
<text class="small-label" x="198" y="172" text-anchor="middle">4%</text>
<text class="small-label" x="251" y="172" text-anchor="middle">5%</text>
<text class="small-label" x="304" y="172" text-anchor="middle">7%</text>
<text class="label" x="194
Idle