Canonical brand system
Sham Bus uses one identity across traveler web, company operations, platform administration, documentation, the public launch page, and both native applications.
Mark
The canonical mark is the stakeholder-approved Signature S-Road identity:
- a location pin communicates discovery, stations, and movement through Syria;
- a front-facing intercity coach communicates the product category immediately;
- an S-shaped route connects the coach to the pin and makes the journey part of the identity.
The pin, vehicle, and route are one direction-neutral symbol, so the mark does not reverse between RTL and LTR interfaces.
The supplied concept board was approved on 2026-08-23. The standalone Variant 6 export is the authoritative silhouette reference and was converted to deterministic four-contour SVG geometry; Variant 1 defines monochrome use, while Variants 4 and 5 define the horizontal lockup proportions. Generated English and Arabic lettering was deliberately excluded. Every runtime lockup renders real ShamBus or شام باص text so spelling, localization, accessibility, and typography remain under product control. Future concepts must remain isolated from product code until explicitly approved.
Sources of truth
| Asset | Purpose |
|---|---|
packages/shared/assets/brand/shambus-mark.svg | Transparent emerald product mark |
packages/shared/assets/brand/shambus-app-icon.svg | Deep-green square with a white mark for launcher and PWA icons |
packages/ui/src/brand-logo.tsx | Accessible React mark and Arabic/English lockup |
packages/mobile_ui/lib/src/shambus_brand_mark.dart | Accessible Flutter mark and Arabic/English lockup |
infrastructure/scripts/generate-brand-assets.sh | Rebuilds every checked-in raster derivative |
infrastructure/scripts/sync-flutter-brand-svg.mjs | Synchronizes the inline Flutter vector from the canonical SVG |
Do not edit a generated PNG independently. Change the canonical SVG first and regenerate all derivatives.
Usage
- Use
ShamBusBrandMarkorShamBusBrandLockupon React surfaces. - Use
ShamBusBrandMarkorShamBusBrandLockupon Flutter authentication and splash surfaces. - The Flutter mark embeds the canonical SVG geometry in Dart. It must not use a separately fetched runtime image: the mark has to paint during a cold first visit, even before network assets are available.
- Use the app-icon derivative for favicons, PWA manifests, Android mipmaps, and iOS AppIcon sets.
- Use the transparent mark on light or dark product surfaces by controlling
currentColor; keep the canonical static mark emerald when an application cannot style SVG color. - Give the first meaningful mark on a page an accessible product-name label. Decorative repetitions must be hidden from assistive technology.
Visual rules
- Deep emerald:
#065F46; primary emerald:#047857; controlled accent:#10B981; brand ink:#10231D. - Do not stretch, rotate, mirror, add gradients, add shadows inside the geometry, remove the pin, or recolor it with unrelated accents.
- Preserve at least 10% clear space around the square app-icon derivative.
- Do not replace the canonical mark on product surfaces while evaluating a concept. Review concepts as separate artifacts first.
- Do not use the mark as a generic action icon. Product actions continue to use the shared professional icon library.
Regeneration
The generator requires Node.js, rsvg-convert, and ImageMagick:
bash infrastructure/scripts/generate-brand-assets.sh
The command updates web logos and favicons, PWA icons, documentation assets, the launch page, the inline shared Flutter vector, both Flutter source assets, Android density buckets, iOS and macOS AppIcon sizes, Windows ICO, and Flutter web icons.
pnpm lint:brand fails when the inline Flutter vector no longer matches the
canonical SVG, so a brand-source change cannot silently ship an old mobile mark.
After regeneration, verify the 16px, 32px, 180px, and 1024px outputs visually, then run web type checks and both Flutter analyzers before release.