Logo Usage

Source

The official Shumoul logo, fetched verbatim from its permanent URL:

https://platform.shumoul.com/assets/images/large-lgo.svg

Stored locally at static/img/shumoul-logo.svg — self-hosted rather than hotlinked, so the portal never depends on platform.shumoul.com being reachable to render its own navbar.

Variants

File	Purpose
static/img/shumoul-logo.svg	Original mark — black wordmark, for light backgrounds (light mode navbar/footer, print, light-mode homepage)
static/img/shumoul-logo-dark.svg	Same geometry, wordmark color changed from #000 to #FFFFFF — for dark backgrounds (dark mode navbar/footer, which is the primary experience)
static/img/favicon.svg	Icon mark only (the rounded blue badge with the checkmark), cropped from the same source file — used as the browser favicon

The dark variant is not a redesign. It is the identical SVG geometry with exactly one CSS class's fill color changed (.cls-1, the wordmark, from #000 to #fff) — the blue accent shapes and the icon mark are untouched, since they already have sufficient contrast on a dark background. This is standard practice for any brand mark used across both light and dark UI, not a new logo.

Where the logo appears

Location	Variant used	Config
Top navigation	Auto-switches light/dark via Docusaurus's logo.src / logo.srcDark	docusaurus.config.js → themeConfig.navbar.logo
Homepage hero	Same auto-switching logo, larger size	src/pages/index.js
Footer	Dark variant (footer is always dark-styled, style: 'dark'), links to platform.shumoul.com	docusaurus.config.js → themeConfig.footer.logo
Favicon / browser tab	favicon.svg (icon mark only)	docusaurus.config.js → favicon

Rules

• Never stretch or skew the logo — it is always rendered at its native aspect ratio (252:44 for the full lockup, 1:1 for the icon-only favicon crop).
• Never recolor the blue accent or the icon mark — only the wordmark's fill is ever changed, and only between #000 (light) and #fff (dark), both already part of the approved palette.
• Never place the light-background (black wordmark) variant on a dark surface, or vice versa — always use the theme-matched variant via srcDark, never a manually-chosen one.
• No placeholder or temporary logo exists anywhere in this repository — every reference to a placeholder mark (img/logo-placeholder.svg) has been removed.