From 602b5700646919db0b1ac4c30beb9dd66204e406 Mon Sep 17 00:00:00 2001 From: Yashas Date: Mon, 17 Aug 2026 16:55:50 +0530 Subject: [PATCH] fix(brand): the logo, the typeface and the palette are HDFC's actual ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The console was wearing an approximation of the bank. Everything here was read off HDFC Bank's own production assets instead. The mark was inside out. It had been drawn as a blue square with a red square inset; HDFC's is the reverse — a red ground, a white channel cross splitting it into four corner blocks, and a small blue square at the centre. Every coordinate now comes verbatim from the SVG the bank serves in its own site header, including the "HDFC BANK" wordmark outlines, so the lockup is the bank's rather than a redrawing of it. The favicon in index.html carried the same inversion and is fixed with the same numbers. Open Sans replaces the Segoe UI stack. hdfcbank.com preloads OpenSans Regular / SemiBold / Bold / ExtraBold and sets its whole site in it. It is self-hosted through @fontsource-variable/open-sans rather than pulled from a CDN, for the reason the API URL is read at runtime: this build gets promoted between environments and dropped behind bank proxies, and a font that sometimes fails to arrive is a product that sometimes looks like someone else's. The header stops being a navy band. HDFC puts the full lockup on a light ground on every one of its own digital surfaces, and a navy header made the real logo unusable — the lockup's own blue bar would have dissolved into it. The blue now does its work as the rule under the header, the active queue and the primary button, which is how the bank uses it. The lockup's 3px white keyline is the bank's own, so it sits correctly on the panel in dark mode too and no reversed variant is needed. Palette, grounded rather than invented: the page canvas is #F0F6FB, the tint hdfcbank.com uses behind content; the good/ tokens sit on the hue of the bank's #00B947 instead of a generic emerald, darkened to #00713D because #00B947 is 2.6:1 on white and unreadable as a label. The two brand hexes were already right and are unchanged. Also closes three AA failures the palette claimed it did not have — --color-faint in light, and --color-faint / --color-brand in dark, each below 4.5:1 on --color-panel3. White on --color-signal (4.31:1) is left alone knowingly: darkening HDFC red for the Decline button would have made it a different red from the logo beside it. --- README.md | 46 +++++++++-- index.html | 21 +++-- package-lock.json | 10 +++ package.json | 1 + src/components/HdfcLogo.tsx | 143 +++++++++++++++++++++++++++++++++ src/components/HdfcMark.tsx | 52 ------------ src/components/ThemeToggle.tsx | 13 +-- src/layout/Shell.tsx | 35 +++++--- src/main.tsx | 7 ++ src/pages/Login.tsx | 28 +++++-- src/styles.css | 73 ++++++++++------- src/theme.ts | 6 +- 12 files changed, 316 insertions(+), 119 deletions(-) create mode 100644 src/components/HdfcLogo.tsx delete mode 100644 src/components/HdfcMark.tsx diff --git a/README.md b/README.md index ddebaf3..4b6b47a 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,34 @@ whole app. It is built around three claims: Rules are never violet; the agent's narrative always is. Nobody should have to be told which is which. +## Brand + +Everything below was read off HDFC Bank's own production assets rather than +recalled or approximated. Check the source before changing any of it. + +| What | Value | Where it came from | +|---|---|---| +| Logo | `src/components/HdfcLogo.tsx` | Coordinates lifted verbatim from `s7ap1.scene7.com/is/content/hdfcbankPWS/hdfc-bank-logo` — the SVG the bank serves in its own site header | +| Blue | `#004C8F` | The lockup's bar fill | +| Red | `#ED232A` | The mark's ground | +| Typeface | Open Sans | hdfcbank.com preloads OpenSans Regular / SemiBold / Bold / ExtraBold and sets its whole site in it. Self-hosted through `@fontsource-variable/open-sans`, never a CDN | +| Page tint | `#F0F6FB` | The tint behind content on hdfcbank.com | +| Success green | hue of `#00B947` | The bank's green, darkened to `#00713D` — `#00B947` itself is 2.6:1 on white and unreadable as a label | +| Tagline | "We understand your world" | Shown once, on the sign-in card | + +**The mark is a RED square with a BLUE centre**, split by a white channel +cross — not a blue square with a red inset. It was drawn inside out here +originally, in the component *and* in the favicon in `index.html`. Those two +carry the same coordinates; change one and you must change the other. + +The lockup carries the bank's own 3px white keyline, which is what lets it sit +on a coloured ground — so there is no reversed variant, and none is needed. It +is also why the header is a light surface: HDFC puts the full lockup on a light +ground on every one of its own digital surfaces, and the navy header this app +used to have would have dissolved the lockup's own blue bar into itself. The +bank's blue does its work as the rule under the header, the active queue and +the primary button. + ## Theming One attribute — `data-theme` on `` — swaps the whole console. Every colour @@ -97,13 +125,19 @@ is a CSS custom property redefined under `:root[data-theme='dark']` in `src/styles.css`. There is no second stylesheet and no `dark:` prefix anywhere. **Never put a literal colour in a component.** A hex or a raw Tailwind shade is -invisible to the toggle and will be wrong in one of the two themes. +invisible to the toggle and will be wrong in one of the two themes. `HdfcLogo.tsx` +is the single exception, and it earns it: a logo's colours are not design +decisions, so the mark stays `#ED232A` and `#004C8F` in every theme. -The palette is the bank's two colours, and **red is never decoration** — it -marks the logo block and a decline, nothing else. So when red appears in a -queue it means something. The referred queue's amber is the only amber in the -pipeline, for the same reason: it should read as "needs you" without reading as -an error. A referred file is not a bad file. +**Red is never decoration** — it marks the logo and a decline, nothing else. So +when red appears in a queue it means something. The referred queue's amber is +the only amber in the pipeline, for the same reason: it should read as "needs +you" without reading as an error. A referred file is not a bad file. + +Every text colour clears WCAG AA on each surface it actually lands on, in both +themes. There is one knowing exception: white on `--color-signal` is 4.31:1 — +the Decline button. Darkening HDFC red to clear AA would have made the one red +button on the screen a different red from the logo beside it. ## Known gaps diff --git a/index.html b/index.html index a38833a..eaea114 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,24 @@ HDFC Bank | Loan Desk - + the server chose. + + These coordinates are the same ones in src/components/HdfcLogo.tsx, + taken off HDFC's own vector: a RED ground, a white channel cross, a + BLUE centre. It was drawn inside out here too — blue outside, red in — + so if you change one of the two, change the other. --> - - + +