Lab Request a demo

Brand guide

The IslamicOpenFinance™ visual identity

Logo, colours, type and usage rules, for teams, partners and the press.

IslamicOpenFinance™ logo
Primary logoWordmark in its rails, with the Arabic lineDownload PNG
IslamicOpenFinance™ logo on a dark background
On dark backgroundsType in white; the green is lightened so it holds on blackDownload PNG
Compact wordmark
Compact wordmarkFor the navigation bar, products and documentationDownload PNG
The mark
The markThe octagon-and-gold tile inside the rails; for avatars and app iconsDownload PNG

The logo has two parts: the wordmark and the rails. "Islamic" is green and "OpenFinance" black, written as one word. The rails are not decoration: they stand for connection, routes and open infrastructure, with a circular node at each joint.

Warm white 55%Black 25%Green 14%

Click a colour to copy its code. Status colours carry meaning only: success #127436, warning #A24A08, error #B91C1C. Every text meets WCAG AA (4.5:1): white on the warm green is only 3.5:1, so it carries big type and large surfaces, never a button label or small text. Buttons are deep green with white labels (5.4:1, darker still on hover); small green text is deep green on white or warm white (5.4:1 and 5.2:1); the hero's white copy sits on the hero green (4.6:1).

Display · Alexandria ExtraBold

Build the product before every integration is in place.

Section heading · Alexandria Bold

Model the contract and the approval first.

Body · Alexandria Regular

IslamicOpenFinance™ separates the product from the provider.

Tagline · Alexandria Regular, secondary grey

Open infrastructure for Islamic finance.

Code · Geist Mono

POST /v1/murabaha/contracts

Alexandria and Geist Mono are under the SIL Open Font License and self-hosted. Avoid decorative calligraphy, serif faces and gradients inside letters. The identity is bold, geometric, minimal and legible.

App icon
App iconThe mark on a white rounded tileDownload PNG
Maskable icon
Maskable iconFull bleed, the mark inside the safe zoneDownload PNG
Favicons48 px uses the full mark; 32 and 16 px a simplified mark: the central octagon and its four gold squares inside the railsDownload PNG
Logo clear space2X2X2X2X

The base unit X is the diameter of one of the rail's circular nodes. Keep at least 2X clear on all four sides; no text, image, border or interface element enters it.

  • 180 pxMinimum width of the primary logo (digital)
  • 120 pxMinimum width of the compact wordmark
  • 16 pxMinimum icon size (simplified mark)
  • 35 mmMinimum width of the primary logo in print
Correct use
Recolouring the words or rails
Stretching or changing proportions
Shadow or glow
Do
  • Write the name as one word: IslamicOpenFinance™.
  • Keep the rails as part of the logo.
  • Keep the logo flat, without effects.
  • Respect the clear space and minimum sizes.
  • Use gold only where the logo and tile use it.
Don't
  • Abbreviate the name or split it into three words.
  • Break the rails unevenly or add nodes.
  • Put gradients, shadows or glows on the logo.
  • Set text in gold or on a gold background.
  • Use the logo to suggest a partnership or endorsement that does not exist.

IslamicOpenFinance™ notifications share one language across products: a circular status node, a short title, a one-sentence explanation, at most two actions and a time rail along the bottom. The surface is dark and flat: no glass, coloured shadows or gradients. Hover a notification to pause its timer; on a phone, swipe it away.

IslamicOpenFinanceNotify.show({
  type: "warning",
  title: "Holiday expected",
  message: "Instalment 3 may move by one business day.",
  actions: [{ label: "Open the calendar", onClick: openCalendar }]
});