Markets are loud. Hot tips, doomscroll headlines, finfluencer noise — all of it shouting at once. This or That exists to quiet that down to a single, honest question: when it actually matters, do you go this way or that way? We take one decision per episode, weigh both sides, and pick one.
That duality is the entire brand. It's a name, a format, a design device and a promise — and it scales from a podcast to a finance brand and media house without losing its shape.
This
#0249B1 · blue
One option. The primary interactive accent — links, primary actions, the side we're weighing first.
The stage
#FFC21F · marigold
The field it all plays out on. Optimistic, loud, unmistakably ours — reserved for brand & marketing moments.
That
#FF302D · red
The other option. The counter, the pop, the emphasis — used sparingly so it always means something.
In one line
Too much noise. Not enough signal. We help you make the call.
Who it's for
Indian retail investors and the financially-curious, 25–45, with money to put to work and no patience for hype. They want a sharp, trusted voice that helps them decide — and grows with them from listener to investor.
How it feels
Bold & loud, warm & friendly, clean & modern, a little playful. A confident host who's done the homework and makes a hard choice feel obvious — opinionated, never preachy.
02Logo
One mark, two jobs.
The logo is a hand-drawn lockup: This in blue and That in red, crossed by two arrows — one rising, one falling — over the marigold field, with the beyond the noise tagline and the host's signature. The hand-drawn quality is the point: human, decisive, a little irreverent.
Primary mark — logo-square.png. Cover art & episode artwork.
Wordmark on paper — logo-wordmark.png.
Wordmark on ink — same file, reads on dark.
Clear space & construction
Define a unit × = the cap-height of the wordmark's “T”. Keep at least 1× clear on every side, free of type, images and edges. Never let anything intrude on the box.
1×1×1×1×
×
Clear space = 1× the “T” cap-height (red square = 1×).
◂ 120px ▸
Digital minimum — 120px wide.
◂ 28mm ▸
Print minimum — 28mm wide.
Below the minimum, switch to the square mark.
When to use which
Square mark — cover art, episode tiles, avatars, anywhere the full brand moment fits.
Wordmark (transparent) — nav bars, footers, slide lockups, app headers. Reads on paper, ink and marigold.
Clear space — keep at least the height of the “T” clear on every side. Never crowd it.
Minimum size
Wordmark no smaller than 120px wide on screen / 28mm in print, so the hand-drawn strokes and tagline stay legible. Below that, use the square mark or set “This or That” in Bricolage Grotesque with the blue/red split.
Don't
✕ Place on blue or red — the strokes vanish.
✕ Stretch, squash or distort.
✕ Recolor or desaturate the wordmark.
✕ Set over busy imagery.
Note: the transparent wordmark is currently chroma-keyed from a 1080px raster. For pin-sharp small sizes and reversed/mono treatments, commission a true vector (SVG) of the mark.
03Color
Three colors that argue well.
The palette comes straight from the logo. Marigold is the stage; blue is “This” and the primary interactive accent; red is “That,” the pop. One loud move per view — earn the second. Everything sits on warm paper and ink, never pure white or pure black.
Marigold — the stage
050#FFF7DE
200#FFE9AE
400#FFD15C
★ BRAND500 · #FFC21F --brand · the stage
600#D99B00
Blue — “This” (primary)
600 · #0249B1--accent
Red — “That” (pop)
500 · #FF302D--accent-2
Neutrals — warm paper → ink
#FCFBF8
#F6F4EE
#E1DDD1
#8A8275
#57534A
#2C2A23
#1A1813
Semantic — money direction
+ Gain
#1F8A5B
− Loss
#E0211E
! Warn
#D99B00
Green is a signal only, never a brand color. Always pair color with a +/− sign or arrow for accessibility.
Usage ratio
Paper / ink 60
Marigold 25
Blue 10
5
A rough guide: mostly neutral, marigold for brand moments, blue for the one key action, red as a rare accent.
04Typography
Four voices, one system.
Expressive where it counts, quiet where it works. Headlines have character, the UI gets out of the way, numbers line up, and a hand-drawn accent echoes the logo — used like a highlighter, never a paragraph.
DisplayBricolage Grotesque · 700–800
SIP or lump sum?
Headlines, episode titles, big statements. Tight tracking, sentence case.
UI & bodyHanken Grotesk · 400–700
We take one money decision per episode — pick a side, show the working, and leave you clearer than you started. Plain language, no jargon, no hype.
DataIBM Plex Mono
₹1,20,000 +14.2%
Every number, ticker & label. Indian ₹/lakh/crore.
Script accentCaveat
this or that?
A circled word, a “vs”, a margin note. Sparingly.
Type rules
Sentence case for headlines and buttons.
UPPERCASE only for tiny eyebrow labels, wide-tracked.
Numbers always in mono, for clean alignment.
Never use Caveat for body — it's an accent.
Scale (px)
Display 2XL / XL / LG76 · 58 · 44
Title LG / MD / SM28 · 22 · 18
Body LG / MD / SM18 · 16 · 14
Caption / Micro13 · 11
05Voice & tone
Sharp, warm, and willing to pick a side.
We sound like a host who's done the homework so you don't have to — confident and opinionated, but honest about uncertainty. We translate jargon, we don't show off with it. We speak to you; the brand is we.
We do
Pose a fork, then guide. “Index or stock-picking?”
Too much noise. Not enough signal. Let's fix that.
Empty state
No decisions yet. Pick a fork and we'll talk it through.
Button
Listen now · Settle the debate · See both sides
Boilerplate — ready-made descriptions
Copy-paste for app stores, PR, partner sites and bios. Don't paraphrase — consistency is the point.
One lineA finance podcast that cuts the noise — one money decision per episode, settled.
50 wordsThis or That is a personal-finance podcast hosted by Bhartendra Singh that helps Indians make clearer money decisions. Each week takes one fork — index or stocks, rent or buy, SIP or lump sum — weighs both sides in plain language, and picks one. Beyond the noise, toward the signal.
100 wordsThis or That is a personal-finance podcast — and a growing finance brand and media house — hosted and curated by Bhartendra Singh. It exists for Indian investors drowning in market noise: hot tips, doomscroll headlines, finfluencer hype. Every episode reduces the chaos to a single honest question — this or that? — and settles one real money decision in plain language, without jargon or false promises. From index funds to insurance, rent to buy, the show weighs both sides and commits to an answer. The mission is simple: less noise, clearer calls, better decisions over time. Beyond the noise.
06Imagery & icons
Warm, real, and pointed.
Photography
Warm, natural light. Real people in candid Indian context — not stock-posed. Editorial crops, a slight warm grade. Host photography and waveform/mic motifs fit the audio brand.
Placeholder slots
Until real imagery lands, use a striped fill with a small mono label so empty slots read as intentional, not broken.
HOST PHOTO
Iconography
Lucide, outline only, ~1.75px stroke, rounded joins. Icons follow text color; accent icons use blue, or red for the “That” side. The signature motif is the arrow — rising in blue, falling in red — a nod to the logo and the duality. Sizes 16 / 20 / 24px; 20 is default. Touch targets ≥ 44px.
↗or↘
Icon set — specimen
A working subset at the house 1.75px stroke. Use Lucide for anything not shown; keep the weight and rounded joins consistent.
mic
headphones
play
trending-up
rupee
target
wallet
bell
search
arrow ↗
arrow ↘
chart
07Components & motion
The system in use.
Buttons
Listen nowBoth sidesAll episodesSkip
One blue primary per view. Red that only for a genuine counter-choice. Hover lifts 1px (primary gains a blue glow); press settles to 0.98.
Badges
ThisThatNew episodeEpisode 142+12.4%−2.1%
Surfaces & shape
Cards on a slightly lighter surface, soft warm shadow, 18px radius.
“Feature” cards use a 1.5px ink border instead of shadow — a drawn, editorial feel.
No colored left-border-only cards. Shadows warm-tinted, never blue-black.
Motion
Energetic but controlled — a touch springier than corporate.
Entrances: short fades + 8–12px rises. Numbers can count up; arrows can draw on.
Standard 220ms ease-out; interactive springs allow a slight overshoot. Respect reduced-motion.
When in doubt, frame it as a choice — and make the call.
This or That · beyond the noise · v1.0
08Grid & layout
Everything on an 8.
One number keeps the system tidy: 8. Spacing, type rhythm and component sizes all step in multiples of 8px (with a 4px half-step where needed). Layouts use a 12-column grid with generous margins; brand moments may break the grid on purpose — once.
12-column grid
span 7 — content
span 5 — aside
Desktop max-width 1320px · 24–32px gutters · ≥ 80px outer margin. Mobile drops to 4 columns, 16px gutters.
Spacing scale (px)
4
8
16
24
32
48
64
Corner radii
6 · sm
12 · md
18 · lg
36 · xl
Friendly, not bubbly. Numbers & tables stay tighter; big marketing panels can go full xl.
09Accessibility
Loud, but legible to everyone.
A bold palette only works if everyone can read it. Target WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large text (24px+/19px bold) and UI. The big watch-out is marigold — it's a background, not a text color.
Text-on-background pairings
Ink on marigold
✓ AA · ~10.9:1
Blue on marigold
✓ Large only · ~4.0:1
White on marigold
✗ Fails · ~1.5:1
Red on marigold
✗ Avoid · ~2.0:1
White on blue
✓ AA · ~8.6:1
White on red
✓ AA · ~4.6:1
Blue on paper
✓ AA · ~7.4:1
White on ink
✓ AAA · ~16:1
Ratios are approximate — always re-check final pairings in a contrast tool. On marigold, use ink for everything except large blue display.
Beyond contrast
Never rely on color alone — gain/loss always carries a +/− sign or arrow.
Body text ≥ 16px; never below 13px. Line length 60–75 characters.
Visible focus states — the blue focus ring, not just a color shift.
Touch targets ≥ 44 × 44px with ≥ 8px between them.
Content & media
Every episode ships with a transcript and show notes.
Alt text on all images; captions on video/social.
Respect prefers-reduced-motion — drop count-ups & draw-ons.
Plain-language first; expand jargon on first use.
10UI — web & mobile
Calm product, loud brand.
In product, the noise drops. Screens sit on warm paper, blue carries the one key action, and the marigold stage is saved for headers and brand moments. People are looking at their money — be precise and reassuring.
Web — app shell
OverviewHoldingsGoalsLearn
R
Net worth
₹14,82,400
↑ ₹8,240 today · +14.2% XIRR
Retirement goal — 68% there
New episode
SIP or lump sum?
▸ Play
Mobile
₹14,82,400
↑ +14.2%
Holdings · 8 funds
▸ New episode
● Home
Goals
Listen
Inputs & states
₹Monthly amount
₹10,000Focus
500Min ₹1,000
Toggle on = blue. Off = paper-3 track.
Product rules
Touch targets ≥ 44px · one blue primary per screen · numbers in mono · gain green / loss red, always with a sign · marigold for headers & brand cards only · dense but calm, never cramped.
11Print & marketing
Loud on paper, too.
Collateral leans into the marigold stage and big Bricolage headlines. Print in CMYK; keep a 3mm bleed and a clear-space margin equal to the “T” height. Specify Pantone where brand fidelity matters.
Business card — 89 × 51mm. Ink front, marigold back.
▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭ ▭▭▭▭▭▭▭▭▭▭▭▭ ▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭
thisorthat.fm · beyond the noise
Letterhead — A4, wordmark top-left, mono footer.
Production specs
Color spaceCMYK / Pantone
Bleed3mm all sides
Min body type9pt
Resolution300 dpi
Do
One headline, one fork, one call per piece.
Marigold field or ink — not both fighting.
Keep the wordmark off blue/red panels.
12Social media
Built for the scroll.
Social is where the “or” device earns its keep. Pose the fork in the first frame, big and high-contrast, so it stops the thumb. One idea per post. Safe margins clear of platform UI.
Index or stocks?
EP 142 · FRI
Feed post · 1080² (1:1)
the quote
“I stopped chasing every hot take. I started asking: this or that?”
Quote card · 1080² (1:1)
SAFE AREA
Rent or buy?
Swipe up
Story / Reel · 1080×1920 (9:16)
Format kit
Feed post (square)1080 × 1080
Portrait / carousel1080 × 1350
Story / Reel1080 × 1920
Safe margin≥ 96px / 14%
Captions
Sentence case, lead with the fork, end with a clear ask. Emoji allowed sparingly here — never as bullet decoration. Hashtags small and few: #ThisOrThat #BeyondTheNoise.
Instagram post — reference
A complete feed post as it appears in-app — the on-brand creative plus correct profile, caption and hashtag treatment.
thisorthat.fm
Original audio · Episode 142
···
This week · we settle
SIP or lump sum?
▸Tap to listen free
2,418 likes
thisorthat.fm One puts it all in today. The other drips it in monthly. We ran the math on both — and the winner surprised most people. 🎧 Full breakdown in Ep 142, link in bio. #ThisOrThat #BeyondTheNoise #SIP #PersonalFinanceIndia
2 hours ago
Anatomy
Avatar — the square mark on its marigold field; the story ring uses the brand trio.
Handle — always lowercase thisorthat.fm, with the episode as the audio label.
Creative — the fork on the marigold stage: blue “This” option, red “That” option, Caveat “or”, wordmark top-left, one CTA.
Caption — lead with the tension, end with “link in bio”. One emoji max.
Hashtags — 3–5, brand tags first, in blue.
✓ Do
Keep the fork legible at thumbnail size — the two options should read before the caption does.
✕ Don't
Crowd the creative with both stats and a CTA and a photo. One idea per post.
13Digital creatives
Ads, banners & thumbnails.
Paid and on-platform creative works hard in small space. Wordmark always visible, one message, blue CTA, marigold or ink ground. Thumbnails optimise for a 120px-tall preview — big type, high contrast, a face or the fork.
FD or debt fund? We settle it.
Listen free ▸
Leaderboard · 728 × 90
Make the call.
Listen now
Half-page · 300×600
YouTube / podcast thumbnail
EPISODE 142
SIPor lump sum?
HOST
Thumbnail · 1280 × 720 — legible at 120px tall.
Banner rules
Wordmark + one line + one CTA, max · keep files under platform weight limits · static first, animate only the CTA or the arrow draw-on · never shrink the wordmark below legibility.
14Email
The inbox edition.
Email is the weekly handshake: one fork, one takeaway, one link. A single 600px column, system-safe fallbacks for our fonts, and real text — never an all-image email. Marigold header, paper body, blue links.
This week · Ep 142
SIP or lump sum? We settle it.
The case for each — and the one that wins for most people. A 6-minute listen, plus the one-page playbook.
Listen now ▸
This or That · beyond the noise Curated by Bhartendra Singh Unsubscribe · View online
Teaser / announce email — short, one CTA.
Weekly edition — full creative
The longer Friday newsletter: a hero fork, the two-sided breakdown, more episodes, and a host sign-off. Still one column, still one primary action.
One puts it all in today. The other drips it in monthly…
Fri · Ep 142
This week we settle
SIPor lump sum?
You've got a windfall — a bonus, a maturity, some idle cash. Drip it in monthly, or put it to work today? We ran both, honestly, across good markets and ugly ones.
This
SIP it in
Smooths the ride. Lower regret, slightly lower average return.
That
Lump sum
Wins ~2 in 3 times historically — if you can stomach the dip.
Hear the verdict ▸
6-min listen · + one-page playbook
More forks worth your time
141Rent or buy? The honest math.
140FD or debt fund? No jargon.
BS
— Bhartendra
Host & curator
This or That · beyond the noise You're in because you love clearer money calls. Unsubscribe · Update preferences · View online
Anatomy
Preheader — the inbox preview line; pose the fork before they open.
Header — marigold band, wordmark left, issue tag right.
Hero — ink block, the fork in display type. The one bold moment.
This / That cards — blue vs red, the two-sided device made literal.
One CTA — a single blue bulletproof button.
Sign-off — a human note from the host in Caveat.
Rule
Real text throughout — if images are blocked, the fork, the verdict link and the sign-off still read.
Build specs
Body width600px
Body type15–16px
Font fallbackArial / Helvetica
CTABulletproof button
Rules
Real text, never an all-image email.
Web fonts degrade to a system sans gracefully.
One primary CTA; links in blue, underlined.
Subject lines pose the fork: “SIP or lump sum?”
End of guidelines · v1.0 · 2026 · beyond the noise
