Skip to content
Rechaj Design

brand logo

Brand Logo

Section titled “Brand Logo”

The canonical Rechaj brand mark — a two-tone bolt on a 57×57 viewBox. Single source of truth lives at components/rechaj-logo.svg, mirroring the SVG documented in DESIGN.md §“Official Rechaj logo”.

This pattern exists so any mockup, prototype, dashboard, or onboarding screen can drop the brand in correctly without redrawing it.

When to use

Section titled “When to use”
  • Sidebar / topbar of a backoffice or operations app (Atlas, ops dashboards)
  • Mobile app header on root screens (paired with the wordmark)
  • Onboarding cards, splash screens, login screens, empty states
  • Anywhere a placeholder “R” / coloured square / hexagon was hand-rolled — that’s a bug, replace it

Sizes

Section titled “Sizes”
Surface Size Notes
App bar / topbar / sidebar header 22–28 px Default for navigation chrome
Onboarding card / inline brand 32–40 px When the mark is content, not chrome
Splash / empty state / login hero 56–80 px Centerpiece of the surface

Two ways to drop it in

Section titled “Two ways to drop it in”

Option A — Inline SVG (preferred for static HTML mockups)

Section titled “Option A — Inline SVG (preferred for static HTML mockups)”

Paste the SVG directly into the markup. Self-contained, no path dependency, can’t accidentally be tinted by currentColor because the fills are hardcoded on each path.

<svg class="rechaj-logo" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rechaj">
  <path d="M39.6964 8.40009H33.2341C32.1322 8.40009 31.2388 9.29346 31.2388 10.3955V26.0808H40.8856L19.1794 52.4274H35.6029C36.8217 52.4274 37.9736 51.8704 38.7307 50.9152L52.8618 33.0847C53.3368 32.4853 53.4275 31.6671 53.0951 30.9783L43.2908 10.6568C42.6251 9.277 41.2284 8.40009 39.6964 8.40009Z" fill="#0F1D0F"/>
  <path d="M17.597 48.0272H24.0593C25.1612 48.0272 26.0546 47.1339 26.0546 46.0318V30.3465H16.4077L38.1139 4L21.6905 4C20.4717 4 19.3198 4.55689 18.5627 5.51204L4.43159 23.3426C3.95655 23.9419 3.86591 24.7602 4.19825 25.4491L14.0026 45.7705C14.6683 47.1502 16.065 48.0272 17.597 48.0272Z" fill="#01E46F"/>
</svg>

Then size it with CSS:

.rechaj-logo { width: 28px; height: 28px; display: block; }

Option B — <img> referencing the shared SVG

Section titled “Option B — <img> referencing the shared SVG”

Use when the same page renders the logo many times and you want to keep markup terse.

<img src="/components/rechaj-logo.svg" alt="Rechaj" width="28" height="28">

The file at components/rechaj-logo.svg is byte-identical to the inline snippet above and is the canonical asset. Don’t fork copies — link to this one.

Paired with the wordmark

Section titled “Paired with the wordmark”
<div class="brand">
  <svg class="rechaj-logo" viewBox="0 0 57 57" fill="none" aria-label="Rechaj">…paths…</svg>
  <span>Rechaj</span>
</div>
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand span {
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--grey12);   /* or whatever the surface's primary ink token is */
}

For longer wordmarks (Rechaj Stations, Rechaj Backoffice), same typography — semibold, slight negative tracking.

Product marks within the system

Section titled “Product marks within the system”

A few products carry their own product mark alongside (never merged with) this corporate Rechaj bolt:

Examples in the codebase

Section titled “Examples in the codebase”