Brand

mBR Brand System

Date locked: 2026-04-08 Last updated: 2026-04-18 (wordmark animation revised — small $ permanent resting state) Status: Production-ready (typography, colors, animation, naming, logo ✓)

Monorepo implementation target: ~/projects/monorepo/src/brand/mbr/ SDC sibling brand: ~/projects/monorepo/src/brand/sd/

---

Naming Convention

Context	Form	Example
External (all public channels)	myBetterRates	”Start saving with myBetterRates”
Internal (docs, code, shorthand)	mBR	src/brand/mbr/, task files, meetings

Rules:

• “my” is always lowercase, weight 400
• “BetterRates” is always bold (weight 600 in Inter), written as one word
• Never: “MyBetterRates”, “MBR”, “my better rates”, “mybetterrates”
• AutoHotKey hotstring: ;mb → my**BetterRates** (Obsidian / markdown)
• HTML/email: my<strong>BetterRates</strong> with inline font-weight: 600

---

Tagline

Your life deserves more, automatically.

• “Your” in italic
• All lowercase (sentence case, first word only)
• Full stop at end
• Do not alter word order or substitute synonyms

---

Color Palette

Token	Hex	Usage
Treasury Emerald	#004425	Primary — logo background, headings, CTAs
Wealth Gold	#D5B038	Accent — logo dot, highlights
Pledge Rose	#E8627A	Cancer50Pledge elements only — dot swap on logo mark
Background (light)	#f5f5f0	Page backgrounds, cards

Treasury Emerald and Wealth Gold are shared with the SDC brand system. They are family colors — do not alter them for either brand.

---

Typography

Primary font: Inter (variable)

Google Fonts load string:

https://fonts.googleapis.com/css2?family=Inter:opsz,wght@0,14..32,100..900&display=swap

Wordmark weights

Part	Weight	Rendering
my	400	Regular
BetterRates	600	SemiBold

The 400/600 gap creates visible hierarchy — the product name dominates, the possessive prefix recedes. This mirrors the SDC pattern ($MART DEBT Coach). A narrower gap (e.g. 400/500) is insufficient contrast; a wider gap (400/700) is too aggressive for a trust-based finance brand.

Wordmark animation

The terminal character of “myBetterRates” is always displayed as a small $ (at x-height), ensuring the brand’s financial identity is continuously visible. Every 4 seconds, the small $ briefly expands to a full-size $ (cap-height), synced to the logo bar-blink. The pulse is brief — a brand signature, not a UI distraction.

Design rationale (2026-04-18):

• A small $ as the permanent resting state means the financial signal is always present at all text sizes, including 12px email signatures. An s resting state would hide the dollar identity 87.5% of the time.
• The brief cap-height $ pulse creates a memorable brand moment without sustained disruption. It reads as emphasis, not oscillation.
• Logo sync: wordmark and logo pulse simultaneously every 4 seconds. A reader who notices both gets a coordinated brand moment that builds equity over repeated exposure.
• SEO: aria-label="myBetterRates" on the outer span ensures screen readers and web crawlers always read “myBetterRates”, not “myBetterRate$”.

Production component: sites/Template/src/components/brand/MyBetterRatesEntity.astro

Usage:

<MyBetterRatesEntity />                    <!-- myBetterRates -->
<MyBetterRatesEntity variant="Advisor" />  <!-- myBetterRates Advisor -->

Animation timing (logo-sync):

• Small $ (x-height) rests for 87.5% of the 4s cycle (3.5s)
• Brief pulse window at 93.75% — identical to logo bar-blink and dot-pulse keyframe percentages
• Cross-device safe: position:absolute overlay (avoids inline-grid iPad/Safari bug)
• Respects prefers-reduced-motion: small $ stays visible, big $ stays hidden

Implementation specifics (font-sizes, CSS positioning) are canonical in the component source.

Reference prototype: _WorkingOn/Brainstorming/archive/logo/test-animations-3.html

---

Logo Mark

Mark description

Treasury Emerald floating oval → white Inter 700 $ glyph → Wealth Gold accent dot (flush with oval top-right corner).

No outer container: the oval IS the mark. The resting state shows the complete $ sign (S-curve + vertical bar both visible). On a 4-second cycle the bar briefly fades to 0 for ~0.5s then returns; simultaneously the gold dot scales to 1.2× — both recover together. The S is never shown in isolation for more than ~0.25s (the mid-fade moment).

Decision (2026-04-17): Animation direction changed from “S resting → $ reveal” to ”$ resting → bar blinks + dot pulses”. Rationale: S has no semantic meaning in mBR context; $ is the correct resting identity. Brief bar absence draws attention without permanently surfacing the S. Dot pulse reinforces the gold accent as a brand signature element.

Decision (2026-04-11): Floating mark chosen over dollar-bill (rect + leaf) variant. The floating oval fills more space at any given display height, reads at smaller sizes, and carries a lighter visual weight that suits the mBR brand personality.

SVG files (production)

File	State	Usage
mbr-dollar-dot.svg	$ state (S + bar visible)	Animated web contexts — control #char-bar via CSS/JS
mbr-dollar-dot-s.svg	S state (bar hidden)	Static contexts: email, print, PNG export baseline

Archive: _WorkingOn/Brainstorming/archive/logo/ Monorepo: ~/projects/monorepo/src/brand/mbr/logos/svg-paths-base/

SVG specification

ViewBox: 27 8 76 84 (3 px padding around oval bounds x:[30,100] y:[11,89])

Oval path (Treasury Emerald, hw=35, hh=39):

<path id="oval-bg" fill="#004425"
  d="M65 11 C96 11,100 29,100 50 C100 71,96 89,65 89 C34 89,30 71,30 50 C30 29,34 11,65 11Z"/>

Character paths (Inter 700, shared path data with SDC):

<g transform="translate(30.70,-8.03) scale(1.15)">
  <!-- S-curve: always visible (resting state) -->
  <path id="char-s" fill="white" stroke-width=".53"
    d="m37 42q-0.24-2.4-2-3.7-1.8-1.3-4.9-1.3-2.1 0-3.6 0.6-1.5 0.58-2.2
       1.6-0.76 1-0.76 2.3-0.04 1.1 0.46 1.9 0.52 0.82 1.4 1.4 0.89 0.58
       2.1 1 1.2 0.42 2.5 0.72l3.7 0.87q2.7 0.6 4.9 1.6t3.9 2.4q1.6 1.5
       2.5 3.4 0.91 2 0.93 4.5-0.02 3.7-1.9 6.5-1.9 2.7-5.4 4.2-3.5 1.5
       -8.5 1.5-4.9 0-8.6-1.5-3.6-1.5-5.7-4.5-2-3-2.1-7.4h8.3q0.14 2 1.2
       3.4 1.1 1.4 2.8 2 1.8 0.68 4 0.68 2.2 0 3.8-0.64 1.6-0.64 2.5-1.8
       0.89-1.1 0.89-2.6 0-1.4-0.82-2.3-0.8-0.93-2.3-1.6-1.5-0.66-3.8-1.2
       l-4.4-1.1q-5.2-1.3-8.1-3.9t-3-7.2q-0.02-3.7 2-6.5 2-2.8 5.5-4.3
       3.5-1.6 8-1.6 4.5 0 7.9 1.6 3.4 1.6 5.3 4.3 1.9 2.8 1.9 6.4z"/>

  <!-- Vertical bar: fades in on 4s cycle to complete the $ sign -->
  <path id="char-bar" fill="white" stroke-width=".53"
    d="m28 76v-51h3.3v51z"/>
</g>

Accent dot (Wealth Gold, flush with oval top-right corner):

<circle id="accent-dot" cx="92" cy="19" r="8" fill="#D5B038"/>

Flush derivation: cx = oval_right − r = 65+35−8 = 92, cy = oval_top + r = 50−39+8 = 19

Cancer50Pledge variant: Same mark, dot color → #E8627A (Pledge Rose).

Transform derivation:

S bbox: x=13.73..45.93 (cx=29.83), y=29.43..71.49 (cy=50.46)  [local space]
Scale 1.15 → width=37 (77% of oval 70), height=48.4
tx: 50 − 29.83×1.15 = 15.70 → offset +15 to centre in oval at cx=65 → tx=30.70
ty: 50 − 50.46×1.15 = −8.03  (centres S at oval cy=50) ✓

Logo animation (CSS keyframes)

/* Bar blinks: $ solid 3.5s, bar disappears for ~0.5s */
@keyframes bar-blink {
  0%, 87.5%  { opacity: 1; }
  93.75%     { opacity: 0; }
  100%       { opacity: 1; }
}

/* Dot pulse: scales 1→1.2× in same 0.5s window as bar */
@keyframes dot-pulse {
  0%, 87.5%  { transform: scale(1); }
  93.75%     { transform: scale(1.2); }
  100%       { transform: scale(1); }
}

#char-bar {
  animation: bar-blink 4s ease-in-out infinite;
}
#accent-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-pulse 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #char-bar, #accent-dot { animation: none; }
}

No JS required — pure CSS keyframe animations. Cycle duration is 4s.

Reference showcase: _WorkingOn/Brainstorming/archive/logo/test-animations-3.html (Option B)

SDC family relationship

mBR and SDC share:

• Treasury Emerald background + Wealth Gold accent dot
• Oval/leaf motif (same Bezier control point ratio)
• Inter 700 path data (same source glyph)
• Identical S→$ bar animation mechanism
• 0.4s ease-in-out transition, 4s cycle

This visual DNA signals product family without requiring an explicit wordmark connection.

---

Cancer50Pledge Sub-brand

The Cancer50Pledge is a pledge/charity component of mBR. Its brand touchpoints:

• Logo: mBR mark with Pledge Rose dot (#E8627A) instead of Wealth Gold
• Color accent: Pledge Rose #E8627A (warm rose-coral)
• No separate wordmark — Cancer50Pledge is always associated with the mBR mark

---

Implementation (Monorepo)

Integrated at ~/projects/monorepo/src/brand/mbr/ (2026-04-11):

src/brand/mbr/
├── index.ts                        ← brand contract (colors, logo imports)
├── logos/
│   └── svg-paths-base/
│       ├── mbr-dollar-dot.svg      ← animated state (S + bar)
│       ├── mbr-dollar-dot-s.svg    ← resting state (S only)
│       └── README.md
└── favicons/                       ← generated by `pnpm favicon:mbr`
    ├── favicon.svg (64×64)
    ├── favicon-dark.svg (64×64)
    ├── favicon-16x16.svg
    ├── favicon-32x32.svg
    ├── apple-touch-icon.svg (180×180)
    ├── favicon-512x512.svg
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    └── README.md

Regenerate favicons: pnpm favicon:mbr from monorepo root.