Brand alignment: BodyMaps tokens, IBM Plex, identity assets, and a brand guard - #7
Merged
Merged
Conversation
Additive-only styling pass that aligns the PanTS-Viewer landing page with the BodyMaps brand (https://thebodymaps.com) for visitors who arrive at the viewer from there. Zero changes to any <script> block, existing CSS class, React component logic, routing, or backend code. PanTS-Demo/public/home.html - <link rel="icon"> -> /logo.png - <title> "CT Finder · Search + Viewer (Dark)" -> "PanTS Viewer · BodyMaps" - <meta name="description"> added for share / SEO previews - --brand token #2a6cff -> #E76F51 (BodyMaps "agreement band" orange). Cascades to .btnSearch background and #inferProgressBar fill. - --accent token #febb02 -> #E76F51 (unified with brand). - ~100 lines of new bm-*-prefixed CSS appended to the existing <style> block. Does not override or touch any existing class. - Sticky top header with BodyMaps logo + wordmark + a single link back to thebodymaps.com. - Hero intro section above the existing #inferenceSection panel (eyebrow + H1 with one orange-accented word + lead). - Footer at the bottom with one attribution line linking to thebodymaps.com. PanTS-Demo/src/index.css - Same --brand and --accent swap so the React viewer (reachable from home.html via /case/<id>, /session/<id>, /reconstruction/<id>) inherits the same orange. PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx - One-line cosmetic change: snake-game apple color bg-red-600 border-red-600 -> bg-[#E76F51] border-[#E76F51]. Snake body color unchanged. The game is a loading-state amusement, so this is purely visual. New assets - public/logo.png BodyMaps mark, transparent, used as favicon. - public/logo-light.png Same mark with white bars + orange band, used in the dark header. Untouched - All <script> blocks in home.html (search / filter / browse / upload / viewer JS). - All existing CSS classes in home.html (.hero, .searchRail, .recBar, .main, .filters, .viewer, .modal, etc.). - All React components except the one SnakeGame color line. - flask-server/, helpers/, contexts/, types/. - package.json (no new dependencies).
|
Someone is attempting to deploy a commit to the eireawerawer's projects Team on Vercel. A member of the Team first needs to authorize it. |
added 7 commits
August 12, 2026 17:22
# Conflicts: # PanTS-Demo/index.html # PanTS-Demo/public/home.html # PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx # PanTS-Demo/src/index.css
- Add src/styles/brand.css: brand-pack color tokens verbatim plus @font-face for IBM Plex Sans 400/500/600 and Plex Mono 400/500 (woff2 in public/fonts) - no more Google Fonts dependency - Replace public/bodymaps-logo.svg content with the adopted mark (same filename, so Header/AuthModal/LegalPage inherit it unchanged) - Add favicon set, apple-touch-icon, og-image; index.html head gets icon links, theme-color, meta description, og/twitter tags - Re-point the live --vp-* viewer tokens (accent/font/mono) at brand tokens; delete the dead palette block (zero var() usages, verified) - Remove orphaned assets: old logo pngs, jhu_logo.jpg, vite/react scaffold svgs, unused Inter TTFs
Replace the JHU Heritage Blue theme (#002D72/#00399a/#68ACE5) and stray blue accents (#2563eb family) across header, landing, auth, settings, upload-adjacent chrome, homepage library, compare pages, team and legal pages. Primary fills, active states, focus borders and toggles use ink (#0F172A, hover ink-2); orange appears only as accent: links and small orange text (accent-deep), stat values, decorative bars, and dark-surface accents (vivid/tint). Fonts switch from Space Grotesk/JetBrains Mono/Inter literals to the IBM Plex stacks; weights above 600 normalized to shipped subsets. Hot files under active PRs (UploadPage, VisualizationPage, annotation/segmentation tools) are deliberately untouched and tracked as deferred in BRANDING.md.
- scripts/brand-guard.mjs: dependency-free checker banning off-brand fonts/colors/marks with an explicit per-rule allowlist of deferred files; verifies index.html identity metadata - .github/workflows/brand-guard.yml: runs the guard on PRs and main (advisory until made a required check) - src/test/brand.test.ts: locks logo, tokens, head metadata and the viewer accent seam via the existing blocking vitest step - BRANDING.md: token roles, typography, logo and naming rules plus the deferred-surface register
New SiteFooter component (company line + partnership link, brand tokens, mono pointer) mounted on the landing page, dataset library, and team page.
Fixes from a pre-merge safety review of the brand alignment: - Fonts: the brand pack's IBM Plex Sans 500/600 woff2 exports contained the 400 face (identical checksums); regenerated genuine Medium and SemiBold subsets from the pack TTFs (weights verified via fontTools). - Deterministic typography for deferred surfaces: alias @font-face maps 'Space Grotesk'/'JetBrains Mono' onto the self-hosted Plex faces, so viewer chrome no longer depends on which page's CSS loaded first. - brand-guard.mjs: path handling via fileURLToPath (spaces/Windows), friendly error outside a git checkout, rename-tolerant allowlists, regex coverage for JSX-escaped font quotes, camelCase fontFamily inline styles, and rgb()-form JHU blue; pre-registered the in-flight SharePatientCard.tsx so that branch's future PR stays green. - brand-guard.yml: run on all PRs (matching ci.yml convention), least- privilege permissions, concurrency group. - Contrast: legal-page links use the darker accent on the off-white ground (accent-deep is below AA there); footer link underlined at rest (use-of-color); progress track recolored from JHU-blue rgba to an ink tint. - Landing page scrolls on short viewports instead of clipping the hero. - Stale pre-brand comments rewritten (UploadPage.css header, AuthModal, AuthButton); BRANDING.md documents guard scope, the paper-2 contrast caveat, and the alias shim.
andyy-yang
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TLDR
Aligns the viewer with the BodyMaps brand in one conflict-free pass: the adopted mark and favicon/OG identity, self-hosted IBM Plex, an ink-primary / orange-accent color system driven by design tokens, a slim site footer routing commercial inquiries to thebodymaps.com, and automated brand enforcement (CI guard + invariant tests). Deliberately scoped so it cannot disturb in-flight work: hot files under active development are untouched (or touched by ≤2 provably disjoint lines) and registered as a deferred migration list.
Major decisions
public/bodymaps-logo.svgnow contains the adopted mark (two ink bars + orange band), so the header, auth dialog, and legal pages rebrand with zero component edits. The previous navy crosshair was never an approved mark. (Rationale: conflict-surface minimization.)#0F172Ais the primary UI color — button fills, active nav, focus borders, toggles. Orange is strictly an accent: links and small orange text (--accent-deep #C2532F) on light, vivid/tint (#E76F51/#F08A6F) on dark. (Source: brand book — "paper-dominant, orange scarce by design".)--vp-*token seam — one line inindex.cssflips ~300var()call sites from blue to the brand accent without editing viewer CSS that teammates are actively changing.package.jsonis untouched, so the queued dependabot PRs are unaffected. The guard bans only patterns this PR fully eradicated; surfaces still carrying pre-brand styling are explicit per-rule allowlist entries (the deferred register), so the guard cannot fail any current in-flight work — verified by simulating it against every open PR's added lines (all green), and the in-flightSharePatientCardbranch is pre-registered.@font-face, so deferred surfaces render deterministically until migrated.What changed
public/bodymaps-logo.svg,public/favicon*,apple-touch-icon.png,og-image-1200x630.png,public/fonts/*index.html#0F172A, meta description, OG/Twitter tags, font preloads; Google Fonts links removedsrc/styles/brand.css(new),src/index.css@font-face; dead--brand/--accent #111111palette deleted (zero usages, verified);--vp-accent/font/monore-pointed at brand tokensHeader,AuthButton,AuthModal,UpgradeDialog,BatchDetailsModal,Settings.css,LegalPage.css,LandingPage,TeamPage,Homepage/components/*,ComparePage.css,CompareViewerPage.css,ProcessingSummaryBar,ScrollToTopButtoncomponents/SiteFooter/(new); mounted inLandingPage,Homepage,TeamPage,UploadPage/contact/; pinned to page bottom via flex-column page shellsscripts/brand-guard.mjs,.github/workflows/brand-guard.yml,src/test/brand.test.ts,BRANDING.mdpublic/andsrc/assets/jhu_logo.jpg, vite/react scaffold SVGs, unused Inter TTFs (all verified unreferenced, including in open PR diffs)Testing
All checks were run on the exact tree a squash merge produces (this branch's merge-base equals the current
maintip, andgit merge-treereports a clean merge):node scripts/brand-guard.mjs: OK (212 files, 7 rules + head metadata)npm run typecheck: clean ·npm run test: 197/197 across 23 files (includes the new brand invariant tests) ·npm run build: greengit merge-tree --write-treesimulations for every open PR and recently pushed branch, computed against bothmainand this branch — the set of conflicts caused by this branch is empty in every case. The only files shared with any open PR areUploadPage.tsx(2 added lines: one import, one<SiteFooter />) andUploadPage.css(top-of-file layout lines vs. their end-of-file appends); the merged result for PR Feat/analytics dashboard #137 was reconstructed and contains both sides with zero conflict markers./fonts, favicon/OG assets return 200, footer pinned at the page bottom (38px) on all mounted pages.#0B4F6Cconfirmed absent from chrome; deleted assets confirmed referenced nowhere.BRANDING.md+ the guard allowlists): UploadPage/viewer/segmentation/walkthrough colors & fonts (files under active PRs — migrate when they land); Flask PDF report header (same);og:imageleft relative until the canonical production origin is set;static.ymlPages deploy publishes the raw source tree (pre-existing issue, unchanged here); neutral-gray sweep; Tailwind@thememapping; stylelint.Out of scope
Copy/positioning decisions (hero tagline vs. tab title, team-page attribution, placeholder legal text), decorative polish (gradient orbs, shadows), per-route document titles, a 404 route, README rebrand, and the deploy-config cleanup — all follow-ups so this PR stays a pure, verifiable brand pass.
Note for the team
This adds a new Brand guard CI check. It is advisory (not a required check) and cannot fail any currently open PR — that was explicitly simulated. If it flags a future change,
BRANDING.mdat the repo root has the tokens to use; please don't extend the allowlists to silence it.Test plan for reviewers
cd PanTS-Demo && npm run typecheck && npm run test && npm run buildnode scripts/brand-guard.mjsfrom the repo rootnpm run dev→ check/,/dashboard,/upload,/team,/terms, and the sign-in dialog: adopted mark, ink primary buttons, orange only as accent, footer at the page bottomUploadPage.tsxfooter mount